Writing long articles creates value but also lots of text for our readers to navigate. Using a Table of content (TOC) feature will improve the user experience and the overall readability of our content.
Simply put a TOC can help you organize your content for the user very much like you would use categories, tags or content silos for users and search engines.
You want it to be easy to understand and consume your content.
Here we will look at 3 ways to add Table of contents to our content
- Manually coding
- Using the Table of Contents Plus plugin
- Using the Ultimate Addons for Gutenberg
If I had to choose one method I would use the Ultimate Addons for Gutenberg plugin. But I do not use it on all my website projects.
As you read on you will see that each method has pros and cons. For the impatient reader I will summarize my findings here:
| Manually coding | Only makes sense if you are dead set against using any plugins. |
| Table of Content Plus | Full of features and will allow you to place the TOC in sidebars using the TOC+ widget |
| Ultimate Addons for Gutenberg | Adds many features alongside TOC but does require a block editor. Also, there is no easy way to place the TOC in sidebar areas. |
Now, let’s look at each method and find out if, when and why they should be considered.
Manually coding Table of Contents
I have worked with web development and coding for a long time. To give you an idea I was coding when Altavista was bigger than Google, dial up Internet was the norm and before Compuserve was acquired by Aol.
Anyway, my point is that I enjoy coding as it gives me control. And I like to understand what happens in the code.
Still, I do not code my own TOC on my web projects.
I would consider creating TOC manually for content that will never change or for projects where I am limited to the number of plugins I can use.
Conclusion: I see few scenarios where it makes sense to code your own Table of Contents manually.
Using the Table of Contents Plus plugin
I have tested several different TOC plugins. But when it comes to pure TOC options I like the Table of Contents Plus plugin best.
And to be honest I might have used it for all my projects had it not been for the fact that it is a plugin that only does one thing.
Now, plugins that only do one thing may be necessary. However, if better options are available I believe we should opt for alternatives that serve more than one purpose.
The main reason I use TOC+ is that it is feature rich. And it let’s me place the Table of Contents in the sidebar area. That is a big advantage depending on your website layout and design.
Installing Table of Contents Plus
Installing the plugin is as easy as going to the WordPress Dashboard and selecting Plugins > Add New. Now search for Table of Contents Plus. Locate the plugin and click Install Now followed by Activate.
Now if you check the plugin will be listed under Plugins > Installed Plugins.
To set it up we simply click Settings and follow the instructions.
Add or Disable Table of Contents on one post or page
We use shortcodes to Add or Not display the Table of Contents on any given page or post.
Shortcodes are simply snippets of text or code that is read and interpreted for us. Shortcodes are written inside angle brackets like this: [value]. We enter the entire shortcode including the angle brackets when we use shortcodes.
Table of Contents Plus provides us with the following shortcodes.
- To generates the Table of Contents in the place you have positioned the shortcode we use the following.
[toc] 2. The shortcode below allows you to disable the Table of Contents for the current post or page.
[no_toc]Add to all posts or pages automatically
There are simple to use settings to add Table of Contents to all pages or posts automatically.
Go to the WordPress Dashboard and select Settings > TOC+
Here you can choose where you want the TOC to appear on the page and also the number of headings that need to exist for the TOC to be generated. After all, it will look strange with a TOC with only 2 headings.
You also choose for which types of content (posts, pages, etc.) you want to auto-insert the TOC.
Exclude heading from the Table of Contents
Every now and then I find that I need to exclude a heading from the auto-generated Table of Contents.
Let me give you an example. I use a design element on one of my web projects. I have a text box titled “Pro tip” where the text “Pro tip” is formatted as a heading element (H3). Now, this title would be listed in the Table of Contents unless I excluded it.
To exclude or ignore certain headings we select Settings > TOC+ and then scroll down and click on Advanced. The Exclude headings section allows us to specify the heading we want to exclude.
Place Table of Contents in sidebar
It is very easy to position the Table of Contents Plus in the sidebar. And this is one of my favorite features.
When you installed the Table of Contents Plus plugin you also automatically installed the TOC+ widget.
And to place TOC in the sidebar we simply go to the WordPress Dashboard and select Appearance > Widgets.
Now we drag the TOC+ widget to the sidebar of our choice – usually Right or Left Sidebar.
I always select “Show the table of contents only in the sidebar” to avoid cluttering the page.
Conclusion: Table of Contents Plus is one of my favorites and offers all the features I need. Also a big plus that the plugin supports placing the TOC+ widget in the sidebar of my web pages.
Using the Ultimate Addons for Gutenberg
For me the Ultimate Addons for Gutenberg (UAG) is almost perfect.
And the main selling point is that I get a plugin with a perfect Table of Contents feature and so much more.
UAG includes creative Gutenberg blocks to easily customize and drag and drop into your pages. I will limit the list to five examples but feel free to check it out here
- Info box
- Multi Buttons
- Price List
- FAQ Schema and
- Content timeline
And this is truly a great thing as it adds features and flexibility with a minimum impact on performance.
There is only one feature that I miss. I would like to have the option to put the UAG generated Table of Contents in the sidebar of my web pages.
And yes, I realise that there are workarounds where you can copy and paste code and create custom widgets. Not user friendly enough for me.
Installing the Ultimate Addons for Gutenberg
To install we go to the WordPress Dashboard and select Plugins > Add New. Now search for Ultimate Addons for Gutenberg. Locate the plugin and click Install Now followed by Activate.
When the plugin is installed it is available for us to use when we create new or edit posts and pages on our website.
Using the Ultimate Addons for Gutenberg plugin
When we are in the block editor we simply click Add block to get a list of available blocks and features.
The Table of Content block is located towards the end of the available blocks.
To add the Table of Content feature we simply click on the block named “Table of Contents”.
The block is now added to the current page or post at the desired position.
When we first add the block it is added using the default settings.
Next we move on to design the Table of Contents block and add the functions we need.
Configuring the UAG Table of Contents block
When we have added the TOC block to our page we can control the look and functionality via the page editor.
There are 5 sections that pretty much cover all we need.
I will explain a few of the main points below.
But as the feature is available in the page editor I suggest the following.
Make a change, look at the result and then evaluate. And just keep moving forward until you get the look and functionality you are looking for. It is actually quite fun and very intuitive.
Under the heading General you choose the headings you want your Table of Contents to use.
I tend to leave Scroll as it is by default.
Content is where I decide if I want the Table of Contents to be Collapsible or not. I can also choose for the TOC to be collapsed by default.
Style is where you can work with layout and add more space between headings and such. If you get a “Clickable elements too close together” error in the Google Search Console this section will help you space out the text.
Finally, I have never felt the need to use the Advanced section for external CSS styling.
Conclusion: I like the Ultimate Addons for Gutenberg plugin as it gives me a great Table of Contents feature and so much more. If there was a feature to add TOC to the sidebar area I would use it for all my projects.
