Add A Table Of Contents To

In my post, I show you how to create a table of contents in WordPress without a plugin, step by step.

A table of contents helps your visitor find the information they need quickly. The internal links jump to the part of your post your visitor wants to read.

Here is an example of a table of contents on my website. It is simple to create. You don’t need a plugin or have to input any code.

When visitors click on a link on your table of contents, they jump to that heading.

table of contents example

Let us begin.

Step One – Complete Your Blog Post

I recommend you write your blog post before adding your table of contents.

Here is a post on another website I own. I want to put a table of contents above the first sub-heading.

Example blog post

Step Two – Create A Heading Block

Create a header block on your blog post. I use the ‘/’ shortcut. When you type ‘/’ and letters of the block you need, WordPress offers a menu of available blocks.

Header block

Change the header level and type ‘Table Of Contents’.

Heading

Step Three – Create A List Block

Next, create a list block.

List block

Now you can start adding links to post sub-headings.

Step Four – Type Your First Sub-Heading

The ‘List’ block has links to your sub-headings in your post. Write your sub-headings into your list block first.

The top heading for this post is ‘When is Chateau De Loei open?‘.

First heading

Step Five – Create A Destination Anchor

We want the table of contents to link to all sub-headings. To create a destination anchor, click on the sub-heading and open the advanced tab on the right.

Advanced tab

Step Six – Add Text To HTML Anchor Data Field

In the ‘HTML Anchor’ data field, write one or two words. Ensure you use a ‘-‘ between words.

For my destination anchor, I used ‘chateau-open’.

HTML anchor

Step Seven – Add Links To Your Table Of Contents

Copy the text in the HTML anchor data field and return to your table of contents.

Highlight the sub-heading in your list block and select the link icon.

Create link

In the link box, type ‘#’ followed by the text in the HTML anchor data field. Type ‘#’ first, or your link won’t work.

link text

To create a link, select the submit icon.

Submit

Now you have a clickable link from your table of contents to your first header. The text in the table of contents changes colour to show it is now a link.

Clickable link

Step Eight – Complete Table Of Contents

Complete your table of contents by adding your sub-headings to the list block.

Sub-headings

Add text to the HTML anchor field.

HTML anchor

Then copy the text from the HTML anchor data field. Highlight the heading in your table of contents.

Highlight text

Click on the link icon, type ‘#’ followed by the text you copied from the HTML anchor field.

Paste text

Select submit to create the clickable link.

Submit

The heading text changes colour to show it is now a clickable link.

Clickable link

Continue this process until you have all your sub-headings in your table of contents.

Step Nine – Publish And Test

I recommend you test your table of contents links to ensure they work. When you create a table of contents without a plugin, you could make mistakes.

Test your links before your visitors read your post. You don’t want your visitors to have a poor user experience with broken links.

Test links

How To Add A Table Of Contents Video Tutorial

Conclusion

You do not need a plugin to create a table of contents for your blog.

Complete your blog post and create a table of contents using a list block.

Type your sub-heading into your list. Next, click on each of your post’s sub-headings and add text to the HTML anchor data field under the advanced tab on the right.

To make clickable links, return to your list block and highlight each sub-heading. From the toolbar, select the link icon. Type ‘#’ followed by the HTML anchor text, then click ‘Submit’.

Once completed, I recommend publishing your posts and checking your links. It is easy to make a mistake. You want to find broken links before your visitors.

When I started blogging, I created a table of contents without a plugin. Now I use the Kadence table of contents block. Check out my ‘Easy Way To Create A Table Of Contents‘ post to learn more.

Before you return to your blog to add a table of content to your posts, may I ask for one minute of your time to leave a comment? I love reading comments from visitors to my site. I appreciate any feedback you have about my content.

For WordPress tutorial videos, please check out my YouTube channel. I look forward to seeing you again soon.

Similar Posts

28 Comments

    1. I have read how to create table of contents on other sites but I couldn’t understand. You have explained this method clearly here , and now I can follow your guideline and apply on my blog. Thanks

      1. Hello, Beatrice. Thank you for taking the time to leave a comment. I’m glad you found my post helpful. Good luck with your blog.

  1. I like to read well-written articles. It looks like you spent a lot of time and effort on your blog. I learned a lot from your article and I have already bookmarked and am waiting to read a new article. keep up the good work!

  2. So I went through and created all these links to headings on my page, but when I click on the link, it brings me to just below the heading. I want it to bring me to the heading so the heading is visible. Is that possible?

    1. Hello Erin, thank you for your comment. On my website, the links go to the heading. Are you using the latest version of WordPress.org?

  3. Thank you! This was exactly what I needed. You made it easy to understand, even for someone new to WordPress.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.