Written by Dyami Millarson

I included a table of contents in last year’s elaborate article on Wangerooge Frisian. This was the first time I ever created a table of contents for one of my blog articles. I did not install any plugin to create this table of contents.

I used my own method to create it and I will share this method with all of you today. It is a free method, but it will consume time and effort. It is, however, worth your time and effort if you are going to create an elaborate post like I did in 2021.

First, I recommend you use the WordPress block editor. After you have made sure that you are not using the classic editor of WordPress, let’s start making the table of contents.

First you create two blocks. You can simply do this by pressing enter twice. Once you have done this, select the first block by clicking with the mouse on the text area where you would normally type, click on the plus sign on the right and find Heading. Then type the following:

Table of Contents

Another option is that you simply type Table of Contents in bold letters in the first block without using Heading. Although I did it originally in this way, I am not a fan of this idea anymore because I find the letters too small and that is why I opted for using Heading.

We are now halfway there. Next you select the second block you created, you click on the plus sign on the right and you find List.

After you have followed these two steps, just write out the titles of the sections of your article in the list. I will give an example of what the structure will look like:

• Section 1
  • Subsection 1
  • Subsection 2
• Section 2
• Section 3

Now that you are done with making a basic outline of the titles of your article, do not worry too much about it because you can always still change it. However, you should now select the text of the two blocks you created, a bar should appear on your screen and when you have selected the text of both blocks, you should click on the three vertical dots on the extreme right of that bar. The vertical dots will say ‘Options’ when you move your mouse over it:

After you have done clicked on those three vertical dots, three groups of options will appear separated by a line. Look at the second group of options, you will find an option there that says Group and you should click on that option.

Having followed this instruction, the 2 blocks that you originally created will have been merged into one single block. You are now well on your way to creating a free but professional-looking table of contents. It should already look like this:

Great. It is now time to create working links to each section.

When you write the title of each section of your post, please use a separate block just like we did for the title of the table of contents. I recommend you also use Heading for each title block, but that is up to you.

Just a quick note: When I say 'title block,' I mean the block that you use for the title of a section. It is nothing complicated. 

When you created all the sections of your article, please click on the block that you use for the title of one of your sections. On the right of your editor screen in WordPress, there is a bar that says Post and Block at the top. Whilst selecting your title block, you need to click on Block and then you should find Advanced at the bottom.

When you have clicked Advanced, you will see HTML anchor. All you need to do is copy the title of your block and paste that into HTML anchor. Spaces in your title will be automatically converted to dashes when you do so. Please repeat this step for each of your titles; it is a bit tedious to create HTML anchors for each title, but we will need this for linking to those sections from the table of contents.

When you have created all the HTML anchors, you should select one of your title blocks again, then copy the HTML anchor (you know where to find it now) and then you should go to the table of contents block. Since you copied an HTML anchor that is associated with a specific title, please select the text of the matching title in the list of the table of contents block. When followed this instruction, please click on the icon for creating a link:

Once you have done so, please do not paste the HTML anchor immediately into the link url section, but first type the number sign #, because otherwise your link will not work and will show a ‘not found’ page if you click on it. I recall some instances where I have pasted my HTML anchors into the link url sections, only to realise later that I had forgotten to put the number sign up front. It saves you effort and time if you immediately to it right, so just pay attention you do not miss the #. A working url to an article section should look like this:

Please repeat the steps with the HTML anchor for each item in the list of your table of contents. When you are done, please also check whether each of your links is working. If one of them is not working, you should check two things: (1) whether you entered # at the beginning of the URL and (2) whether the HTML anchor matches exactly with the HTML anchor you created for the title block that you want to link to.

Would you like me to share more WordPress tips and tricks in the future? Please let me know in the comment section below. Additionally, if you experience trouble making your own table of contents, you may ask for help in the comment section below.

Support Our Work

If you found this article useful, we would really appreciate a donation.

Every small donation matters.

• Credit card: https://payrequest.me/dyamimillarson
• PayPal: https://paypal.me/dmillarson