Best Way to add WordPress Table of Contents

  • By: Ruhul
  • Updated:
WordPress Table of Contents

A table of contents makes navigating through a long article easier and improves your website’s SEO.

If you’re thinking about how to add a table of content to your posts, WordPress doesn’t have any “table of content” block by default. You can do it manually, but this is a rather tedious and time-consuming process, especially for longer content.

You can automate the process with plugins. And what’s better than PostX? It is a dynamic site builder plugin based on Gutenberg, which automates the table of content with its own “Table of Content” block. And the icing on the cake is its customizability.

We will show you how to add a WordPress table of content with a plugin and also manually in this article.

How to Add WordPress Table of Content Manually

Here’s how you can add a WordPress table of contents manually.

Step 1: Create a new Post

First, go to the post you want to add to the table of content. 

Add New Post
Add New Post

To create a new post: Dashboard > Post > Add New.

Step 2: Add List Block

Now add a list block where you want to show the table of content. But it’s recommended to add it after an article’s title or introduction.

Add List Block
Add List Block

Step 3: Add Headings/sub-headings in the List Block

Now, you need to add each heading you have in your article (if you’re adding the table of content to a post.)

Adding Subheading in the List
Adding Subheading in the List

If you have subheadings, you can press the “indent” button to make nested bullet points.

Step 4: Publishing the Post

Now, you can publish the post to create a basic WordPress table of content. 

Publish the Table of Content Post
Publish the Table of Content Post

Note: this table of contents is not interlinked, so it’s not clickable and won’t go to the headings you click.

Bonus Step: Adding Hyperlink in the List Block

You can add a hyperlink in the list block. 

Go to the heading > block settings > Advanced. You’ll see an anchor HTML. You have to copy it.

Get HTML Anchor
Get HTML Anchor

Now paste the copied HTML anchor in the relevant heading/subheading in the list as hyperlink with a “#.” Now, the manual table of content is clickable.

Pasting the Internal Link in List
Pasting the Internal Link in List

Repeat the process for each heading/subheading. And, you’ll have a clickable WordPress table of content.

Here’s an output for the manually created table of content.

Manual Table of Content Output
Manual Table of Content Output

Is this too much hassle for you? Worry not because PostX is here with its customizable Table of Content block. Let’s show you how you can add the WordPress table of content automatically using PostX.

How to Add WordPress Table of Content with a Plugin

PostX, the #1 dynamic site builder plugin, comes with its very own “Table of Content” block. The table of content block of PostX automates adding a TOC to your posts. We will see how to do that right away.

Video Tutorial

Here’s a video tutorial to help you with the process.

Step 1: Install and Activate PostX

First, you must install and activate PostX to add a customizable table of content block to your posts.

Installing PostX
Installing PostX

Step 2: Enable Table of Content Addon

Once you are done with activation, you must enable the “Table of Content” addon. 

Enable Table of Content Addon
Enable Table of Content Addon

Enabling this addon will unlock your posts’ PostX “Table of Content” block.

Step 3: Add Table of Content Block in Posts

Adding a block in the Gutenberg editor is easy. You can add a block using the command “/” or click the “+” icon to select from the block library. 

Adding PostX Table of Content Block
Adding PostX Table of Content Block

So, click the “Table of Content” block or drag and drop it to add. And it will show you the listed subheadings (H1, H2, H3, H4….) in the content list table.

[Note: If your content has no heading, the table of contents block won’t show anything.]

Step 4: Customize the Table of Content Block

PostX’s table of content block has its own customization options. Let’s explore them and show you how to make the table of contents more appealing.

Table of Content Customization
Table of Content Customization

Changing the Patterns

First, you can select predefined patterns for the table of contents. Currently, PostX offers 8 different and unique variations for the table of content block.

Table of Content Predefined Pattern
Table of Content Predefined Pattern

You can check out the live preview of each variation by hovering over the variation and clicking the live preview option. And if you like a variation, you can 1-click import it by clicking the “Import” button.

Adjusting Layouts

You can change the table of content block layouts from the “Layout” options. It also has 8 different options to choose from. You can show bulleted, numeric, hand emojis, and different types of arrows in the table of content block.

Table of Content Layouts
Table of Content Layouts

Showing/Hiding Tags

You can choose what tags you want to show in the table of contents. You’ll have the option to show from H1 to H6. You can even remove some subheadings, i.e., showing H1, H3, and H6, and hiding others. You can even choose how you want to display the table of content block initially.

Modifying Heading

You can modify the texts, colors, borders, and other typographical settings in the table of content heading settings.

Table of Content Modifying Heading
Table of Content Modifying Heading

 Adjusting the Lists Body

PostX also allows you to change the style, colors, and various typographical settings of the lists in the table of content section.

Table of Content List Modification
Table of Content List Body Modification

Making Sticky Table of Content

You can also make the table of content sticky, by toggling the “Enable Sticky” bar. You’ll have to option to select the position for the sticky table of content.

Making Sticky Table of Content
Making Sticky Table of Content

Customizing the Collapsible

As you know, you can expand or close the table of content. You can choose the location of the collapsible button, change the open & close text to the icon, edit the open & close text, adjust colors, and other typographical settings.

Table of Content Collapsible Settings
Table of Content Collapsible Settings

You can even disable the collapsible to keep the table of content always open.

Enabling Back to Top Button

PostX table of content block also provides the back-to-top feature. When enabled, it will show a customizable button, which you can click to return to the article’s top.

TOC Back to Top Setting
TOC Back to Top Setting

And as for the customization options, you can change the icon style, colors, and other typographical settings.

That’s all for the WordPress table of content block. You can see how much customization freedom you have with the PostX table of content block. Also, the block is easy to use and customize because of its intuitiveness. 

Benefits of WordPress Table of Content

The Table of Contents (TOC) has many benefits, but let us focus on its SEO benefits. Below are the main advantages of using a WordPress table of content:

Improves user experience: A TOC allows readers to quickly jump to the section of the post that they are most interested in. This can improve the user experience and keep readers on your site longer.

Increases click-through rate: A TOC can also increase the click-through rate (CTR) of your blog posts. When readers see a well-organized TOC, they are more likely to click on the links to the different sections of the post.

Helps search engines index your content: Search engines can also use the TOC to index your content more effectively. This can help your blog posts rank higher in search results.

Makes your content more shareable: A TOC can also make your content more shareable. When readers see a well-organized TOC, they are more likely to share your blog post on social media or other websites.

Overall, using a TOC can be a great way to improve the SEO of your blog posts and make them more user-friendly.

Learn more detailed benefits of the WordPress table of content here: 6 Trending Table of Contents SEO Advantages.

Resources You’ll Love

Here are a few article you might find helpful:

Conclusion

Make your blogs or posts more reader-friendly with PostX Table of Content block. This WordPress table of content block will help users get an overview of the article/blog/post by displaying the headings and subheadings in a list. 

It is also clickable, so users can quickly jump to the section they are interested in without having to scroll through the entire post. 

This can be helpful for users who are looking for specific information or who want to scan the post for the main points quickly.

You can check out WordPress video tutorials on our YouTube Channel. Also, find us on Facebook and Twitter for regular updates!

Like this article? Spread the word

Written byRuhul

Ruhul is a technical and SEO-driven content writer, a tech enthusiast, and a pro gamer. He loves exploring new things and has written over 1,500 articles on diverse topics.

Leave a Reply