Add Table Of Contents With & Without Plugin In WordPress

Listen as audio:

Want to know how to add the table of contents in WordPress?

If yes, then you are a good place because I will show you all the available methods to add the table of contents to a WordPress powered site.

A table of contents is something that you can add without needing a plugin and tons of plugins are also available in the directory of WordPress plugins. It’s up to you which you prefer.

But you might be thinking why it is even important?

According to Backlinko, having a TOC gives a small edge of benefits in ranking compare to pages without TOC added.

After reading this post, you will learn:

  • Adding a table of contents in WordPress with a plugin
  • Adding a WordPress table of contents without plugin
  • Adding a WordPress table of contents in sidebar
  • Addng a sticky sidebar table contents in WordPress

But before we dive into the steps of adding a TOC without a plugin, here are some benefits of having a TOC on a website.

Benefits Of Table Of Contents

TOC plays a very important role in a website layout for users as well as SEO point of view. You can not avoid it just because it sounds too normal thing.

It’s quite to add and a set and forget method forever if you prefer adding TOC with a plugin in WordPress.

Helps in providing better user experience

TOC helps in providing a better user experience as it allows users to know what is included on the page and give the option to skip any part and jump to their favourite section of the page.

It becomes more important on blogs where long-form content is published, it allows readers to skip the sections and jump to any section of post they want to read.

When talking about user experience which Google deeply cares about, you may get little advantage in rankings if you provide a good user experience.

TOC helps in getting sitelinks links

sitelinks because of TOC

TOC can help you to get the page links for your page in search engine results, as you can see in the above image. I got some page links just because my article is having the table of contents.

Page links can bring more clicks compared to pages without page links in the Google search results pages.

Isn’t it amazing? One little table can help you to bring more traffic from SERPs.

Along with the above-mentioned benefits, here are some others as well:

  • Improve click-through-rate from search
  • Make easy to share specific sections with others
  • Helps you to keep your content well-structured and well-formatted
  • Provide better navigation to readers

How To Add Table Of Contents Using Plugins In WordPress?

There are tons of plugins available that can help you to add the TOC in WordPress. Here are some of them to name a few:

All the plugins work best in their job to add a table of contents in WordPress without giving you the trouble. They will automatically add the table of contents once you install and activate any of the above-mentioned TOC plugins.

I personally use and recommend the Easy Table of Contents for adding TOC in WordPress. Let’s see how you can install and setup it for a TOC in WordPress.

Add a table of contents using the Easy Table Of Contents plugin

First of all, you need to install the Easy Table Of Contents plugin by going to Plugins>Add New from your WordPress dashboard.

Search for Easy Table Of Contents from the search box available on the right side.

search easy table of contents plugin

After the search, you will see the plugin appearing on the screen. Now click on the Install button and then Activate it to make it easy on your site.

install the plugin

Once you installed and activated the plugin on your WordPress site, you’re good to go!

Now go to Settings>Easy Table of Contents to set up the plugin.

First select where you need to add the TOC, normally its posts and pages. So tick according to your choice. If you only want TOC to show on posts then tick the post checkbox only.

settings

The plugin will automatically add the TOC box on all your existing and future posts or pages. You just need to select post types where you want the TOC added.

auto insert

Just below the auto inserts section, there are some settings that you need to make as your preference.

important settings

Position: Choose where you want the TOC to show, Before first heading, after first heading, top or bottom. I recommend choosing the before first heading which is the default.

Show when: Choose the number of headings a post or page should have to add TOC.

Display Header Label: Choose whether to show header text above the TOC or not.

Header Label: You can edit the header label text from here.

Toggle View: Check this option if you want to allow the users to toggle the visibility of the TOC box.

Initial View: If you initially want to hide the table of contents on a page or post then check this box.

Show as Hierarchy: Check this if you want TOC to show as Hierarchy.

Counter: Choose the list type.

Smooth Scroll: I recommend ticking this option as it will provide a better user experience.

After these settings, you will see some appearance settings where you can change the colours and layout of your table of contents box.

Show as Hierarchy

You will find some important options in this section such as width control, floating options, typography settings etc.

You can also have the custom theme for your TOC box, give the TOC your own colours to match with your brand.

At the bottom, there are some advanced settings that are very important. All the options are already set as default to give you a normal TOC but you can always change them as per your preference and requirements.

You can choose what headings tags to allow in the TOC box, you can exclude any type of headings, also whether to show the TOC on the homepage or not and some other settings that you can check out.

Once you are done with all the changes on the settings page, hit the Save changes button to make the changes live on your site.

Now go to your site and open a post to see how your table of contents box is showing.

Add Table Of Contents In Sidebar

What if you don’t want to show the TOC on pages/posts, rather on the sidebar? Don’t worry, it is not difficult to do with WordPress.

Just go back again in Settings>Table of contents and untick post style in the Auto Insert section. This will prevent TOC to be added automatically.

Now go to Appearance>Widget in your WordPress dashboard to add the Table of Contents in the sidebar.

Click on + to add a new widget and then search the Table of Contents widget to add in the sidebar.

Table of contents in sidebar

That’s it! It is done in no time, your TOC is added in the sidebar of your WordPress site.

How to add a sticky WordPress table of contents in the sidebar?

If you want to add a sticky WordPress table of contents to your site then first follow the above section to add the TOC in the sidebar.

Now go to Plugins>Add New and search for the “Q2W3 Fixed Widget for WordPress” or any similar plugin. Install and activate it on your website.

Once the plugin is live on your site, go to Appearance>Widgets and click on the Table of Contents widget you added.

Inside the TOC Widget container, you can find a Fixed widget checkbox, tick and your TOC in the sidebar will be sticky.

Don’t forget to click on Update on the right top corner.

How To Add WordPress Table Of Contents Without Plugin?

Instead of making your website havier with tons of plugins for each and every single task, you should avoid depending on the plugins as much as you can. At least for purposes that can be achieved without the need for a plugin.

That’s why I am showing you how to add a WordPress table of contents without plugins…

When you are writing your post in WordPress Gutenberg editor, click on your heading and then Advanced on the right side menus.

toc without plugin

Inside the advanced tab, you can see a field named HTML anchor. Add your anchor in the field, it can be anything like your heading, heading-1 or heading-one etc.

html anchor

Repeat the same steps for the headings available in your post one by one. But make sure each heading should have a different anchor than others.

Once done, create a table of the contents section using the Gutenberg list block before the first heading in your post. Something like the below image:

table of contents with plugin in wordpress

Select the first heading and add a link as you do normally in Gutenberg editor. You can also use Ctrl+K after selecting the text.

Enter the HTML anchor you added for that particular heading, do the same for all the list items.

toc

That’s it! Now check your Table of Contents in the preview mode.

I have shared all the methods you can use to add a table of contents to the WordPress site, you can use plugins to make it an automated task or add without plugins to avoid adding another plugin in your site that may make your site heavy. It’s completely up to you!

Leave a Comment

Share via
Copy link
Powered by Social Snap