If you create long form content with multiple headings, you should consider adding a Table of Contents (ToC) in WordPress to improve the user experience. Also, a table of contents can even help to display your sitelinks on search results.
In this post, I will reveal an easy method to add table of contents in WordPress posts and pages without using a plugin. I will also share some useful Table of Content plugins if you prefer to use a plugin for this.
Why should you use a table of contents in WordPress?
Before we jump into the nitty-gritty of adding a table of contents (ToC) in WordPress, let us quickly understand the benefits of inserting a navigation summary for your users.
- A ToC helps readers to quickly find the content they want
Most readers are in a hurry. You might have a written long guide bursting with wisdom, but not many have the time or patience to read through every line. They want to see the meat of your post to fulfill their information need quickly.
A ToC contains the main headings and sub-headings on your page. Using these, the reader can quickly jump to the section that is of interest to him without wading through hundreds of words obstructing his path.
- A ToC helps to feature your page links in search results
If you make your readers life easier by improving the user experience (UX), Google will make yours too by featuring your sitelinks below your search results.
Look at the image below.
I searched for the query “how to do keyword research,” and in one of the results, Google is highlighting the jump links that are part of the Table of Contents on the page.
So, the searcher can jump to the keyword research part directly from the search page itself, thus saving him precious time.
Now that you have seen the advantages of using a table of contents, let us get started with adding a ToC to your posts and pages in WordPress.
How to add a Table of Contents in WordPress without a plugin
Step 1: First complete your draft
Adding a ToC in WordPress comes later. First, you should write your draft normally as you always do, complete with the headings and sub-headings.
Step 2: Add HTML anchor to the headings
Now you should add HTML anchors to all the headings that you wish to include in your ToC. For this select a heading block and click on the Advanced settings.
The anchor text will be turned into jump links in the table of contents. Limit the anchor to one or two words max and separate two words with a hyphen.
Repeat this process for all headings that you wish to include in your ToC.
Step 3: Create the Table of Contents
After adding the HTML anchors, it’s time to create the ToC. For this, you need to decide where to place the table of contents. I suggest you add it just before your first heading on the page, right after the introduction. This is what I have done in this post.
Now write the text of the headings you plan to add to your table of contents. You can create a bulleted or numbered list for the ToC headings. Each list point should correspond to the heading that you wish to include in your ToC.
Step 4: Add links to the Table of Contents
Now create jump links by inserting the anchor HTML to each ToC heading. First, select the complete text and then click on the link button. After this, write # (hash) followed by the anchor text that you entered for each heading in step 2, and click enter.
Do this for all anchor text. Your ToC is now ready.
If you want, you can style your ToC by changing its background color, text color, etc. If you have a ToC title as I have added, then you should group the title block and the ToC block and then style this grouped block.
Add Table of Contents using a plugin
Above, I have described how to add a ToC using the block editor. But what if you use the classic editor and still want to generate a table of content?
It’s quite easy to achieve this using a plugin. You can use either the Table of Contents Plus plugin or the Easy Table of Contents plugin to add a ToC to your WordPress posts and pages.
Using these plugins, you can add a table of contents to every WordPress post automatically. I prefer the ToC+ plugin since it can create numbered headings and sub-headings.
The third option is to use a Gutenberg blocks plugin that comes with in-built ToC functionality.
A Gutenberg blocks plugin dispenses with the need to add a separate plugin for adding ToC to your posts and pages.
My favorite Gutenberg blocks plugin is Ultimate Addons for Gutenberg since it offers several options to customize your table of contents.
Some of the notable features of the ToC block in this plugin include:
- Select the heading level from H1 to H6 to include in your table of contents
- Add a scroll effect to the ToC jump links
- Make the ToC collapsible
- Change the background color, heading color and content color in the ToC
- Divide the ToC into multiple columns and customize the column width
Adding a table of contents in WordPress has multiple benefits and is quite easy to achieve either with or without using a plugin. If you found this guide easy to follow, let me know in the comments below.
Download the WordPress SEO eBook
Go from WordPress SEO Zero to Hero in no time. Also receive 2 Bonus PDFs with this free eBook.
Give it a try. You will thank yourself later.
16 thoughts on “Easily Add Table of Contents With and Without Plugin in WordPress”
Thanks a ton – adding TOC without plug in super useful and easy!
I am glad you found this guide easy to follow.
Thanks a lot!! Complete and really easy.
Thanks alot mate for this extensive post. You made it lot easy for me to choose the best plugin for TOC.
Love you content. Best of luck.
I am glad I could help you to choose the right plugin for your needs.
Thank you for this tutorial. The process is simple but the instructions on most blogs are confusing. I love that you used gif for your demonstration.
I am happy to help you out. I used the GIF to makes things easier to understand.
Thanks for the information
Thank You Trishna Sir!!
hi . thanks for article .
Do you have a method for a classic editor using php commands?
I don’t think you need PHP to add a ToC in the classic editor. Try using a custom class for the headings and then linking to the headings in the ToC by referencing the headings. Should work.
Thank you, Useful article and I try my site this method. Thank you 😊
Glad it worked out for you!
It is great to find such cool information. Very easily explained. I applied a table of contents to my site with this easy technique where changing text colors and backgrounds makes it astonishing. Thanks for providing this.