How to Create a Table of Contents in WordPress (4 Methods; No Code Needed)

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:

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.

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:

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:

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:

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:

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:

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:

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.

Rank Math is one bundled option here, but it’s not the only SEO plugin that can handle a table of contents now. Depending on your setup, you may also find similar ToC blocks or features in other SEO plugins, so this method makes the most sense if you already want Rank Math for its broader SEO toolkit.

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.

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.

Here’s how it looks when you insert it:

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.

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.

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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

Conclusion 🏁

There are also other current options worth noting. For example, some major SEO plugins such as Yoast SEO and AIOSEO now include their own table of contents blocks, while lightweight block-focused solutions can be a good fit if you want a simpler editor-first approach.

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

FREE GUIDE

4 Essential Steps to Speed Up Your WordPress Website

Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀

Site Speed Guide - Below Post

Your Email *

Subscribe to our newsletter

Subscribe to our newsletter

FREE ACCESS

If you are human, leave this field blank.

Δ