How to Add a Table of Contents to Your WordPress Posts & Pages

In-depth, long-form articles are great for getting all of the information you’ll need on a subject, but wading through them can take up precious time that you don’t have – this is the Information Age after all. One of the best things you can do to improve user experience when reading mammoth posts is to implement a table of contents into your articles. That way, visitors get to skip the content they’re uninterested in, and read the important parts immediately.

In this post, we’ll clarify exactly what a table of contents is, show you how to add one to your own website, then show you how to implement one in Divi. Let’s get started!

What a Table of Contents Is (And the Benefits of Using One)

Simply put, a table of contents acts as an outline of the content you can expect to find on any given post or page. In the case of WordPress posts, you can compose one out of the subheadings you use for each section. For example, this post would look something like this:

1. Introduction
2. What a Table of Contents Is (And the Benefits of Using One)
3. How to Add a Table of Contents to Your WordPress Posts and Pages
   1. Introducing the Table of Contents Plus Plugin
   2. How to Set Up the Table of Contents Plus Plugin
   3. How to Use a Table of Contents With Divi
4. Conclusion

A table of contents can also come in other shapes and sizes – for example, if you’re dealing with books, you might include page numbers and graphics:

However, they’re not just suited to printed mediums – the internet enables site owners to use them almost as navigation. Arguably the most prominent website to do this is Wikipedia:

There are numerous benefits to offering a table of contents as navigation. Let’s discuss the three most important ones:

1. They provide an outline for your readers, so they can get a better idea of what lies ahead.
2. Users can skip right to the sections they want in case they need something specific.
3. They work well with content arranged into headings and subheadings.

This last aspect can also help you to structure your posts and pages better. For example, a bird’s eye view of your content is particularly useful when considering which sections could use a bit more attention, or which could be merged.

Now that we know why they’re useful, we can move onto their implementation.

How to Add a Table of Contents to Your WordPress Posts and Pages

It’s entirely possible to create a table of contents manually for each of your posts and pages. However, the process would be painstaking, and there’s no reason to lose time when there are effective ways to automate things. Let’s take a look at our favorite tool for the job.

Introducing the Table of Contents Plus Plugin

The Table of Contents Plus plugin helps you create a table of contents for your posts, pages, and custom posts types. It enables you to configure exactly where the table appears, and under which conditions it shows. You’ll also get full control over the table’s appearance and behavior, so that you can customize it to your exact requirements.

Key Features:

• Lets you insert a table of contents on posts, pages, and custom post types according to your instructions.
• Enables you to insert tables manually using shortcodes.
• Lets you customize the appearance and behavior of your tables.

Price: FREE | More Information

How to Set Up the Table of Contents Plus Plugin

There are no complicated steps to activating the Table of Contents Plus plugin. Simply download, install, and activate it, and a TOC+ tab will appear under Settings on your WordPress dashboard. Clicking on it will take you to the plugin’s settings.

The first setting under the Main Options tab – Position – determines where your table will appear. As far as we’re concerned, Before first heading seems like the most practical choice, so let’s stick with that:

Moving on, the Show when option is possibly the most important out of them all. It determines how many headings need to appear on a given post or page to toggle a table of contents. For example, if you use a single heading or two throughout a post, a table of contents could be considered overkill – we recommend choosing a minimum of three.

Next, you can choose whether tables should appear on posts, pages, or any custom post types. For our example, we stuck with posts only:

The next couple of settings enables us to choose the title that will appear at the top of our table of contents. You can stick with something general (such as “Contents”), or go with the title of the post itself. To do the latter, enter %PAGE_NAME%  into the Heading text field. You can also enable users to toggle your table of contents on or off – we recommend checking it for usability’s sake:

The last two options in this section determines whether your table of contents displays hierarchies (think headings and subheadings), and includes numbered list items. Hierarchy enables users to grasp the structure of your posts quicker, and we like numbers, so let’s keep both turned on:

Finally, the settings also include some display options under Appearance – the first of which concerns width. You can choose several options from a drop-down list, including relative and fixed widths. We recommend sticking with the default Auto setting, which is relative to your post’s width:

Next, ignore the Wrapping option and play around with the Font size setting if you want to. As long as you keep the size the same or a bit smaller than the main body of your post, it should look fine:

Finally, the plugin enables you to choose from a variety of default styles for your table of contents. They’re all understated, so you don’t have to worry about them clashing with your posts’ style – unless you choose the black option, that is. You can also create your own style by using the color picker tool under the the Custom radio button:

It’s worth noting that if you leave the above values as #, the table will inherit your theme’s main styles – although it’s worth trying different color combinations out until you land on one that you like. Once complete, we’ll want to check out how it all looks – so let’s fire up Divi and add the table of contents to our website!

How to Use a Table of Contents With Divi

A table of contents synergizes very well with Divi, especially if you’re dealing with long-form content. With this in mind, we’ve put together a basic blog post using the Divi Builder and the Divi Text module:

Here’s our resulting table of contents alongside part of our example blog post. The filler text is courtesy of Cupcake Ipsum:

The Table of Contents Plus plugin can work with any Divi post or page that uses a lot of headings, but its positioning might not always be perfect. If you want more control over where your table will appear, you can always add a Divi Code module in your desired location, and insert the [toc] shortcode. This will override your default settings, and replace the default table of contents position if the post already had one.

Conclusion

A table of contents offers an elegant solution to a complex problem – it enable users to find the information they need within a long-form post quickly. They’re easy to implement, and they pair nicely with Divi – so there aren’t any downsides to trying them out! These are the steps you need to follow to do so:

1. Familiarize yourself with the Table of Contents Plus plugin.
2. Set up and configure the plugin to display on the pages and posts you want.
3. Use Divi’s Code module if you’d like further control over your table of content’s placement.

Do you think that a table of contents can improve the user experience for your visitors? Subscribe and share your thoughts with us in the comments section below!

Article thumbnail image by ImageCatalog / shutterstock.com.