How to Add a Table of Contents in Your WordPress Posts or Pages

Did you ever wonder about what makes the Wikipedia website so attractive? Besides offering free information and having tons of content, what does it make really excel comparing to other online encyclopedias? What does it make UNIQUE? Are you still struggling to answer? Let’s make it a bit easier for you. It is the navigation system of Wikipedia that allows any visitor to find what they really want to find almost instantly. This is mainly due to the table of contents (TOC for short) that the visitor sees as soon as they land on the website. “Wow! I want to have a table of contents in my posts and pages too!” you might be thinking. Well, that’s exactly what our guide will teach how to do. Enjoy your reading!

Why should I use a table of contents in my posts and pages?

Apart from being a real time-saver for your visitor, the addition of a table of contents is something that Google definitely loves. The reason behind this love is that when you create a table of contents box, you use internal linking. Internal linking is important for Google because it is proof that your content is related and well-written. Also, Google creates jump-to links for each multiple content sections when your page or post appears in the search results. What this means for your site is that the person who sees it in the search engine results will have a better idea about your content and might eventually decide to visit it. Simply put, sites containing tables of contents boxes are more powerful than those who don’t. So let’s don’t waste any more time. Let’s see how you can create a table of contents on your WordPress sites.

Table of Contents creation: The hard way – for HTML fanatics only.

What is a table of contents in its very roots? It’s basically a table containing links which point to different sections of your content. If you want to know how to create a table in WordPress, feel free to take a look at our “How to insert a table in a WordPress page or post” guide. You can find it by clicking here.
Once you’ve got the grasp of how to create tables in WordPress, it’s time to learn how to create a link to a particular section of your content (also known as bookmarks) using HTML. Bookmarks are a really useful as they allow your visitors to jump to specific parts of your content without having to scroll or read the whole of it. Believe us! They will like it, especially if your content is long.

To create a bookmark link, you have to do only two things:

  • First, you create your bookmark (Think of it as creating an anchor point to a section of your content)
  • Then, you create the link to that anchor point you’ve created in the first step

Let’s suppose we want to create a link to our previous section (Why should I use a table of contents in my posts and pages?)

To create the bookmark, we should write something similar to the following:
<h2 id=”UseTOC”> Why should I use a table of contents in my posts and pages? </h2>
Did you notice the id attribute we used? This is the way we instruct our code to refer to this particular section of our content using the UseTOC name.
To link to this section we just have to create an HTML Link.
<a href=”#UseTOC”>Visit Why to Use Table of Contents Section</a>

That’s it! You now have a link to a particular section of your content within the same page it appears on. You can use this trick to create as many bookmark links to every section of your content. When you’re done, just remember to add these links in a table to create a useful table of contents.

Table of Contents Creation using plugins: The easy way – For the sensible WordPress user

If the idea of creating HTML links and tables does not have an appeal to you, then it’s your lucky day! Many WordPress plugins can do exactly the same thing (that is to create Table of Contents boxes) in a very fast and impressively easy way. You might be thinking that we should only have written about using a plugin to create our table of contents. You are definitely right about this. Using the proper Table-of-contents-box plugin could save you from hours of work. However, we found it reasonable enough to show the hard way as well. We decided to provide a solution not only for the HTML fanatics but also for those who don’t want to use widgets and plugins to avoid the conflicts and the slowdowns that come with them.
Our favorite WordPress plugin for creating tables of contents is Table of Contents Plus. You can find this powerful and easy-to-use plugin here. What it does is to automatically create tables of contents for any section of your content that appears under <h1>, <h2>, …., and <h6> headings. Yes! You’ve read it right! Automatically! You just write your content and the only thing you have to do is to use the proper headings. Table of Contents Plus will take care of the rest!
Let’s see now how you can install and configure the plugin to create your first table of contents.
Step 1: Log in to your WordPress Dashboard.
Step 2: Navigate to the Plugins > Add New section.
Step 3: Type “Table of Contents Plus” in the search box appearing at the upper right of the screen.
Step 4: Locate the plugin, install, and activate it.
Step 5: Navigate to Settings > TOC+ to access the settings page for the plugin.
Step 6:
•    Determine where the TOC will appear inside your content, using the “Position” drop-down menu.
•    Use the “Show when” menu to define when the table of contents is generated, which means after how many headings your TOC will show.
•    Determine where your TOC will appear. Will it be on pages, on posts, or on both?

TOC+ plugin demo

Step 7: Configure the looks of your table of contents. You can define how the text of the will appear, the title and size of the TOC, and the coloring of your TOC (There are 5 ready presentation layouts to choose from, as well as a custom option which allows you to build your TOC from scratch).

TOC+ advanced options
Also feel free to play with the advanced options which allow you to customize the plugin even more. You can found them at the bottom of the settings page.
Step 8: Save your settings. Your tables of contents should appear in your posts and pages (depending on what you choose in the 6th step).

Table of Contents Plus Bonuses

The reason why we love this plugin, apart from it being free and fully customizable, is that its creators provided us with two bonuses.
Bonus No1: You can use the plugin to create sitemaps for your site. This can come in very handy as it provides easier navigation for your users, as well as for Google bots which crawl your site to find new content. You probably get our point here, don’t you?
Bonus No2: You can use the plugin to create tables of contents that appear on your sidebar(s) instead of your content. To do this, navigate to Appearance > Widgets, and just drag and drop the TOC+ widget on your preferred sidebar. You can also choose if your TOC will appear only on your sidebar or if it will continue to appear on your posts and pages.

toc3

Final Thoughts

This sums up our guide on how to create a table of contents on your WordPress site for each post or page. We’ve examined how you can do this the hard way using HTML, and the easy way using the best WordPress plugin for creating TOCs called Table of Contents Plus. Our bet is that your will love this plugin as we also did. In fact, we’ve created a table of contents for this guide using the TOC+ plugin. Take a look at it and tell us your thoughts. Thank you for reading!

How to add a table of Contents in WordPress

RATE THIS ARTICLE

Total
26
Shares

1 comment

  1. Great Article mate. I have been looking for this post for a very long time and finally found it. This is the best article I have ever read about how to add a table of content in WordPress blog posts.
    Thanks for sharing and keep sharing with us.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*