What makes visitors leave a website? Some reasons make users leave a website, or maybe they never return. One of the reasons is when a website doesn’t have helpful navigation. We must understand from the site visitors’ characteristics that they are always in a hurry. So, creating practical navigation is a must. Navigation contributes to user experience; it helps you allow users to access the information they want as quickly as possible by presenting an enjoyable, intuitive layout while increasing ease of use.
Providing a table of contents is one of the ways to make your site have helpful navigation. Creating the table of contents has two purposes for your site as below:
- It gives the users an overview of your content
- Allows users to go directly (jump) to a specific part/ section of your content
Gutenberg WordPress editor natively doesn’t have a block to create the table of contents, so you need the help of the WordPress plugin, such as Kadence Blocks, or you can also use the feature of WordPress page builders, such as Elementor. But, using creativity and some tricks, creating a table of contents in WordPress without the help of any third parties is possible.
This article will show you how to create a table of contents in WordPress without the help of any plugins.
TABLE OF CONTENTS
Steps to Create Table of Contents in WordPress (Without Plugin)
Steps 1: Add a New Content or Edit Existing Content (Page or Post)
Go to your Gutenberg WordPress editor; you can add new content or select the existing content (page/ post). In this example, we will edit our blog post.
As you can see from the GIF above, our article is quite long, but there is no table of contents in that article. What we’re going to do here is add a table of contents inside the article.
Step 2: Add a Paragraph Block and List Block
Alright, let’s start to create the table of contents. First, add a Paragraph block. We will use this block to give the title “Table of Contents.” Once you add the text, go to the block settings panel and then edit and style up the text. For your preference, you can see some changes that we applied below:
- Text: Table of Contents
- Text Style: Bold
- Text Color: Blue
- Text Size: 20 (Medium)
Next, add the List block. The List block you add depends on how many Headings you have or how many parts/sections you want to highlight.
Step 3: Add the Anchor Links
As we mentioned earlier, one of the purposes of the table of contents is to allow users to go directly (jump) to a specific part/ section of your content. To make that happen, you’ll need the help of a WordPress feature called Anchor Links.
A jump link or anchor link is a hyperlink that will jump to another section/area of the page. It could jump to the same page or another page. In this case (table of contents), we will jump the anchor link to the same page.
Go to the block that you want to jump to. Click the block settings panel. Scroll down and click the Advanced tab. On the HTML Anchor field, enter a word or two — without spaces — to make a unique web address just for this block; then, you’ll be able to link directly to this section of your page.
Next, go back to your table of contents section. Select the content that you want to create a link to, highlight the text and then click the Link (🔗) icon. Afterward, type the hashtag (#) followed by an HTML anchor you created above, and then press the Enter button on your keyboard.
That’s it. Now, the table of contents is integrated with the content. You can edit and style up your table of contents if you want to, such as typography, text and background color, etc.
Once everything is done, you can see how it’s worked by updating or publishing your page and then reviewing it on the new tab.
The Bottom Line
The blog aims to get people to visit and stay with the blog post. The table of contents can help you to reach that goal. It will keep visitors to your blog post longer; they can easily digest the content, find everything they want, jump all around, and consume your blog post in their way.
This article shows how you can easily add the table of contents through your WordPress website without the help of a plugin. We recommend adding a table of contents to your site, especially if you have a lengthy article on your blog post.
