Adding a Table of Contents or on-page linking

Question: If I want to have some key words at the top of an article, then when you click on the key word it jumps down to that spot within an article, is that called 'book marking'? and if so, can I do that on my site?

It's not too hard to build links internally within a page; and if you're thoughtful about your header hierarchy, it's super easy!

Creating a table of contents

On Performance Foundry's blog, we use the  Easy Table of Contents plugin to build content like this, our Best WordPress Hosting article:

This plugin will scan your page or post for header tags (like h2, h3) and automatically build the table of contents for you. At time of writing, the interface has default settings, then you activate the feature on a post-by-post basis:

*We have not seen this plugin on high-traffic sites, but on medium traffic, it has a negligible impact on performance.

Another popular plugin is Table of Contents Plus. We hesitate to recommend this plugin because it is no longer updated or supported by the author. As with any outdated plugin, this poses security risks and increases the likelihood that the plugin will cause problems on your site as its code becomes increasingly obsolete over time.

Building your own links

Linking on a page isn't too hard to do manually either; and that's perfect for if you only use this kind of thing occasionally. No-one wants a plugin that only runs on one single page!

To build a link, switch into Text Editor mode on your WordPress Write Screen. You'll use the anchor code twice: once to build an anchor to link to; and another time to build your link.

To build the anchor:

Use the code like this to give your anchor point a name. It's clever to give it a semantically valuable name, so a search engine can understand what you're creating a link to. You don't need to add any content here, and you can add it just before the content.

  <a name="section-one"></a>

To link to that section, you can use the standard anchor tag that you're used to. Just add a # before the name you created.

<a href="#section-one">words go here</a>

The end result will look a little like this:

This technique can be a bit time consuming, but is very simple and baked into the core of html and the web, so it's always going to be safe!

Still need help? Contact Us Contact Us