Table of contents WordPress

It can be discouraging to spend time crafting content for your WordPress site, only to have users quickly click away. Since most people scan text on the web, providing them with a table of contents in WordPress might help you hold their attention, allowing them to skip right to what they’re looking for.

A table of contents makes it much easier for readers to find exactly what they’re interested in, especially with longer content. It also helps with Search Engine Optimization (SEO). Fortunately, whether you’re familiar with coding or a complete beginner, you can easily add a table of contents.

In this post, we’ll show you four ways to create a table of contents for a WordPress site, including using plugins and a manual approach.

Four ways to create a WordPress table of contents 📝

Here are the four methods we’ll cover – you can click below to jump straight to a specific technique:

  1. Use a dedicated ToC plugin
  2. Use the ToC feature in the Rank Math plugin
  3. Create your table of contents using blocks
  4. Build a table of contents manually

1. Use a dedicated ToC plugin

Using a plugin is a quick and easy way to add a table of contents to your posts or pages. Easy Table of Contents is a free tool that automatically generates a table of contents based on the headings in your text:

Here’s how to use it:

Install the plugin

Start from the WordPress admin dashboard. Navigate to Plugins → Add New. Search for the plugin and click the Install Now button, then click Activate. This is the standard method of installing any free or freemium WordPress plugin.

Configure the plugin’s general settings

Next, you can tweak the plugin’s settings to your liking. Navigate to Settings > Table of Contents to find all of the available options:

The Easy Table of Contents plugin settings screen

First, determine which post types the plugin will support. The system selects Pages by default, but you can pick any combination from the available settings.

Next, choose which post types will automatically get a table of contents. Remember to enable support for each post type you want a table of contents for.

Then, decide the location for your table of contents. Most users place it before or after the first heading, or at the very top of the post, but you can set it up however you’d like.

The position settings dropdown

You can also control how many headings need to be present before the table of contents is included. This is handy if you have a combination of long and short content, as you may not want a table of contents for your briefer posts:

The show when dropdown

After that, you can use the Header Label field to give whatever title you’d like to the table of contents. You can also choose whether to allow users to hide the feature. If you enable this option, readers can click a button to collapse the table:

A collapse button in a table of contents on WordPress

You can also hide the table of contents by default by checking the Initial View box. This means that users will need to click on the button to display the information.

The last of the general settings enable you to tweak the table’s hierarchy and counters. If you check Show as Hierarchy, the table of contents will display subheadings as well as your main headings, like this:

A table of contents organized in an hierarchy

Using the Counter drop-down menu, you can choose how each heading will be numbered. You can select from a large range of options, such as decimals, numerals in various languages, symbols, or nothing:

Counter settings in Easy Table of Contents

Configure the plugin’s design settings

Next, you may want to make changes to your table of contents’ appearance with the following group of settings. You can control the width, as well as whether the table appears on the left, right, or center of the screen. If you’d like to alter the size of the font, you can do that here as well:

The appearance settings in Easy Table of Contents

You can also choose from one of the plugin’s preset color themes. If none of them work well with your website, you can select Custom and define your own colors:

Custom theme color settings

After changing any settings, be sure to click on the Save Changes button at the bottom of the page. Your table of contents should automatically appear according to your configuration settings.

2. Use the ToC feature in the Rank Math plugin

If you don’t use an SEO plugin yet or if you are looking for an alternative to the popular Yoast SEO, then you might want to look into Rank Math. This plugin will take care of the SEO on your website and also add ToCs to your content.

With this method, you kill two birds with one stone. It will not only help you create a table of contents in an easy way but it will also bring lots of valuable SEO features that Rank Math SEO provides for free. Such features include sitemaps, Schema code, image SEO, AI content, link checker, redirections, analytics, and more.

So, how to add a table of contents with Rank Math?

Let’s go over the process below:

Install the plugin

Install Rank Math to your WordPress dashboard by accessing Plugins → Add New. Search for the plugin’s name, then click Install and Activate.

Right after you do this, you’ll be directed to the setup wizard. Follow the steps to configure the plugin’s settings. You’ll be asked for details about your website, prompted to connect Google Analytics, and asked to choose a sitemap configuration. You’ll also be able to tweak some SEO settings.

Rank Math setup wizard

Of course, you can always modify the settings later on, via the plugin’s page in your WordPress dashboard. Moreover, you can skip most of these configurations if you are only looking to create ToCs and do not want to make use of the SEO features of the plugin. However, if that’s the case, then you’re probably better off going with one of the other table of contents solutions offered in this tutorial.

Create the table of contents with Rank Math

Once the plugin is configured, go to the post or page where you want to include a ToC. Click on the (+) icon at the top left of the editor to add a new block. Search for Rank Math and click on the Table of Contents by Rank Math block to add it to your content.

Table of contents block in Rank Math

Here’s how it looks when you insert it:

ToC block in Rank Math demo

Once you add the block, the plugin will automatically create the table of contents by populating all the headings from your post or page. In short, every Heading block that you add will be displayed in the ToC block, following the <h1> through <h6> hierarchy.

ToC example in Rank Math

When your readers click on a title in the table of contents, they will be redirected to the respective section on your page.

You can also edit the ToC by clicking on the block and using the available options. For example, you can customize the list, typography, and colors. Moreover, you can choose to exclude specific headings if you don’t want them listed.

Customizing the table of contents in Rank Math

3. Create your table of contents using blocks

You can also use the default WordPress Block Editor to add a table of contents to WordPress. First, you’ll need to download and activate the free Spectra plugin:

To add a table of contents to your page or post while working in the Block Editor, click on the plus sign and search for Table of Contents. This block will automatically generate a table based on your post’s headings, but there are also plenty of settings you can experiment with.

Under the General options, you’re able to select which heading levels will be included in the table. You may want to remove lower levels to keep your table of contents looking neat:

General settings for the table of contents block

The Scroll settings enable you to turn on Smooth Scroll. When you select this option, readers can click on an entry in the table and ‘smoothly’ scroll to that section instead of jumping straight there.

You can also add a Scroll to Top button that will appear as readers move down the page. When you enable this setting, you’ll be able to select the colors for the button:

A customized scroll to top button

Next, let’s have a look at the Content settings. The first group of options is related to the table’s heading. You can adjust the text alignment and color:

Table of contents heading settings

As with the Easy Table of Contents plugin, you can choose to make your table collapsible. If you’d like, the table can be collapsed initially, so users need to click on it to view it. In addition, you can select and customize the icon that’s displayed:

Collapse settings for the table of contents

From the Style settings, you can make changes to how the block displays the list of contents. You’re able to change the color of the bullet points or disable them entirely. You can also choose colors for the contents, including the hover color, and even fonts:

Content settings for the table of contents block

In the Style settings, you can also select a background color for your table of contents. You can also adjust the width of the table, and even add a fancy border:

A table of contents with a background and border

One advantage of using a block to add your table of contents is that you can style each table differently if you’d like.

4. Build a table of contents manually

The last method we’ll look at is building a table of contents manually using the Block Editor’s built-in functionality. This method offers less potential for customization, but is useful if you want to avoid adding another plugin to your site.

Since the editor doesn’t include a table of contents block by default, you can make your own using a simple list element:

Using a List block to create a table of contents

For the section’s title, you can use a Heading block or just text (we recommend the former, as it’s better for SEO). Once you list every element within the post you’re working on, all that’s left to do is to add links to those sections.

The simplest way to do this is to navigate to the subheading for each section within the list, and open the Advanced tab within that block’s settings. You’ll see a field called HTML anchor, where you can enter a unique identifier for that block:

Adding an HTML anchor for a block

The anchor itself should be a single word, and it needs to be unique. Also, keep in mind that you can’t re-use the same identifier for multiple elements. For a section called “What Is Web Hosting?“, you could create an anchor labeled webhosting.

Then return to your table of contents, and select the entry within the list that corresponds to the section you want to link to. Add a link that includes the HTML anchor you just set, preceded by a # sign. So in this example it would be #webhosting:

Adding an HTML anchor link

Now when someone clicks on that link within your table of contents, their browser will automatically jump to the corresponding section. Just make sure you don’t set the link to open in a new page.

Repeat this process for every element within your table of contents, and you’ll be good to go. If you want the table itself to stand out visually, you can access the block’s settings and change its background color:

Changing your table of content's background

Once you find a style you’re comfortable with, save the changes to your post, and that’s it!

Conclusion 🏁

Adding a table of contents to WordPress posts can have benefits for the user experience, as well as your SEO efforts.

With multiple methods to choose from, you should be able to accomplish this task with very little trouble.

Using a plugin like Easy Table of Contents or Rank Math is probably the fastest way to get a table of contents on your pages, but you’ll have a bit more control if you use the Block Editor and the Spectra plugin. Or, if you prefer not to use plugins, you can also create a table of contents manually using only the Block Editor.

💡 A table of contents is one great way to prepare longer content and make it more accessible. For some other ideas, check out our suggestions for four ways to format long-form content.

Do you have any questions about adding a table of contents to WordPress? Ask away in the comments section below!

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!