I’m sure some of you have seen guides which have a table of contents with links in them. Some examples include my Tree Healing Guide and Shikamaru’s Eternal Farming Guide. For long guides with multiple parts, these tables of contents (or ToCs, for short) are extremely useful for quickly navigating between sections of the guide. They can also be used to navigate between guides split up into separate chapters. This guide will show you how to create interactive ToCs for your guides.

A quick note: in the code shown in this guide, some parts need to be replaced by code specific to your guide. These parts will appear in green.

Let’s start off with an example – the ToC for this guide!

Table of Contents

1. Choosing a type of code
2. Using Mediawiki to create a ToC
3. Using HTML and BBCode to create a ToC
4. Tips and Tricks for HTML ToCs
5. Comments

Choosing a type of code

There are actually two ways to make a ToC for your guide. One uses Mediawiki, the other uses HTML. The Mediawiki way is the easiest, but unfortunately requires that your guide be done entirely in Mediawiki with zero HTML or BBCode. That means limited customization, and additionally many people on WoW-Pro don’t know how to use Mediawiki at all. Using HTML to make the ToC is more complicated, but lets you use both HTML and BBCode throughout the guide.

IMPORTANT NOTE: Either of these methods will work for BOTH a “wiki” (group) page OR a “guide” (single editor) – you can use the wiki formatting even if it is a solo editor page, and you can choose not to use it on a group page.

BBCode

BBCode is the default option for WoW-Pro’s input format. It is a type of code used on many online forums. Through BBCode, you can use many common HTML tags, but it keeps users from seriously messing up page layouts with bad HTML. You can get a lot of custamizability out of pure BBCode (for example, the only non-BBCode things in my Tree Healing Guide are the ToC links), but this input format is even better because WoW-Pro lets you use HTML as well – but only when BBCode is the input format, NOT when you use Mediawiki.

Essentially: A large amount of custamizability and the ability to use HTML, with the drawback of somewhat complicated and ugly code and the potential to mess up page layouts with bad HTML.

Mediawiki

Mediawiki is the code language used on most wikis, such as Wikipedia and Wowwiki. However, the Mediawiki available on WoW-Pro is a little more limited than on many wiki sites, since WoW-Pro is not a full wiki. In addition, you cannot use HTML if you chose Mediawiki as your input format.

Essentially: Sacrifices custamizability for easy to read and easy to write code.

Back to the top

Using Mediawiki to create a ToC

Using Mediawiki to make a ToC is very easy, so we’ll cover it quickly in this section. For an example guide with a wiki ToC, see the Loot Distribution Systems guide. For a cheat sheet of common Mediawiki code, see this page.

• Input format : First, you must have your input format set to Mediawiki. The input format options are found just below your guide’s main content textbox when you edit your guide. It is minimized by default – click the arrow to maximize it.
• Place ToC : Next, you need to tell your guide where you want the ToC. Simply place the following code wherever you want the ToC in your guide:
  • [[toc]]
• Add sectionsFinally, you need to tell the ToC what to list. You do this by using equal signs around your section headings throughout your guide:
  • ==Highest Level heading==
  • ===Subheading===
  • ====Sub-sub heading====

Each of these will be added to your ToC automatically, and it will also automatically format your section headings.

Back to the top

Using HTML and BBCode to create a ToC

As mentioned above, BBCode and HTML allow a lot more customization at the expense of ease of use. See this page for some basic BBCode formatting information to help with the rest of your guide.

• Input format : First, you must have your input format set to BBCode. The input format options are found just below your guide’s main content textbox when you edit your guide. It is minimized by default – click the arrow to maximize it.
• Make the ToC list : Next, you need to make the ToC itself. This is significantly more complicated than in Mediawiki. But, you can also make it look however you want!I’ll teach you how to make a simple ToC, but you can modify the formatting to suit your style. Please note that to format text that is a link, you need to put the formatting tags inside the link tags. To make your ToC, start by making a numbered list. Use the following tag to start and end your list:

[list=1]

You’ll put all your list content in between these two tags. Feel free to separate them from the content with line breaks as shown, it can help when reading your code.

[/list]

This is how you start and end your list. To put a numbered item on your list, simply use the following tag at the start of the line you want to add:

[*]

This should be all you need to create a list like the one at the top of this guide. However, it won’t have any links in it yet.

• Create anchors : Next, we need to make the anchors that will let you link to parts of your guide. Time for a little HTML vocabulary.An anchor tag always starts with a, for anchor. An anchor tag is usually used to make a link – it’s used to reference an anchor, usually another page. In this guide, we’ll learn to add anchors inside our page, and then reference those anchors. First you will learn to add the anchors. In your guide, find a section you would like to link to. Right above that section, you will add an anchor:

<a name=”sectionname“> </a>

Choose a shortened name for the section – no users will see it, so don’t worry about it being perfect. Make sure it is all lower case with no spaces. Also, make sure you add the closing </a> tag, otherwise the code won’t work and may mess up your page.

• Link to anchors : Now that you have your anchors created, you can link to them from your ToC. Simply add <a href> tags to your already-created list as follows:

[list=1]

[*] <a href=”#sectionname“>Your Section’s Full Name</a>

[/list]

Make sure you include the # at the beginning of your anchor’s name – this tells the browser that the anchor is in this page.

That’s all you need to know to make a basic list!

Back to the top

Tips and Tricks for HTML ToCs

• How to link to other pages from a ToCThis can be useful if your guide is broken into several chapters. Linking to other pages is very easy – you don’t even have to use HTML, just the basic BBCode. Here is the code to link:

[url=yoururlhere]Text you want to be the link here[/url]

• How to link within other pages from a ToC : Also useful if your guide is in multiple chapters, this lets you link to specific anchors in other pages. First, make sure you have the anchors set up in the other page. Then, simply use the same type of link as for anchors within your main guide, except instead of just the #, use the other page’s url:

[list=1]

[*] <a href=”yourguidesurl#sectionname“>Your Section’s Full Name</a>

[/list]

• Create “Back to top” links : For large guides, it is really nice to be able to click a quick link to return to the ToC at the top of the guide. You can very easily do this by creating an anchor above your ToC, then add a simple link referencing that anchor at the end of each section.

Example anchor:

<a name=”top”></a>

Example end of section link:

<a href=”#top”>Back to the top</a>

You can even add a little up arrow as a link to the top, along with the words (or without them if you like).

First, you’ll need to upload the arrow – use the file attachments option at the bottom of your guide’s edit page. Once it is uploaded, it will show you the picture’s url, copy that.

Add an image tag inside the anchor reference tag. You can use BBCode for this part. You can leave the words as well, or delete them depending on your preference.

Example with words:

<a href=”#top”>[img]http://yourimagesurl[/img]Back to the top</a>

Back to the top

Now you should know enough to make ToCs for your guides! Feel free to leave a comment with suggestions for improvements, questions, or corrections.