Have you ever stopped reading an article because it was too long, you got bored, or you couldn't find the section you really wanted to read? This might not have happened if the author had added a table of contents.
A table of contents highlights the critical sections of an article in order to improve the reader experience. A reader might jump to the section that is most relevant to their question. Or they might read the entire article — just in the order that they want, instead of the way the author laid it out on the page.
A table of contents can help search engine bots as well as humans. By clearly labelling the important section names of an article, bots can understand what the article is about and display rich snippets in the search results.
Now that we've discussed the benefits of adding a table of contents to your WordPress website, let's look at how. First, we'll briefly walk through how we can manually add a table of contents. Then we'll look at how you can automatically with WordPress plugins.
How to Create a Table of Contents in WordPress Manually
You can manually add a table of contents to your WordPress posts or pages with a little bit of code. Let's walk through the process below.
First, go to the post or page you want to add the table of contents to. Click into the first heading block. Then click the More Options button from the toolbar and select Edit as HTML.
Add a unique ID name to the opening tag of the heading. For this demo, I'll use the ID names "anchor-1," "anchor-2," "anchor-3," and "anchor-4."
Repeat for the rest of the headings on the page (or only the ones you want to include in the table of contents.)
Next, click the Add Block button in the top toolbar.
Then click the Custom HTML block.
Copy and paste the following HTML into the block:
<p>Table of contents</p>
<li><a href="#anchor-1">Section 1</a></li>
<li><a href="#anchor-2">Section 2 </a></li>
<li><a href="#anchor-3">Section 3 </a></li>
<li><a href="#anchor-4">Section 4 </a></li>
This will create an ordered list of jump links. Jump links are a specific type of hyperlink that readers can click on to "jump" to different sections on the same page. To create the jump links for this demo, I simply filled in the href attribute with a hashtag and the id name of the headings I wrote in the previous step.
Here's how this table of contents would look and function on the front-end of my WordPress site:
While this process only takes a few steps, it does require some knowledge of HTML and CSS. If you're not familiar or comfortable with coding, then you can use a plugin to add a ToC to your WordPress posts and pages. Below we'll check out the best table of contents plugins that don't require any coding.
How to Create a Table of Contents with a Plugin
Creating a table of contents with a plugin is simple. You simply install a ToC plugin and configure its settings.
You'll start with general settings. Most plugins will allow you to pick what type of content should be supported, and whether you want a table of contents to be automatically inserted in every post, page, and other supported content type or whether you want to decide on a post-by-post basis.
Then you'll have some design options. How wide do you want the table to be? What font size? These are just a few options that will likely be included in the plugin's settings.
Let's take a look at some of the best ToC plugins on the market. You can check out the documentation for whichever plugin you choose for more detailed instructions on how to use it.
Best Table of Contents WordPress Plugins
Below are a range of free and premium plugins you can use to add tables of contents to your WordPress site, no matter what your budget is.
Fixed TOC is a powerful and cleanly coded WordPress plugin that will make it easy to add a table of contents to your blog. This premium plugin can automatically scan headings throughout a post and create the table of contents, which is fixed in the page display.
Fixed TOC comes with more than 50 animated effects, a great meta box for each page, various customization options, and more. In addition to being compatible with the latest browsers and version of WordPress, this plugin is also translation-ready so you can localize your table of contents to any language you want.
By using this plugin, you can rest assured that your readers will find the content they want quickly and easily.
Easy Table of Contents is perfect for newbie bloggers and site owners on a budget.
This free plugin automatically generates a table of contents for your posts, pages, and custom post types by parsing content for headers. You can choose where and when to insert your table of contents in your articles. You also get several options to configure your table of contents and control how it is displayed, including smooth controlling and multiple counter bullet formats. You can even choose to hide the table of contents from particular posts.
CM Table of Contents is another free WordPress plugin that helps you generate a table of contents based on an HTML element's tag, class name, or ID.
All you have to do is fill this information in the plugin's settings page. While this will require you to name or recognize an HTML element's tag, it will allow you to create a multi-level table of contents made up of not just headings but any element you want. Want to include an image in your ToC? No problem! Just add its tag, class name, or ID in the settings and you're all set.
You can then place this ToC anywhere in a post or page using a shortcode.
Thrive Architect is a feature-rich tool like Ultimate Blocks. It offers lots of functionality for extending your WordPress site, including the ability to automatically create a table of contents.
With Thrive's Table of Content element, you can select which headings you want generated in a table of contents so that every time a particular title appears, a table of contents will be automatically generated. You can also select a template for your ToC and customize it by choosing its layout, color, typography, border, shadow, and more.
Improving the Reader Experience
You can add a table of contents to your WordPress posts and pages by following the step-by-step guide or Using any of the plugins above makes it easier for your readers to navigate through your content and read exactly what they want to.
Originally published Sep 1, 2020 7:00:00 AM, updated September 02 2020