Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.

How to Add a Table of Contents to Your WordPress Posts

How to Add a Table of Contents to Your WordPress Posts

If you are looking for a way to improve the user experience of your WordPress website and allow your visitors a clearer view of your content’s structure, we recommend adding a list of your headings with clickable links that will lead them directly to the section they want to read. Better known as a table of contents, this element is used by a great number of websites across the web. Wikipedia is a well-known example of a website that has incorporated this system quite successfully.

Table of Contents Wikipedia

Before we talk further about how you can add a table of contents to WordPress, let’s see why you might need one in the first place.

Why Use Table of Contents on Your WordPress Site

As we already mentioned above, a table of contents can improve the UX of your website as it allows your visitors to get around your page or post more easily. In other words, they will reach the sections they’re interested in faster, and will also be able to explore your content in a more practical and efficient manner. We have to note that this system particularly comes in handy if your page or post contains large chunks of content, such as long-read articles.

Another reason why you should consider using a table of contents is because it can generally improve the SEO of your WordPress website. Namely, if you incorporate this system to a particular page or post, Google will automatically add a “jump to” link in the snippet search result that will lead users directly to the section they are interested in, or rather, to the heading that can be found on your page or post. In other words, if your visitors type in the keywords that can be found in your table of contents, this will make your page more likely to appear in the top results.

Google Search Jump to Form

Aside from adding a table of contents to your pages or posts, you will also be able to insert one into your sidebar. We’re going to show you how to add a table of contents to WordPress with the help of the Easy Table of Contents plugin.

And to illustrate the benefits of this feature and help you get around more easily, we’ve decided to add a table of contents ourselves. These are the topics we will cover:

Premium Qi Addons

Setting Up the Easy Table of Contents Plugin

Easy Table of Contents is an extremely popular plugin that is just as easy to use and set up as its name suggests. Before we move any further into how to use it to add a table of contents to your WordPress website, let’s go through some of the plugin’s settings first.

Easy Table of Contents

After you install a plugin and activate it in your WordPress dashboard, go to Settings >> Table of Contents.

Settings Table of Contents

Once there, you will be able to manage the plugin’s General settings. This includes the options to enable the support for table of contents on pages, posts, custom CSS, and so on.

Table of Contents General

Similarly, you will be able to set the Auto Insert option, which will automatically add a table of contents for each post type. Personally, we do not recommend that you add a table of contents to all your posts unless they’re all lengthy by nature.

Table of Contents Auto Insert

Note that the table of contents will be automatically added only to post types where the table of contents support has been enabled.

You can also choose the position of your table of contents, select the number of headings that your page or post needs to have in order to make the table of contents appear (the default number is 4, but you can change it to any other number), choose whether to display the header label or not (and specify the header label name) and more.

Table of Contents Settings

Next comes the Appearance tab where you can set all appearance-related options when it comes to your table of contents. This includes width, title font size, weight, and so on.

Table of Contents Appearance

Another useful option that you can set here is the theme for your table of contents. There are a few different themes you get to choose, and you can also create a custom theme by changing its background color, border color, title color, link color, etc. You should keep in mind, however, that you will be able to apply the theme settings only if your table of contents is inserted into a page or post, while the table of contents widget will automatically be set to match the widget styles of the WordPress theme you’re using.

Table of Contents Adittional Settings

Finally, in the Advanced settings section, you can set all of your anchors to be lowercase, set the hyphenation, set which headings you want to include in your table of contents, ranging from h1 to h6, and more.

Table of Contents Advanced

Once you’re done with adjusting all the settings according to your preferences, don’t forget to hit the Save changes button.

Table of Contents Save Changes

Adding a Table of Contents to a WordPress Page or Post

If you have enabled the auto-insertion option, then your table of contents will be added to each of your posts automatically (for each article that has more than 4 headings, but you can change this number according to your preferences). That being said, you can also change these settings when needed on a page or post itself.

After you find a post/page you want to add a table of contents to (by going to Pages >> All Pages/Posts >> All Posts), click on edit of the page/post in question, or go to Pages/Posts >> Add New in case you wish to add it to an entirely new page or post.

You will see that an entirely new section has appeared in the page/post editing screen, named Table of Contents.

Table of Contents on Page

Here, you will get to disable the automatic insertion for this particular page or post, and also set the heading level you wish to appear as table items (Heading 1, Heading2, Heading 3, etc.).

Changing any of the settings in this screen will override the preexisting settings (the ones you set in the General settings tab) when it comes to this page/post only.

After you’re done with adding all the content that you want to your page or post, you can preview the page and see what your table of contents looks like.

Table of Contents Preview

Your table of contents will be located right above your article’s first heading. Clicking on any of the available links in your list of contents will lead your readers to the specific section they are interested in.

Adding a Table of Contents to Your WordPress Sidebar

The Easy Table of Contents plugin also comes with a widget that allows you to add your table of contents to your WordPress sidebar.

To do this, go to Appearance >> Widgets and find a widget named Table of Contents in the list of available widgets.

Table of Contents Widget

Then, simply add your widget by dragging it to your sidebar area on the right, or click on the widget and then hit the Add Widget button.

Table of Contents Add to Widget

Once you click on the Table of Contents widget in the sidebar area, you will be able to change its title, and also select the highlight color of the active section.

Table of Contents Widget Area
Qode Themes: Top Picks
Bridge New Banner

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme

A Genuinely Multi-Concept Theme

Startit WordPress Theme

Fresh Startup Business Theme

Wrapping Up

A table of contents is a must-have feature on any website or blog that has long-form text content. In case this applies to your WordPress site, we highly recommend adding this useful tool to your page, post, or sidebar area with the Easy Table of Contents plugin. The plugin is fully customizable and quite easy to use, and will ultimately help you organize your content better and create a user-friendly browsing experience.

Post your comment