A Beginner’s Guide to Crafting WordPress Table of Contents in 2024

Do you want to learn how to add a table of contents to your WordPress posts and pages? Then you’ve come to the correct spot. In this post, we’ll show you exactly how to create a WordPress Table of Contents in your posts manually and using plugins.

Why Add a Table of Contents in Your WordPress Post?

As a result, I feel you should consider including a Table of Contents in your posts. It should, ideally, take the headers from the article and organize them into a tidy, accessible, and clickable structure so that readers can jump to that heading with a single click. 

A Table of Content is also quite beneficial to SEO! Bots and crawlers can simply index your site, which can help you rank higher. You’ll also have a separate Google SEO snippet that shows all of your WordPress table of contents titles. This will undoubtedly aid in the expansion of your website!

Let’s look at how to add a table of contents to your WordPress website now that we’ve explored the advantages. First, let’s take a look at how to manually add a table of contents. Then we’ll look at how WordPress plugins may help you do it automatically.

How to Add WordPress Table of Contents Manually

Let’s have a look at how to manually create a table of contents. 

1. Open the post or page to which you’d like to add a table of contents. 

2. If there aren’t any, make the headers that will be used as a table of contents elements. 

3. Go to the first heading block and click on it. There will be a toolbar emerge.

4. Select Edit as HTML from the More Options menu (the three vertical dots symbol). 

In the WordPress editor-1, click Edit as HTML. 

Article Continues Below

5. Add a unique ID name to the heading’s beginning tag. An ID name is a unique identifier that is appended to an HTML element’s beginning tag. Here’s how a header should look like:

h2 id=”unique-id”> h2 id=”unique-id”> h2>Title of Section/h2> 

6. Repeat for the rest of the page’s headers (or only the ones you want to include in the table of contents). I’ll use the ID designations “anchor-1,” “anchor-2,” “anchor-3,” and “anchor-4” for this demonstration.

7. Return to the top of the page by scrolling backward. In the top toolbar, click the Add Block button. 

8. Add a Block button to the WordPress Gutenberg editor8. Select the Custom HTML block from the drop-down menu. You may use this HTML block to make a table of contents. 

9. Include your jump links in the table of contents. Jump links are a sort of hyperlink that allows users to “jump” to various portions of the same page by clicking on them. I simply filled in the rel=”noopener” target=” blank” href attribute with a hashtag and the id name of the headers I defined in the previous step to generate the jump links for this sample.

<div class="toc">
<p>
Table of contents</p>
<ol>
<li><a rel="noopener" target="_blank" href="#anchor-1"> Section 1</a></li>
<li><a rel="noopener" target="_blank" href="#anchor-2">
Section 2 </a></li>
<li><a rel="noopener" target="_blank" href="#anchor-3"> Section 3 </a></li>
<li><a rel="noopener" target="_blank" href="#anchor-4"> Section 4 </a></li>
</ol>
</div>

10. Adjust the section titles and jump links to point to the appropriate sections. 

Remember to include the hashtag in front of the ID name when updating your jump links. 

Finished! You’re all set!

How to Add WordPress Table of Contents Using Plugins

Using Easy Table of Contents 

With over 200,000 installations and a good 4.5-star rating, this table of contents plugin can operate with the Classic, Gutenberg, Divi, Elementor, WPBakery Page Builder, and Visual Composer page editors. It’s understandable. 

Article Continues Below

Easy Table of Contents creates a TOC for every post, page, or custom post, and allows you to enable it for certain pages or posts, as well as control when and where the TOC appears. 

It also offers a lot of customizability. Users may assign themes to their TOCs, and if none of the available themes suit their needs, they can build their own by changing the border, background, and link colors. You may also make your TOC hierarchical or not, which places lower priority items behind higher priority headings, and pick between decimal, numeric, roman, or none for your bullet format. 

You may also opt to omit headers, turn TOCs on and off-post by post, or display TOCs in the sidebar as a widget.

Install Easy Table of Contents

• Click Plugins > Add new on your WordPress site. 
• In the search box, type simple table. 
• Select the plugin Easy Table of Contents. 
• Now click Install, then Activate.

Setup Easy Table Contents

Configuration of the Table of Contents is simple. 

• Click the Settings link for your new plugin on the Plugins page. 
• Table of Contents plugin settings is simple. 
• The three primary areas of the Easy Table of Contents setup are: 

General Settings

The General options determine how and where your site’s table of contents appears. 

The table of contents will only display on Pages by default. Using the “Enable Support” option at the top of the screen, you may modify this. 

You may also choose whether the table of contents is automatically included. The table in the image below is automatically incorporated into all of my posts. 

• Auto-insert posts are enabled. 
• Leave the Heading position at its default.

You may control where the table of contents displays a bit further down the screen.

You may further adjust the table of contents by scrolling down.

Appearance Settings

You may customize the look and style of the table of contents under the Appearance area, including font size. Again, based on my testing of the plugin, I’ll propose certain adjustments. 

Article Continues Below

Leave the Auto width setting alone. 

Because the default width is Auto, the custom width option does not apply. 

• Change the font size of the title 
• Change the font size of the text 
• To design a custom style for the Table of Contents, select Custom.
• Change the colors of the Custom theme to your liking or to the design sample. 

If you wish to start again with the default style, there is a button to reset the color to its default style.

Advanced Settings

This last part contains minor adjustments that will allow you to fully personalize your table of contents. 

“Exclude Headings” is a really helpful feature. If your content is lengthy and you don’t want to clutter the table with subtopics, this is a good option (for example headings in the fifth or sixth level). You may also filter out headers that aren’t connected to the content, such as “Advertisement” or “Sponsored.” A wildcard is a picture underneath the * character.

The final configuration choices pertain to several important aspects. 

• On a desktop or mobile devices, the offset must be kept when scrolling (the scroll effect). 
• Limiting the route to pages that follow a certain URL pattern (this provides great flexibility). 
• Using a widget area to pin the table of contents (sidebar).

Get Easy Table of Contents 

Using Table of Contents

Elementor is a drag-and-drop WordPress page builder. Using a visual editor, this plugin allows you to build attractive pages. It’s made to let you easily create dynamic websites. 

This WordPress plugin is an all-in-one solution that allows you to manage all aspects of your website’s design from a single location. With motion effects, various fonts, and improved background pictures, you can tailor your website to match your brand.

Steps to Add Table Content 

Make a single post template or edit one that already exists. 

To begin, utilize Elementor Theme Builder to either build a new single post template or update an existing single post template where the table of contents should be included. 

Your template may be used for any post type (blog post, page, or custom post type), but we’ll focus on blog posts here. 

Add a Widget for the Table of Contents 

Add the Table of Contents widget where you want your table of contents to appear once you’ve opened your single post template. It’s in a Single category, with the Post Title and Post Content widgets:

After you’ve added the widget, you should see a list of all the headers that appear in the post you’re now previewing. 

It’s now time to customize the Table of Contents widget’s settings. 

Customize the content of the Table of Widgets 

Make sure the Table of Contents widget’s settings is open. Then, on the Content tab, customize the content that appears in the table of contents. First, give the document a title, such as “Table of Contents.” This is a static text that appears above the widget’s automatically-generated list of anchor links. 

Then decide what kind of information to add. You can put the following information in the Include tab: 

• Tags for certain headings. You might want to add the h2> and h3> tags, but not anything below that. The WordPress editor is where you set your heading tags. 
• Other containers are available. Outside of your post’s content, you may also include anchor links to other containers. Take, for instance, your footer. This is a more sophisticated option.

Then, for your table of contents list, utilize the Marker View setting to pick between numbers and bullets. You may select any Font Awesome symbol if you select “bullets.” 

Finally, the Additional Options section allows you to change the following settings: 

Whether or not objects can take up many lines is determined by word wrap. 

• Minimize Box – whether or not the table of contents may be minimized by visitors. You may also pick custom icons and define responsive behavior if you allow it. For mobile visitors, you can, for example, immediately reduce the box to begin.
• Subheadings will be indented beneath parent headers if Hierarchical View is enabled. You have the option of collapsing the sub-items beneath each parent. If this option is turned off, everything will be shown in a single list with no indentation.
• Hierarchical View – Subheadings will be indented beneath parent headers if Hierarchical View is enabled. You have the option of collapsing the sub-items beneath each parent. If this option is turned off, everything will be shown in a single list with no indentation.

Advanced Options to Configure 

To wrap things off, head to the Advanced tab and tweak a few more options for how your table of contents works. 

If you set the Width to Custom and the Position to Fixed in the Positioning section, for example, you can ensure that the table of contents stays in the same place when visitors scroll down the page. 

You may raise the Z-Index to make your table of contents look on top of another element (like your header) if you use positioning to show it “on top of” another element (like your header):

That’s all there is to it! You just learned how to create a table of contents to your content using Elementor Theme Builder and the Table of Contents widget.

Get Table Of Contents

Bonus Plugin to Use to add Table Content: 

Heroic Table Contents

You can also use heroic table contents. Its contents or index section helps visitors to quickly explore your site’s pages. The Heroic Table of Contents block has automated detection of page headers, four built-in styles, display settings, and more.

This plugin will allow you to add a shortcode to your post and then All H1 – H6 elements will be used to create a table of contents

• In a matter of seconds, you can add a contents section to any page. 
• There is four pre-made Table of Contents designs to choose from. 
• Headings can be hidden and relabeled without affecting the original content. 
• Select the headings that will appear in the Table of Contents. 
• The content section can be expanded and collapsed. 
• The contents section can be placed anywhere. 
• Lists can be bulleted, numbered, or simple. 
• To split up and sub-index long information, use several Table of Contents blocks. 
• SEO friendly mobile friendly

How to add Heroic Contents Table of Contents 

• Begin by going to the left-hand admin panel and clicking on Plugins, then selecting the Add New option. 

• In the provided search box, type Heroic Table of Contents. This will bring up a list of additional plugins that you might find useful. Scroll down until you see the Heroic Table of Contents plugin, then click the “Install Now” button to activate it. 
• There is no settings area in this plugin; instead, everything is handled within the block itself.  Open a post or page on your website to which you’d want to add a table of contents. Keep in mind that if you’re making a new one for testing, you’ll need to include certain headers, otherwise the plugin won’t know what to do. Using the “+” button, look for the Heroic Table of Contents block. I would recommend choosing another alternative unless you absolutely require this plugin.

This plugin will allow you to add a shortcode to your post and then All H1 – H6 elements will be used to create a table of contents

Unless you absolutely need this plugin, I would go with another option. This plugin and code are pretty out of date.

Get Heroic Table Contents

Fixed TOC – Table of Contents

Fixed TOC is a robust and well-coded WordPress plugin that makes adding a table of contents to your site a breeze. This premium plugin can read headers throughout a post and generate a table of contents that stays in place as you navigate down the page. 

More than 50 animation effects, meta boxes for each page, different customization options, and more are included in the Fixed TOC. This plugin is translation-ready, so you can translate your table of contents to whatever language you wish. It’s compatible with the newest browsers and WordPress versions.

The WordPress plugin Fixed TOC is really useful. It automatically reads headings through the post text and generates the table of contents, which is fixed in the page display. Users will be able to find the information they need more quickly. This plugin will enable you to include a shortcode into your post, which will subsequently utilize all H1–H6 components to generate a table of contents. You may modify the title, make the list UL or OL, and set the list depth with various overrides. 

I would recommend choosing another alternative unless you absolutely require this plugin. This plugin and its code are rather old.

Get Fixed TOC – Table of Contents

Wrapping Up!

Making your material more user-friendly by including a table of contents at the beginning of your blog post is a fantastic method to do it. It prevents individuals from fleeing fast and is ideal for quick navigation.

Following the step-by-step tutorial or using any of the ways listed above, you can add a table of contents to your WordPress posts and pages. A table of contents helps your SEO and allows your viewers to browse around your material more easily, allowing them to read precisely what they want!