How to Create a Table of Contents for WordPress Posts
If you write really long articles in WordPress, it can very helpful to have a table of contents at the top of the post. This acts as a quick summary so readers can scan the content and perhaps jump down to a topic they’re really interested in.
With the Easy Table of Contents plugin, you can insert a table of contents in a WordPress post. Every heading in the post will be accessible through a link at the beginning. This image shows the plugin in action:
This tutorial will explain the installation and basic usage of the Easy Table of Contents plugin.
Step #1. Install Easy Table of Contents
- In your WordPress site, click Plugins > Add new.
- Type easy table in the search box.
- Choose the Easy Table of Contents plugin.
- Click Install now and then Activate.
Step #2. Easy Table of Contents configuration
- On the Plugins page, click the Settings link for your new plugin.
The Easy Table of Contents configuration is divided into three main areas:
The General settings control how and where table of contents appear on your site.
By default, the table of contents will only appear on Pages. You can change that using the “Enable Support” option at the top of the screen.
You can also control whether or not the table of contents is inserted automatically. In the image below, the table is being automatically inserted into all my Posts.
- Check Auto insert posts
- Leave the default Heading position
A little further down the screen, you can control where the table of contents appears. I’ve choosen “Before first heading”. This is the position you can see in the very top image in this tutorial.
Scroll further down and you can customize the table of contents in more ways. Here are some of my recommendations:
- Change the number of headings to 3
- Edit the Header label
- Change the Counter style to Roman
- Leave the other default values
The Appearance section allows you to configure the look and style of the table of contents, including the size of the fonts. Again, I’ll give you some recommended settings, based on my testing of the plugin.
- Leave the default Auto width
The custom width option does not apply since the default width is Auto.
- Change the Title font size
- Change the Text font size
- Choose Custom, to create a customized style for the Table of contents
- Change the Custom theme colors according to your taste, or to the design mockup
Notice that there is a button to reset the color to its default style, in case you want to start over from the default style.
This final section has small tweaks to deeply customize your table of contents.
One very useful option is “Exclude Headings”. This is useful if your article is very long and you do not want to clutter the table with subtopics (for example headings in the fifth or sixth level). You can also exclude headings that aren’t content-related: for example “Advertisement” or “Sponsored”. The image below the * character is a wildcard.
The last configuration options refer amongst others to the offset that has to be preserved when scrolling (the scroll effect) on desktop or mobile devices, limiting the path to pages with a certain URL pattern (this provides great flexibility) or pinning the table of contents inside a widget area (sidebar).
Step #3. Easy Table of Contents in action
- Create a post with multiple headings
- Make sure you include h5 and h6 headings.
- Include also these two headings:
- Sponsored content
One thing to notice is that you can override the global settings of Easy Table of Contents per post. This provides even more flexibility since you can customize each one of the content tables to your specific needs.
Easy Table of Contents summary
The Easy Table of Contents plugin inserts a content table into your WordPress posts. Each link of the list takes the reader to that section of the article by using an animated scroll effect. This is very useful on particularly long articles because it helps visitors get a clear overview of the whole text.