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 few posts around 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’s style.css file. Your table of contents will match the styles I have here on the MD site:

/* TABLE OF CONTENTS */

#toc_container {
	background-color: #e9e9e9;
	margin-bottom: 26px;
	padding: 26px;
	position: relative;
	z-index: 100;
}

#toc_container .toc_title {
	color: #777;
	font-size: 14px;
	margin-bottom: 13px;
	text-transform: uppercase;
}

#toc_container a {
	color: #777;
	border-bottom-color: #ccc;
	font-size: 15px;
}

@media all and (min-width: 1118px) {

	#toc_container {
		float: right;
		margin-left: 39px;
		margin-right: -52px;
		max-width: 338px;
	}

	[class*="block-full"] #toc_container {
		margin-right: -39.583333333%;
	}

}

This code will make sure your table of contents adjusts if your page has a custom sidebar or displays your content full-width.

Once you’ve completed these simple steps, you’re ready to use the table of contents!

As I said in the beginning of this tutorial, you only need to add the [toc] shortcode at the top of your post to use this on your pages.

Bonus: Remove Unnecessary Scripts

Unfortunately this plugin loads a script on every page of your site whether you use it or not. For the sake of site speed, we want to remove any scripts we don’t use.

To remove the extra HTTP request, paste the following function into your child theme’s functions.php file:

/**
 * Remove TOC+ script from site
 *
 * @since 1.0
 */

function md_remove_toc_scripts() {
	if ( ! class_exists( 'toc' ) )
		return;

	global $tic;

	remove_action( 'wp_enqueue_scripts', array( $tic, 'wp_enqueue_scripts' ) );
}

add_action( 'template_redirect', 'md_remove_toc_scripts' );

P.S. Want to take your writing to the next level? Marketers Delight comes with other great writing tools like footnotes, featured image covers, and useful helper classes.