How To Add A Table Of Contents To WordPress Posts And Pages

Learn how to easily add a Table of Contents to your WordPress posts, pages, and sidebar …

How To Add A Table Of Contents To WordPress Posts And Pages

Do you publish lengthy posts or pages with multiple sections like user guides, tutorials, training lessons, policies, or other types of documentation where users have to scroll down the page to find what they are looking for?

Adding a table of contents (ToC) to your posts or pages can make it easier for readers to navigate your content and locate information quickly.

How To Add A Table Of Contents To WordPress Posts And Pages

A table of contents (ToC) gives your readers and site visitors a schematic overview of your content structure, making it easier to find your information.

The step-by-step tutorial below shows you how to easily add a table of contents to your WordPress posts, pages, and sidebar without touching code using a simple and free WordPress plugin.

Info

There are many WordPress TOC plugins you can use. For this tutorial, we’ll use a plugin called ‘Easy Table Of Contents.’

Easy Table of Contents

(Easy Table of Contents)

Plugin Description

Easy Table of Contents is a free WordPress plugin that lets you add a table of contents to your posts, pages, and sidebar. The plugin will automatically generates a table of contents for your posts, pages and custom post types based on how you configure the plugin’s settings and format your content headings.

Plugin Installation

To install the Easy Table of Contents plugin from your WordPress dashboard, go to Plugins > Add New and enter “TOC” into the Keyword search field (if you need help see our tutorial on installing WordPress plugins) …

'Add Plugins' screen

(‘Add Plugins’ screen)

Locate the ‘Easy Table Of Contents’ plugin and click on the ‘Install Now’ button …

Install Easy Table of Contents plugin

(Install Easy Table of Contents plugin)

After the plugin has been installed, click ‘Activate’ …

Activate the plugin

(Activate the plugin)

After the plugin has been installed and activated, go to Settings > Table of Contents to configure the plugin’s settings …

Configure the plugin's settings

(Configure the plugin’s settings)

This brings you to the Table of Contents settings screen …

Easy Table of Contents settings screen

(Easy Table of Contents settings screen)

In the General settings section, you can specify what post type you want the table of contents to be enabled for (e.g. posts, pages, etc.), where to auto-insert a ToC, display settings, etc.

You can also choose whether to display the table of contents as hierarchical or not (i.e. nested subheadings) and whether users can toggle the visibility of the ToC when visiting your site …

Easy Table of Contents - General settings

(Easy Table of Contents – General settings)

The Appearance settings section lets you customize the appearance of your Table of Contents.

You can configure settings like the width of your ToC, title font size, colors, etc. The plugin includes several built-in themes to change the appearance of the inserted table of contents and you can also create your own custom ToC color scheme by selecting the Theme > Custom option and specifying colors for the border, background, title, link, hover link, etc. …

Easy Table of Contents - Appearance settings

(Easy Table of Contents – Appearance settings)

The plugin also provides an Advanced settings section that lets you configure the plugin further, including what heading the plugin should include when generating a ToC  …

Easy Table of Contents - Advanced settings

(Easy Table of Contents – Advanced settings)

Remember to click ‘Save Changes’ to update your ToC settings …

Save changes to update your ToC settings

(Save changes to update your ToC settings)

Plugin Usage
Adding A ToC To Posts And Pages

The plugin will generate a Table Of Contents for your posts or pages based on how you format your content headings using HTML tags (e.g. H1, H2, H3, etc.) …

Add headings in your posts or pages to generate a table of contents

(Add headings in your posts or pages to generate a table of contents)

You can easily format your content using the formattting dropdown menu in your WordPress Visual Editor  …

Format your content headings

(Format your content headings)

So, for example, if you want to display only main content headings, you would format your content like this …

First-level content headings

(First-level content headings)

You can also create a “nested” table of contents, by creating child items using ‘next level down’ headings in your content …

Create a nested ToC using different heading levels

(Create a nested ToC using different heading levels)

The Easy Table of Contents plugin lets you create a ToC with multiple nested levels (up to 6 levels deep) …

Create a ToC with multiple nested levels

(Create a ToC with multiple nested levels)

The screenshot below shows a table of contents with nested levels …

Table of Contents

(Table of Contents)

Tip

After configuring  the plugin’s settings, visit your site and experiment with the ToC settings to create the look you want.

For example, to display a table of contents without item numbers, go to the plugin’s ‘General’ settings section and select Counter > None

Easy Table of Contents - General Settings > Counter

(Easy Table of Contents – General Settings > Counter)

Save your new settings and the ToC will automatically update throughout your site …

Table of Contents without numbered items

(Table of Contents without numbered items)

Depending on your settings, visitors can also toggle the visibility of the table of contents to display or hide the ToC …

Display or hide the ToC

(Display or hide the ToC)

You can also adjust individual post or page ToC settings by selecting options in the Table of Contents metabox below your posts or pages …

Adjust individual post or page ToC settings

(Adjust individual post or page ToC settings)

This metabox allows you to configure the following on a post by post basis:

  • Selectively enable or disabled the table of contents.
  • Choose which headings are used to generate the table of contents.
  • Exclude headers from displaying on the ToC.

Tip

If you can’t see the Table of Contents metabox displayed under your posts or pages, check that the ‘Table of Contents’ checkbox has been enabled in your Screen Options tab …

Screen Options - Enable 'Table of Contents' checkbox

(Screen Options – Enable ‘Table of Contents’ checkbox)

Fine-tune the plugin’s settings until you are happy with how the table of contents display on your site.

Adding a ToC To Your Sidebar

The plugin also adds a Table of Contents widget that you can use to display the ToC on your sidebar to visitors …

Table of Contents widget

(Table of Contents widget)

The widget lets you change the title and the active section highlight color …

Easy Table of Contents widget options

(Easy Table of Contents widget options)

Here’s a screenshot of a Table of Contents widget enabled on the sidebar …

Display a Table of Contents on your sidebar

(Display a Table of Contents on your sidebar)

To learn more about using WordPress widgets, see our tutorial series below:

Tip

If you don’t want to insert a table of contents into your content, you can use the widget instead to display a table of contents in your theme’s sidebar.

To learn more about this plugin, go here: Easy Table of Contents

Congratulations! Now you know how to  add a simple and free WordPress plugin that will display a table of contents on your WordPress posts, pages, and sidebar.

How To Add A Table Of Contents To WordPress Posts And Pages

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

***