Categories
WordPress

How to Create a Simple and an Effective Table of Contents in WordPress (Without a Plugin)

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

  1. 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.
  2. 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.
  3. 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.
what are one-line sitelinks in google serps
An example of one-line sitelinks.
BACK TO THE TABLE OF CONTENTS

An anchor link consists of the following 3 components:

  1. Anchor ID: This begins with a hash (#) symbol accompanied by the name. For example #this-is-an-anchor.
  2. The text: The text you want to use as an anchor, to link from.
  3. 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.
step 1- how to add an anchor link in wordpress using gutenberg
Step 1: Select the text you want to use as the link, and then, choose the “link” option.”
step 2- how to add an anchor link in wordpress using gutenberg.png
Step 2: Instead of a regular link, input your Anchor ID prefaced with the hash symbol. Also, notice that as soon as you start the process of entering the anchor ID, WordPress immediately recognizes that this is an internal anchor link. This serves as a confirmation that you are on the right track.
  • 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 to input an html anchor to a heading in wordpress
Fundamentally, I navigated to the advanced options for the heading, and plugged-in my anchor name/ID. Notice the absence of the hash symbol.
Back To The Table of contents

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.

how do browsers interpret anchor links
Notice how the anchor ID is added at the end of the URL.
Back to the table of contents

You May Also Want to Check Out:

Conclusion

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.

back to the table of contents