Offering a table of contents for your longer publications is very useful for your readers, but it also helps to create rich search engine snippets, which get more clicks.
We have already seen some time ago the technique of linking to parts of an entry, and adding an automatic table of contents, but today it is time to learn how to make it even easier, and without plugins, almost without hands.
Requirements
The only requirement for this way of creating tables of contents is to have WordPress updated to some version higher than 5.0 and the block editor active, to know how to do it with the classic editor is not so simple.
How to create a table of contents
Well, nothing is easier than opening the WordPress editor to create an entry or page to which you want to add a table of contents.
You’re supposed to have enough text already to make a table of contents useful, even necessary.
Add headings to your text
Not only for readability, which i highly recommend, but it is essential that you add subheadings to your publication, known as headings in the editor.
Doing this is very easy, in the following image you have how to do it…
Of course, write your headings, with the text you want to serve as a title for the paragraph.
Add HTML anchors to each header
This step is the key, without it nothing works.
Select each heading block and, on the right, in the block settings, displays the “Advanced” section and there you will see a box to put an HTML anchor to each title.
Add whatever name you want to but remember it because we are going to need it later. We’ll use “toc-number”
Create the table of contents
Now, go to the beginning of your entry or page and add a paragraph block and then a list block, something like this:
Link the list to the HTML anchors
Now that you have created the list all that remains is to add links in each element to the HTML anchors.
Simply select each element in the list and add a link to it. The trick is that the links will be of the type # anchor , that is, adding a # symbol to the name you have given to each HTML anchor.
I’m not telling you, I’m showing you…
The final outcome
Now every time people click on any of the linked parts it will redirect them to the part of the text linked. Of course you can change the name of “Heading 1” to “First” so people know to which part they’re going by clicking on it.
Useful isn’t it? Let us know in the comments. Dew it.
Read this psot in Spanish: Cómo añadir una tabla de contenidos fácilmente sin plugins
