There are quite a few WordPress Table of Contents plugins available for WP users who want to leverage them; this post however, will teach how to create a simple and an effective table of contents by using the default features available in WordPress — without the use of any plugins.
Technically speaking, the method that I’ll cover is not new (it’s basic HTML); although, in WordPress, the Gutenberg Block Editor gives an edge. Note that if you’re using any other editor, chances are, you’d get similar advantages.
In summation, I will discuss how to create “anchor links” or jump links — a term ascribed to refer to internal hyperlinks that jump to a specific section of the same page — within the context of the table of contents.
Howbeit, before we get started, I want to cover why creating a table of contents might be a good idea.
Table of Contents
Potential Benefits of Creating Table of Contents
- For any content piece, especially longer, having a table of contents can quickly give your site users a high-level idea about the premise of your post.
- Not to mention, it provides a great user experience if the user can tap into each line item within your Table of Contents, and quickly jump to that section.
- It can help you enhance your SERP listing in Google. It is widely accepted that Google can use your table of contents to create one-line sitelinks — a beneficial feature if applied to your post. Aren’t sure, what one-line sitelinks are? See the screenshot below for reference.
How to Create Anchor or Jump Links With WordPress Gutenberg
An anchor link consists of the following 3 components:
- Anchor ID: This begins with a hash (#) symbol accompanied by the name. For example #this-is-an-anchor.
- The text: The text you want to use as an anchor, to link from.
- The heading: In other words, the site section you want to link to.
For example, currently, you’re in the section of “How to Create Anchor or Jump Links With WordPress Gutenberg” — which by the way, is linked from my table of contents. When setting up this jump link, this is how the 3 components discussed above play out:
- Anchor ID: I decided to match the anchor ID with my heading. Essentially, it came out to –>#how-to-create-anchor-or-jump-links-with-wordpress-gutenberg
- The text: If you scroll back up to my table of contents, you’ll notice the I am using the same exact text as my heading itself — to link to it. In actuality, it could be anything. The real indicator to make WordPress understand where this link is supposed to go, is by using the Anchor ID (including the hash sign). To implement, you’d have to use the link option for your block, but instead of linking to a regular URL, you’d be linking to a site section.
If you need confirmation, WordPress will recognize that this is an internal link when you’re linking using an anchor. See the reference screenshots below.
- The Heading: Attaching the anchor ID to the text is only part of the process. Next, you’d have to append the same anchor ID name to the heading/site section without using the hash symbol. In Gutenberg, most of the blocks have an advanced setting, headings, definitely do. Now, if you head over there, you’ll see an option to plug-in an “HTML Anchor.” For reference, notice the actual screenshot of the current sections’ heading.
How Do Browsers Interpret Anchor Links
Any web browser that supports anchor links (basically all do from my knowledge), will affix your anchor ID at the end of the URL — as soon as it’s clicked/tapped.
For example, in this post, I have a section that is anchored — so to speak, on what a bounce rate is in Google Analytics. For your convenience, I’ve already clicked on that link — so that I could use it for the screenshot below.
You May Also Want to Check Out:
- What Are Reciprocal Links? Are They Harmful to Your SEO?
- What Is Cache Flushing in WordPress?
- How to Add a Contact Form on Your WordPress Site
- How to Use WordPress Plugins
- How to Prevent DDoS Attacks on WordPress (for Free)
- How to Prevent and Restrict Brute Force Login Attacks in WordPress
- How to Disable Comments on WordPress
- How to Embed Videos in WordPress
- How to Edit Footer in WordPress?
- All Other Topics and Posts
The method that you learned here can be used on any website (WordPress or not). The only difference would be in implementing it, as that’s dependent on the CMS. Worse case, you’d have to manually write the HTML code for it, which isn’t hard.
One of the most common use cases of an anchor/jump link, is for creating a table of contents. But technically, it can be used in any scenario you’d want to.
Lastly, if you still want to better visualize anchor links in live action, a world-famous example is Wikipedia. Notice how they use their Table of Contents.