How to create a table of contents in WordPress?

A table of contents or contents list can be very useful to your website visitors. Similar to a sitemap, table of contents can make navigation simple for your site users. A sitemap is simply a site-level table of contents. If your website is powered by WordPress, you can create a table of contents in two major ways: you can do it manually or use a plugin.

Table of contents creation – automatic vs manual

WordPress plugins make the table of contents creation process quick, easy, and highly accurate. The manual creation of table of contents in WordPress can be very time-consuming especially for big websites with a lot of content. You can choose to create table of contents manually for small websites,when you only need them in a few pages or you can’t find the ideal plugin to meet your specific needs or requirements..

Method 1. How to create a table of contents with WordPress plugins?

Depending on the WordPress theme or plugins you’re using, you may already have the plugin with the inbuilt functionality to make table of contents.

Log into the WordPress dashboard, go to create a new post, then add a block, search for table of contents or browse all the blocks see if you can find it.

Getwid plugin for WordPress is a collection of 40+ free Gutenberg blocks that greatly extends the library of existing core WordPress blocks and 35+ unique pre-made block templates for the Block Editor. It has the Table of Contents block which can help us create a table of contents with quick links to any part of a page where headings are used. The table of contents is based on your page headings (H2, H3, H4, etc.) Both ordered and unordered lists are available.

Getwid Gutenberg blocks

To add a table of contents to your WordPress post or page, all you have to do is open the WordPress content editor, then click the Add block button, search to browse to find Table of Contents.

add getwid table of contents block to wordpress

Select the Table of Contents block, the plugin will automatically create a table of contents block with all your subheadings and clickable URLs.

edit getwid table of contents block in wordpress

You can then go to customize the table of contents. For example, you can include or exclude H1, H2, H3, H4, H5, H6; you can choose the default list style to None, Unordered or Ordered. You can even add additional CSS to the block.

Method 2. How to manually create a table of contents in WordPress?

There are three steps to create table of contents manually. First of all, go to add anchor tags to the headings of different sections of the page, then create a list with all headings, finally link the list items to those anchors.

Step 1: Create HTML Anchors

The first step is to create HTML anchors. In the WordPress content editor, click on any subheading, then go to the Block settings in the right sidebar, scroll down to the Advanced section, enter an anchor( a word or two or more words without spaces between them, you can use dashes or underscores to separate the words instead) in the HTML anchor box.

create HTML anchors in WordPress content editor

Step 2: Create a Table of Contents

You can add a list block with all your subheadings. This will serve as your table of contents.

Step 3. Create hyperlinks

Now we need to turn those list items in the table of contents into clickable links and link them to those anchor tags we have created above.

Double click to select all text in a list item, and click on the Link icon in the toolbar. A dialog pops up where you can type in the URL. Type a hashtag (#), then the anchor tag or name, such as #your-anchor-tag, just as an example, finally click on the Enter icon or press Enter on your keyboard to turn the list item into a link. Repeat the steps to link the rest items in the table of contents to the anchor tags.

Leave a Reply