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

Adding a table of contents to your blog posts and pages makes it easy for your readers to find the most relevant pieces of content on the page.

Take a look at just a fewpostsaround this site and you can see a gorgeous table of contents in action. Thanks to the beauty of WordPress plugins, adding this great feature to your own site is easy.

In this quick tutorial, I’ll show you how to add a beautiful table of contents to your pages as well as a few other enhancements to really make it match to your Marketers Delight website.

Step 1: Install the Table of Contents Plus WordPress Plugin

First of all, you need to install the Table of Contents Plus plugin which adds the features we need for a fully-functional and automated table of contents.

Once enabled, this plugin will automatically gather the heading tags used in your post to form the table of contents. The way you structure your post is how the table of contents will automatically generate itself.

As the plugin page states:

The plugin was designed to be as seamless and painfree as possible and did not require you to insert a shortcode for operation. However, using the shortcode allows you to fully control the position of the table of contents within your page.

Since I don’t use a table of contents on every page, I choose to manually add it when I need. To output the table of contents, simply write the [toc] shortcode at the top of your post editor like so:

Step 2: Configure Table of Contents Settings

This plugin comes with an admin settings page that allows you to customize your table of contents in many ways.

To access these settings go to WP Admin > Settings > TOC+. Here’s a screenshot of how I’ve configured the plugin settings (click to enlarge):

In the next step we’re going to customize the table of contents with our own styling. For the best results I recommend you use the “Custom” style option and remove the CSS file the plugin adds automatically (under Advanced settings).

Step 2: Add Custom Styles

Now that we have a blank canvas to work with, add the following CSS to your child theme’sstyle.css file. Your table of contents will match the styles I have here on the MD site: