Having a table of contents in your WordPress post/page makes it easy to navigate and give users an option to jump to their point of interest.
It also helps you to get more clicks from Google search results as Google shows table of contents links in the SERPs.
So if you are not using the table of contents on your WordPress posts and pages, you should start using table of contents for your long contents.
Like everything, you can do it by using a WordPress plugin. You can also do it manually.
Here I’ll show you how to add table of contents in WordPress with or without a plugin.
Let’s get started.
There are several WordPress plugins that let you add table of contents to your WordPress posts/pages. Here I’ll be using Ultimate Blocks plugin. It’s a Gutenberg Blocks plugin that offers ‘Table of Contents’ block.
Whenever you insert the ‘Table of Contents’ block, it will automatically generate the table of contents from headings. Let’s see how to add a table of contents using Ultimate Blocks.
Step #1: Install Ultimate Blocks Plugin
Ultimate Blocks is a free plugin that is available on WordPress.org. You can install the plugin directly from your WordPress dashboard.
Just go to WordPress Admin Panel > Plugins > Add New and search for ‘Ultimate Blocks’. The very first result will be the Ultimate Blocks plugin. Then click on the ‘Install’ button and activate the plugin.
You can also download the plugin from here and upload it to your WordPress site.
Step #2: Insert ‘Table of Contents’ Block
Now go to the WordPress post or page where you want to add the table of contents.
Just click on the (+) sign in your Gutenberg editor and search for ‘Table of Contents’. Then click on ‘Table of Contents’
An automatically generated ToC will appear. It is entirely dynamic and updates itself with every change you make, leaving you free from the hassle of editing your ToC along the way.
Step #3: Configure Your Table of Contents
It isn’t a necessary step, but know that Ultimate Blocks gives you the flexibility of styling the ToC to suit your needs better. You may –
- Choose which headings to include or exclude.
- List the contents in one, two or three columns.
- Change the styling of the list to Bulleted, Numbered or Plain.
- Add a toggle that shows/hides the ToC.
Using a plugin is ideal if you’re looking for a more automated approach for creating a Table of Contents. However, the second approach is just as easy and does not require a plugin.
You can add a table of contents to your WordPress posts or pages without using a plugin.
In the past, knowledge of HTML was a requirement. However, with the new block editor, WordPress makes it insanely comfortable, and no technical know-how is necessary.
To create a ToC, you can utilize Anchor Links, which are sometimes called Anchor Tags or Jump Tags.
The idea is similar to a hyperlink, except when any user clicks on an Anchor link, he or she automatically navigates to a particular set part of the page. You can create a ToC using anchor links in 3 short steps:
Step #1: Make A List Of The Contents
It is the most natural step. Just examine your page and make a note of the key sections on it. Chances are you already have headings for your content.
Once done, make a list of them at the beginning of the page. It may be numbered, bulleted or plain – whatever fits best.
The entries on the list give your visitor a gist of the content, so make sure you write captivating and crisp titles and keep the naming scheme for the table and the actual headings consistent.
- Header 1: Advantages of adding Table of Contents
- Header 2: Adding a Table With a Plugin
- Header 3: Adding a Table without a Plugin
Step #2: Highlight The Contents As Header & Add HTML Anchor
See the down-right arrow in the image above. Head on over to your content, and make sure that you style the headings as headings. Make them bold for making them easy to spot.
The next step is adding an ‘anchor’. Anchors are what is used to link the title in the table to the actual heading midst content. To add an anchor:
- Highlight your heading and navigate to the ‘Block’ sidebar on the right.
- Click on advanced, and you find the ‘HTML Anchor’ box.
- Name your anchor same as your heading without spaces, to keep things consistent.
- For example, the anchor for Header 1 must be header1.
- In this manner, create anchors for all headings.
Step #3: Assign Anchors To The Table Of Contents
- Head back to the list you created in step 1.
- Highlight the first entry, click on the ‘link’ button.
- Enter the ‘#’ symbol, followed by the name of given to the anchor assigned to the first heading. Example, for “Jump to Header 1”, enter #header1.
- Repeat for each entry.
If you run a site with tens or hundreds of pages of content, it can be challenging to create a ToC for each page manually. In such a case, it is simpler to opt for the plugin as it does most of the work for you.
Using anchor tags removes the need for a plugin and keeps your page nice and lightweight. If you’re a newcomer, using anchor links is the better option, since it grants you control over your content.