How to Create a WordPress Table of Contents for a Post

Table Of Contents

If you write really long articles in WordPress, it can very helpful to have a table of contents at the top of the post.

This table of contents is as a quick summary so readers can scan the content and perhaps jump down to a topic they're really interested in.

In this post, I'll show you two ways to add a table of contents to your WordPress site. The first method will use the new Gutenberg editor. The second method will use the old Classic Editor.

Oh, and if you want a live demo of what we're taking about, check out this table of contents. We generated it for this post, using Method #1:


Method #1. A Table of Contents with the Gutenberg editor

With the PublishPress Blocks plugin, you can insert a table of contents into the Gutenberg editor.

The “Summary” block allows you to show a Table of Contents for your posts created with Gutenberg. The plugin will automatically create this Table of Contents using the headings in your post.

Summary Gutenberg Content
Summary Gutenberg Content
  • To get started, install the PublishPress Blocks plugin.
  • Go to edit a post on your site.
  • Create at least one Heading tag in the post or page.
  • Choose the Summary¬†block by clicking its¬†button in the PublishPress Blocks category.
Summary Block
Summary Block

The summary can be aligned to the Left, Center or Right:

Alignment Summary
Alignment Summary

If you have the changed the text on your page, you can also update the summary. Use the “Update Summary” button:

Update Summary
Update Summary

In the right sidebar, there are some options that you can adjust:

  • Load minimized: If you enable this feature, the Summary will be hidden by default. Users will need to click the Summary header title text to see the Summary.
  • Summary header title: This is shown when the Load minimized option is enabled
  • Anchor color: pick a color for the Summary links.
Summary Settings
Summary Settings

If you do choose the “Load minimized” option then you'll be asked to enter a title. Visitors to your site will see that title and a down arrow. Then can click that down arrow to see the full tablle of contents.

Minimized Table Of Contents
Minimized Table Of Contents


Method #2. A Table of Contents with the Classic Editor

With the Easy Table of Contents plugin, you can insert a table of contents in a WordPress post. Every heading in the post will be accessible through a link at the beginning. This image shows the plugin in action:

A Table of Contents for a WordPress post

This tutorial will explain the installation and basic usage of the Easy Table of Contents plugin.

Install Easy Table of Contents

  • In your WordPress site, click Plugins > Add new.
  • Type easy table in the search box.
  • Choose the Easy Table of Contents plugin.
  • Click Install now and then Activate.
Installing the Easy Table of Contents plugin

Easy Table of Contents configuration

  • On the Plugins page, click the Settings link for your new plugin.
Easy Table of Contents plugin settings

The Easy Table of Contents configuration is divided into three main areas: 

  • General
  • Appearance
  • Advanced

General Settings

The General settings control how and where table of contents appear on your site.

By default, the table of contents will only appear on Pages. You can change that using the “Enable Support” option at the top of the screen.

You can also control whether or not the table of contents is inserted automatically. In the image below, the table is being automatically inserted into all my Posts.

  • Check Auto insert posts
  • Leave the default Heading position
Plugin settings for posts and pages

A little further down the screen, you can control where the table of contents appears. I've choosen “Before first heading”. This is the position you can see in the very top image in this tutorial.

Easy Table of Contents plugin settings for positions

Scroll further down and you can customize the table of contents in more ways. Here are some of my recommendations:

  • Change the number of headings to 3
  • Edit the Header label
  • Change the Counter style to Roman
  • Leave the other default values
Plugin advanced settings

Appearance

The Appearance section allows you to configure the look and style of the table of contents, including the size of the fonts. Again, I'll give you some recommended settings, based on my testing of the plugin.

  • Leave the default Auto width

The custom width option does not apply since the default width is Auto.

  • Change the Title font size
  • Change the Text font size
  • Choose Custom, to create a customized style for the Table of contents
Easy Table of Contents plugin appearance settings
  • Change the Custom theme colors according to your taste, or to the design mockup

Notice that there is a button to reset the color to its default style, in case you want to start over from the default style.

Easy Table of Contents plugin color settings

Advanced

This final section has small tweaks to deeply customize your table of contents.

One very useful option is “Exclude Headings”. This is useful if your article is very long and you do not want to clutter the table with subtopics (for example headings in the fifth or sixth level). You can also exclude headings that aren't content-related: for example “Advertisement” or “Sponsored”. The image below the * character is a wildcard.

Easy Table of Contents plugin advanced settings

The last configuration options refer to several key features

  • The offset that has to be preserved when scrolling (the scroll effect) on desktop or mobile devices.
  • Limiting the path to pages with a certain URL pattern (this provides great flexibility).
  • Pinning the table of contents inside a widget area (sidebar).
Easy Table of Contents plugin final settings

Creating a WordPress Table of Contents

  • Create a post with multiple headings
  • Make sure you include h5 and h6 headings. 
  • Include these two headings:
    • Sponsored content
    • Advertisement

One thing to notice is that you can override the global settings of Easy Table of Contents per post. This provides even more flexibility since you can customize each one of the content tables to your specific needs.

Easy Table of Contents plugin live in a WordPress post

Summary

Both PublishPress Blocks and the Easy Table of Contents plugin can insert a content table into your WordPress posts. Each link of the list takes the reader to that section of the article. This is very useful on particularly long articles because it helps visitors get a clear overview of the whole text.


More useful WordPress plugin recommendations


Get the PublishPress plugins

Join PublishPress today and you'll get powerful publishing and permissions plugins to improve your WordPress site.


Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Professional publishing plugins for WordPress! Get PublishPress