How to Create a Table of Contents in WordPress (3 Ways; No Code)

It can be daunting to spend time creating content for your website only to have users quickly click away. Since most people scan text on the web, you might have better luck catching their attention if they can jump straight to what they’re looking for by providing them with a table of contents in WordPress.

A table of contents can make it a lot easier for readers to find exactly what interests them, especially with longer content. It can also be helpful for search engine optimization (SEO). Luckily, adding a table of contents is a fairly simple process, whether you have coding knowledge or are a complete novice.

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

Three ways to create a WordPress table of contents

Here are the three methods we’re going to cover – you can click below to jump straight to a specific technique:

1. Use a dedicated plugin
2. Build your table of contents with blocks
3. Manually create a table of contents

1. Use a dedicated plugin

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

How to use it:

Install the plugin

You can start from the WordPress admin dashboard by navigating to Plugins → Add New. Search for the plugin and then click on the Install now key followed by activate. Overall, a standard path to install a WordPress plugin.

Configure the general settings of the plugin

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

First, you can determine what post types the plugin supports. pages is selected by default, but you can choose any combination of the available settings.

Next, you can choose which post types will have a table of contents automatically generated and inserted for them. Note that you must first enable support for each post type that you want to generate a table of contents for.

Then you can decide where to display the table of contents. You can place it before or after the first headline, or at the top or bottom of the post:

You can also control how many headings must be present before the table of contents is inserted. This comes in handy when you have a combination of long and short content, as you may not want a TOC for your shorter posts:

After that you can use it header label Field to give the table of contents any title. You can also choose whether to allow users to hide the feature. Enabling this option allows readers to click a button to collapse the table:

You can also hide the table of contents by default by checking that First view Crate. This means that users have to click the button to view the information.

The last of the general settings allows you to tweak the hierarchy and counters of the table. If you check View as Hierarchydisplays the table of contents subheadings as well as your main headings, like this:

Use of counter Drop-down menu allows you to choose how each heading is numbered. You can choose between decimals, digits, roman numerals or nothing:

Configure the plugin’s theme settings

Next, you may want to make changes to the appearance of your table of contents using the following settings. You can control the width and whether the table is displayed on the left, right, or center of the screen. If you want to change the font size, you can also do that here:

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

Be sure to click after changing settings save Changes button at the bottom of the page. Your table of contents should appear automatically according to your configuration settings.

2. 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 need to download and activate the free one Ultimate Addons for Gutenberg Plugin:

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

Under the General Options allow you to choose which heading levels to include in the table. You may want to remove lower levels to keep your table of contents looking neat:

the Scroll Settings allow you to enable Smooth Scroll. Selecting this option allows readers to click an entry in the table and “smoothly” scroll to that section instead of jumping straight to it.

You can also add one Scroll up Button that appears when readers scroll down the page. If you enable this setting, you can choose the colors for the button:

Next, let’s take a look at the contents the settings. The first group of options relates to the table heading. You can customize the text alignment, color and even the font:

As with the Easy Table of Contents plugin, you can make your table collapsible. If you want, the table can be collapsed initially so that users have to click on it to view it. You can also select and customize the displayed icon:

The last of the contents Settings allow you to change how the block displays the table of contents. You can change the color of the bullets or turn them off entirely. You can also choose colors for the content, including the hover color:

Finally there are some style the settings. Here you can 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 benefit of using a block to add your table of contents is that you can style each table differently if you want.

3. Manually create a table of contents

The last method we will look at is to manually create a table of contents using the built-in functionality of the block editor. This method offers fewer options for customization, but is useful if you want to avoid adding another plugin to your website.

Since the editor doesn’t come with a TOC block by default, you can create your own with a simple list item:

You can use a for the title of the section headline Block or just text (we recommend the former as it is better for SEO). Once you’ve listed all of the items within the post you’re working on, all you have to do is add links to those sections.

The easiest way to do this is to navigate to the subheading for each section in the list and open the Progressive Tab in the settings of this block. You will see a box called HTML anchorwhere you can enter a unique identifier for this block:

The anchor itself should be a single word and must be unique. Also remember that you cannot reuse the same identifier for multiple items. For a section called “What is Web Hosting?”, you could create an anchor called “Web Hosting”.

Then return to your table of contents and select the entry in the list that corresponds to the section you want to link to. Add a link containing the HTML anchor you just set, preceded by the # sign, for example “#webhosting”:

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

Repeat this process for each item in your table of contents and you’re 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’ve found a style you’re happy with, save the changes to your post and that’s it!

Conclusion

With a plugin like Simple table of contents is probably the quickest way to get a table of contents on your pages, but you have a bit more control if you use the block editor and the Ultimate addons for Gutenberg plugin. If you don’t want to use any plugins, you can also create a table of contents manually using just the block editor.

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