How to create a table of contents

How to create a table of contents

What method to use?

There are two ways you can insert a table of contents. You can embrace the power of word press and use a plugin or you can write a small amount of html and create it manually. Although slightly more complex I suggest going down the manual route. Why? Speed mainly, every plugin you use will probably pull in more files and add to the number of http requests needed to load your webpage. So if you can write the html yourself then it will save some load speed.

The html

A webpage content is described in html, a language a web browser can understand. All a table of contents is is a list of links to a position on your page. In html a link is a <a> tag. An <a> tag needs to know where to send the user when it is clicked, this is done via the href property. For example and link to google would look like:

<a href="https://www.google.com"></a>

The above tells the browser to display a link to google, the only bit missing is what text to display for the link. So we need to add some text inbetween the tag like below:

<a href="https://www.google.com">Click here for google</a>

Now to create a link to a position on a page we need to have an way to identify the position. I suggest giving your heading tags ids, for example:

<h1 id="firstItem">First Item</h1>

You can then link to the heading using a # like below:

<a href="#firstItem">Go to first item</a>

So that is it… give you heading tags ids and then build up a list of links using the #id. I would suggest putting the list in a ul tags so the browser knows that the links are a list. Below is an example

<ul>
  <li><a href="#firstItem">Go to first item</a></li>
  <li><a href="#secondItem">Go to second item</a></li>
  <li><a href="#thirdItem">Go to third item</a></li>
</ul>

Putting the items in a list also has the added benefit that they will be styled using your theme list style. If you would like support modifying your styling please feel free to contact me.