Last updated - May 9, 2022
According to an interesting study, an average reader can spend around 35 to 40 seconds going through a blog post.
Unfortunately, that’s very low compared to the standards in place for Google,
where they recommend your users to spend around 2-3 minutes per blog post.
So, where’s the issue?
Well, it’s clear that you are unable to grab the attention of your users completely. Maybe they are facing difficulties finding what they want. Their frustration leads them to go someplace else.
A proper WordPress table of contents block can help you out here.
You see, the purpose of having a WordPress table of contents is to help the reader navigate through the content, taking them to the solution/piece of information they desire.
Today, we will show you how to create an effective table of contents for your blog posts. Also, by the very end, we will share some important answers and tips that can make your posts more valuable – a benefit for both the site owners and readers.
Enough talk, let’s get started!
How to Create a Table of Contents section in WordPress?
Before we get into the process of creating a table of contents section in WordPress, here are some essential points as to why you need a WordPress table of contents for your posts?
Why Add WordPress Table of Contents to your Posts?
Here are some prime reasons for using a table to showcase the different parts of the contents of your post.
Helpful for SEO
Remember what Google thinks? It thinks if a reader spends around 2-3 minutes in a blog post, it’s offering some real solution(s) to a problem. Naturally, this implies that Google will show the post(s) higher on the search engine results page.
That’s a definite benefit if you’re working to improve your WordPress posts’ optimization for Search Engines.
In short, having a clean and clear table of contents in WordPress posts helps with SEO efforts. Your posts will show up higher in SERPs if you can provide the ‘right’ value.
Note: If you have a proper table of contents in a blog post, chances are it may appear as a featured snippet on the search engine results page.
Often times web crawlers look for answers on a specific topic. So, if you have a clear table of contents block that explains the answer to a problem, your answer may appear as a snippet.
Easy Navigation
One of the best ways to showcase your content to the world is by offering proper navigation to move through each section of the content.
This is what allows the user to effectively crawl through the content and look for the solution(s) they want. Maybe the reader just wants to go through a particular section of the content.
Or maybe they are looking for something even more specific, a specific piece of data/information.
If there’s a table of contents block, it’s a clear roadmap of your entire content. So, users can navigate to the parts of your content where they think the solution is – it’s something that works as a helping hand for the users when they are looking for particular solutions.
Note: In many cases, this can help with the bounce rate [where the user moves from your content to another site without surfing through your content further]. According to experts, if you have a bounce rate somewhere between 50-70%, you may need to reconsider your strategy.
Quick Access to Solutions
When you have clear content with pinpoint navigation in place, users can quickly access what they want. Finding the solution to a particular issue becomes easier for the end-user, allowing for better engagement.
These are some of the key benefits of having a table of contents block. And all these key benefits, combined together, offer a wholesome experience to the reader, allowing them to be more immersed in your beautifully crafted content.
You now know the benefits of a proper table of contents block for your contents. Now, let’s go ahead and show you how easy it is to build a table of contents block for your content.
Adding a Table of Contents Block Manually
You can add the table of contents manually to your WordPress website. But you will need to write some code if you want to add a WordPress table of contents in your post manually.
You will need to use the following bit of code to add a custom table of contents to any of your posts. Please take note that you may need to change the content manually for each post.
Here’s the code for a custom table of contents block:
<h3 class="toc">Table of Contents</h3>
<br>
<h4>
<ol style="color:#545454">
<li rel ="noopener" target = "blank" href ="#" style="text-align:left;">What is Lorem Ipsum?</li>
<li rel ="noopener" target = "blank" href ="#" style="text-align:left;">Why do we use it?</li>
<li rel ="noopener" target = "blank" href ="#" style="text-align:left;">Where does it come from?</li>
<li rel ="noopener" target = "blank" href ="#" style="text-align:left;">Where can I get some?</li>
</ol>
</h4>
Remember, this table of contents block is custom; it’s based on our needs. So, you will have to manipulate the code to your needs as well.
You will need to use the custom HTML block from the WordPress blocks library. Once you add the block to your post, you need to paste the above-mentioned code bit and save the changes.
You can also see the preview from the HTML block itself.
Major Drawbacks for a Manual Table of Contents Block
You will face the following difficulties in creating and using the table of contents manually.
The first drawback is the fact that you need to have some knowledge about using HTML and CSS. These two are the basic languages of the web.
If you’re not familiar with these two, then chances are you won’t be able to correctly implement the table of contents for your blog posts.
Second, you will need to customize the table of contents for each post separately. So, you won’t be able to quickly create content of tables for your posts easily. In short, it will affect your overall workflow.
How to Add WordPress Table of Contents Block Effectively
We will be using the PostX plugin to create a table of contents block for your blog post.
PostX isn’t just a WordPress plugin to create a table of contents block. As a matter of fact, it’s a full-fledged option to create news-magazine, kitchen-recipe, travel, fashion blogs, personal portfolios, and more.
The ready-made templates and starter packs allow users to create websites quickly and easily.
And the best part is, you won’t have to work with any sort of code. All you have to do is add the block to your post(s). The intuitive settings will take over and add the contents block to your blog post.
So that’s about PostX. Now, here’s a step-by-step guide to creating and using the table of contents block effectively.
Step 1: Turn on the ‘table of contents’ addon
Before you even turn on the ‘Table of Contents’ addon, you will need to install the PostX plugin. Installing it is super simple:
- Go to the Plugins section from your WordPress dashboard.
- Write ‘PostX’ in the search box to the right.
- Once done, you’ll see the PostX plugin pop up.
- Install and activate the plugin.
Note: Once you’ve activated the plugin, you can choose to use the free version. You can use some of the functionalities of the table of contents.
Once activated, you’ll see the PostX plugin on your WordPress website dashboard. From here, you need to access the ‘addons’ section. Once there, you’ll see the table of contents addon. Toggle it on.
Step 2: Add the table of contents block to your post
You will now be able to add a table of contents block to your post. All you have to do is go to the blocks library and search for the table of contents block. Click on it and the table of contents block will be added to the post.
Note: The table of contents block comes with various layouts and ready-made design variations. You can import these designs and layouts with just one click.
Now that you’ve added a WordPress table of contents block, you may want to add some design flair to it. Here’s how to do it.
Step 3: Add styling to your WordPress table of contents block
Initially, your table of contents block may not look super appealing. So, in order to add some design flair, you’ll need to go to the setting tab.
In the setting tab, you can enable/disable headings and other settings from the very first tab.
You can choose to keep the heading tabs you want and eliminate the others. Also, you can enable/disable the collapsible or ‘back to top’ functionalities as well.
Note: Each of the toggles has its own properties. For instance, if you turn on the ‘collapsible’ toggle. You can choose the button position, type, and other design properties associated with it. The same is true from the ‘initial collapsible’ setting and the “back to top” functionality.
Design Properties
Each set has its own design properties. For example, inside the heading settings, you can change the color, typography, and other design properties.
Also, inside the ‘list body’ setting, you can add hover animations, make the table to be sticky, and more.
Among the important options, the table width, list gap, and y-spacing are very important. These settings can give your table a more prominent look.
If you want to add more customization to your design, you can play with the advanced settings as well.
In the advanced settings, other than some regular design settings, you can easily take advantage of the responsive settings-enabling and disabling the table block in whichever device you want.
And there’s also the option to change the custom CSS, add additional CSS classes, and more.
Publish the post
You are now ready to publish the post. You can check the preview as to how the table of content looks. Then, all there is left to do is publish the blog post.
Common FAQ regarding the PostX WordPress Table of Contents Functionality
Here are answers to some common questions you may have regarding the table of contents in WordPress posts.
Should I create a table of contents manually?
You are welcome to create a table of contents for each of your blog posts if you have a clear idea of working with HTML and CSS. You will need some form of understanding of these markup languages of course.
So, the easier option is to go with a plugin that has all the tools for creating the table of contents with ease for each of your blog posts.
How does the WordPress table of contents help with SEO?
Google’s algorithms are always on the lookout for providing their customers with the best possible experience. Adding a table of contents block can help your users track the right solution.
Google may see this as a positive signal and offer your posts higher positions on SERPs. And that, in turn, will boost your site’s overall rankings.
What is the best content table format for posts?
There’s no ‘best’ format when it comes to a table of contents block for a post. But you need to make sure that all the information is in the correct form so that users can understand the intention of each heading properly.
Also, make sure to keep all the important headings. The PostX table of contents block has this option where the user can choose which headings to keep. You can choose to keep the ones that fit your needs and remove the rest.
What is a ‘Collapsible’ table of contents?
The items of a collapsible table can be hidden using the ‘collapse’ button at the side of the table.
The PostX plugin has this option where the users can make their tables collapsible by using the ‘collapsible’ toggle from the table of contents block menu.
There’s also the option to make the table ‘initially’ collapsible. There’s a toggle for that as well in the PostX plugin.
When is the “back to top” functionality is useful?
The “back to top” functionality is particularly useful when you have a long piece of content. If there is a back-to-top functionality, users can get back to the top of the content just by clicking the “back to top” button.
Can you add a table of contents to your posts using Gutenberg blocks?
Yes, you can create a manual table of contents using Gutenberg blocks. You can add specific internal anchors internally to create a table of contents for your posts.
Here’s the process:
- Create an HTML anchor for specific headings in your post.
- Now Add a list of headings where you want the table of contents to be.
- For each heading, add the specific ‘anchor’.
Once you do this, your posts will have a working table of contents. If you click on one of the items in the table, it will take you to that specific topic. There you can find the answer to your question.
However, (you can probably tell) options for customizations are very limited. So, using a highly effective WordPress plugin may be the best option for novices (even intermediate users).
Final Thoughts
Congratulations for making it this far. Hopefully, you have gained some useful insights from this post regarding the WordPress table of contents.
Make sure to use an easily customizable table of contents for each of your posts. It can offer a substantial boost to your blogging efforts and may bring you to the top of the SERPs in the future.
As a blog owner, it should be your ultimate goal, right?
