Readability is the ultimate strategy to getting your content read. If you’re investing in content as a marketing strategy, or even because you just love to write, making sure your content is able to be read easily is a worthy undertaking. Easily readable content will increase time on site, increase people’s happiness while reading (and thus increase their chances of sharing), and ultimately your content will be more link-worthy which will help you build your SEO traffic and thus your audience and therefore your business.
The average length of content on the internet has increased over time, and because of this it is more important than ever to make sure your content is well organized so that people can move to the section they are most interested in. Search engines are doing a better and better job at pulling out sections of content to answer specific queries (see passage indexing), and you can even find instances where Google will highlight content in yellow to help readers find the right section on a page.
Armed with this as well as the fact that Google shows Featured Snippets on 6.5% (according to Mozcast at time of writing) of search results, and it’s worthwhile to implement a table of contents on your content so that users can navigate and search engines can use it for answers to queries so you can earn those eyeballs there and then ideally as a click over to your site as well.
So how do you implement a table of contents in WordPress? There are three different ways:
- Via code in your theme
- Via WordPress plugin
- Manually in each post
In this article we are going to show you how to do all three.
Via code in your theme
As with anything related to WordPress, the best way to implement anything is via code. This is because plugins can bloat your website with extra files and stylesheets, which at any sort of scale can slow your site down to a crawl and affect not only rankings but more importantly user experience.
The tough thing about code, of course, is that you have to either know how to code or have a developer that you can pay to do it for you. The nice thing about WordPress is that there are a lot of developers out there with deep experience writing WordPress PHP code, so they’re pretty easy to find (we recommend Codeable for most needs like this, though if you want to learn how to do it alongside someone you can use Codementor). I’ve had success with both.
So what’s the code to use and where do you put it?
Unfortunately every theme is different, so the code that is going to work on your site will be unique to your site. Because we’re not developers here ourselves (we’re editors), we recommend that you find a developer to help you create the code.
Then, you’ll put it into your WordPress theme’s file that your blog posts load from. This is by default and likely called single.php, but may be different depending on your theme. Put the code where you want it to show in your article, likely at the top, and then save the file. You will also need to style it with custom CSS so that the table of content fits your site’s styles.
We heavily recommend implementing the code first on a staging site, which any premium hosting will have. We recommend Kinsta for this.
Via WordPress plugin
The easiest way to implement a table of contents in WordPress is via a plugin. There are a lot of plugins out there that have this functionality, but our plugin of choice is Easy Table of Contents because, well, it’s easy and free and just works well.
First, either download the package or go to your WordPress admin plugins page (usually found under Appearance in the sidebar):
Then click Add New near the top and search for the plugin:
Click Install Now and then Activate:
Now navigate to Plugins -> find the plugin Easy Table of Contents -> click Settings and you will see this page:
There are a lot of settings here, but I like to just add it automatically to Posts (though if you use Pages widely this may be useful). As you scroll further down there are also options for controlling styles:
I personally like to control styles myself, so to do this on Credo blog posts I wrote some quick CSS to style it well. Below is the before and after:
Manually in each post
The third way to add a table of contents in WordPress is to do it manually. While I don’t recommend this because it can be time consuming and you have to remember to do it on every single post every single time (and that’s time consuming), it is an option and I’ll show you how to do it.
Fortunately for those of you who like doing things like this the hard way, WordPress’s Gutenberg editor has made it a lot easier to build these links.
First, you need to name all of your headings. Click on the heading, then the three dots at the end, and then “Edit as HTML”:
Then add a unique identifier. For the heading I’m showing here, I might call it “add manually”:
Once you’ve done this for all of your headings, go back to the top of your post and insert a Custom HTML Gutenberg block:
Then you can insert the custom code and link to each heading.
Here’s some code you can build from:
<div class="table-of-contents">
<ul>
<li><a href="#code">Via code in theme</a></li>
<li><a href="#plugin">Via plugin</a></li>
<li><a href="#add-manually">Manually</a></li>
</ul>
</div>And here’s how it looks. It’s pretty bland style-wise (but that can be cleaned up with some quick CSS), but all of the links work:
And there you have it. Three ways to add a table of contents to a WordPress post or article.
Happy writing!