The trend towards longer web articles to ensure they cover a subject thoroughly introduces a navigation problem. How does the reader find everything? Easy, just insert a table of contents.
A long web article may consist of several sections with headings and subheadings and it could be 2,000 or more words long. This presents a problem to readers who want to quickly access information. How do they find it? By including a table of contents right at the start of an article, the reader can jump straight to the section they are interested in.
C O N T E N T S
1 Name locations within a web page
2 Create a table of contents
3 How in-page links work
4 Use a Table of Contents plugin
5 Link to a section in another web page
A table of contents is basically just a list of links to other parts of the same web page. Links can take people to chapters, parts, sections, intro, body, conclusion, images, and more. Whatever people might want to jump to.
There are two ways to create a table of contents and it can be done manually by yourself or a plugin can create it automatically. The method you use it up to you, but avoiding plugins where possible usually enables more speed and greater security. Adding a ToC (table of contents) manually to a web post is not difficult when you know how.
Name locations within a web page
A long web page may have sections, chapters, parts, intro, body, conclusion, and so on, but how do you link to these, such as when you want to create a table of contents?
First, you must name the locations or parts of the web page that you want to link to.
To do this you give location a unique name. For example, section1, chapter2, conclusion and so on. Any text will do, including numbers, but it must not include spaces, so use part2 or part-2 and not part 2.
Suppose you want to link to a section of a web page, such as a heading. It must be named. Select the heading block in the WordPress editor and then in the right sidebar, expand the Advanced section and enter a name for this location in the HTML Anchor box, like section2 or something similar.
That name is then associated with that heading. Repeat this for every section or heading in the article that you want to link to in the table of contents. Use a different name for each one.
Create a table of contents
Now that you have several named locations in the article, you can create a table of contents that contains links to them. Enter a title, such as Contents, then enter the link text below as a list. (Tip: Press Shift+Enter after each one to create a new line, but not a new paragraph.) Then just select the text, click the Link button in the editor toolbar and enter a # followed by the name of a location.
Here is an example and there are three sections in this article. Selecting the text and clicking the link button enables the name to be entered. The text Go to section 3 has been selected and the link is set to #section-3.
Creating links with #name may seem odd at first, but it works. The # instructs the browser to look for the following named location in the current page and go to it.
As you can see, creating a table of contents in WordPress is straightforward when you know how. Just name locations, then link to them. However, when an article is long, complicated, and there are many locations, it can be difficult to remember location names and the order they are in. You might need to write down the heading or section and the name you give it, then refer to this when creating the table of contents.
There are WordPress plugins that can create a table of contents and they aim to make it simpler by automating the process.
Use a Table of Contents plugin
One advantage of using a WordPress plugin to create a Table of Contents is that it is less work. Easy Table of Contents is a great example of how a plugin can save time and effort. After configuring it, it is automatic and Table of Contents just appear in posts by magic. OK, not by magic, but according to rules you set in the plugin configuration.
This is just a small section from a long page full of settings. Basically, you create rules, such as whether to auto-insert in posts, pages and so on. You can choose the position and where it appears, such a before the first heading, you can choose the colour scheme and there are several to choose from.
The Table of Contents is automatically created from headings and you can choose which headings are used, such as h2 and h3, but not h4/5/6. A ToC is not needed on short articles, so you can choose how many headings are required before a ToC is generated. For example, only posts with more than 4 subheadings have a ToC.
This is an example of a Table of Contents that was automatically generated and automatically inserted into a post. You see nothing in the WordPress post editor and do not need to add anything. It is automatic.
An alternative is LuckyWP Table of Contents. It has very similar features and can automatically insert a Table of Contents according to rules, such as the number of headings greater than four. It organises the settings and puts them on tabs, which makes the configuration seem simpler. There is also a Gutenberg editor block to add a table of contents wherever you want in the post and this is a useful feature.
It may have been a clash with my theme or plugins, but it did not work as well as Easy Table of Contents for me and missed headings. Try it yourself though.
Ultimate Blocks – Gutenberg Blocks Plugin is a collection of blocks you can insert when editing WordPress posts in the Gutenberg editor. Table of Contents is one of many blocks and you simply select it in the blocks menu where you want and it creates a table of contents.
You actually see it in the post editor and as you write the article and add headings, it auto-updates. It does not have the design options the other plugins have and it simply uses the theme’s styles. However, it works well and looks good.
How in-page links work
It can be useful to learn a little HTML and to know what goes on behind the scenes in web pages and web browsers, so let’s take a look at how in-page links work. Skip this section if you want to, but you might find it useful.
The old method of naming a location in a web page so it can be linked to, such as in a table of contents, is to use the name attribute of an anchor link – a variation of the standard HTMl link <a href=””>…</a>. Find the place in the web page that you want to link to and enter some code like this:
<a name=”section1″> </a>
You would normally add this immediately before a heading, image or paragraph of text and a web browser associates that location with the name. You can still do this and it still works in WordPress. If you show the Blocks menu in the Gutenberg editor and insert a Custom HTML block, you can add named locations in the post.
There is another way to name a location on a web page and this uses the id=”name” attribute. This is the modern way of creating named locations and is preferred. The code can be placed within many HTML tags, such as paragraphs, images, headings, links and so on.
WordPress uses this method when you expand the Advanced section for a heading block and enter an HTML Anchor. What you end up with is this:
<h3 id=”section2″>Section 2 Heading</h3>
There are too many web pages using the old <a name=”… method to discontinue support for it anytime soon, but one day in the future it will be dropped by web browsers, so use the id method instead.
To link to another part of a web page that has a named location, you would create a normal web link, but instead of entering a URL, you enter a hash (#) followed by the name of the location.
For example, if there was a location named section2 then you would create a link in the normal way, but instead of entering a URL, you would enter #section2 instead. To link to a location named section3 you would link to #section3 and so on. In HTML it would look like this:
<a href=”#section2″>Go to section 2</a>
Clicking this type of link would scroll the web page so that the place linked to is on the screen.
Link to a section in another web page
We know how to link to another web page using its URL. We know how to link to another part of a web page using #named locations. Combine the two and you can link to a part or section of another web page. Here are a couple of examples:
https://www.website.com/web-page/#section2
https://www.website.com/page.html#section2
By adding the #location to the end of a regular URL, the browser loads that page and then scrolls to the named location.
