WordPress table of contents menu (with both Gutenberg and the classic editor) using a very simple anchor link HTML tag. Without further ado, let’s dive right in.
]
Contents hide
1 How to Create a Clickable Table of Contents Menu in WordPress (Without a Plugin)
1.1 Creating a Table of Contents in the Classic WordPress Editor (Without a Plugin)
1.1.1 Step One: Create an Ordered (or Unordered) List
1.1.2 Step Two: Add an HTML Anchor Tag (Hyperlink)
1.1.3 Step 3: Add relevant link tags to the post
1.2 Creating a clickable table of contents in Gutenberg (without a plugin)
1.2.1 Step One: Create an Ordered (or Unordered) List
1.2.2 Step Two: Add Internal Hyperlinks to Each Menu Item
1.2.3 Step 3: Add the appropriate name tag link destinations
1.3 Related publications:
How to Create a Clickable Table of Contents Menu in WordPress (Without a Plugin)
First, let's figure out how to make a WordPress table of contents menu in the Classic editor.
Creating a Table of Contents in the Classic WordPress Editor (No Plugin)
Call me an old-timer, but I’m still a fan of using the Classic WordPress editor on some of my blogs. While Gutenberg has become much more user-friendly in recent years, I’ve created a lot of customizations on this blog (with the Classic editor) that will need some work when I switch to Gutenberg. And I know I’m not the only one still holding out! For now, let’s get started with creating a WordPress table of contents menu in the Classic editor.
Step One: Create an Ordered (or Unordered) List
First, you need to start by creating a list (ordered or unordered) that you want to be your table of contents. For example:
Before we get to hyperlinking menu items into a functional table of contents, start by entering the main sections of your article . Ideally, these menu items should match the heading titles throughout your content (as you can see, I've done this in this guide).
Step Two: Add an HTML Anchor Tag (Hyperlink)
Once you have completed the text portion of the table of contents menu, it is time to create hyperlinks to each item. To do this, we will add what is called an HTML anchor tag, a very simple hyperlink format that is especially convenient for SEO. This is what the tag looks like:
First, switch to text mode if you are comfortable and want to see the full picture of what you are adding. Once in text mode , find the first list item in your table of contents that you want to hyperlink (make it clickable). As shown in the screenshot above, add a ) <a href="#hyperlink-text-goes-here"> immediately after the opening tag of the first list item (<li> in your table of contents. I recommend always using descriptive text here as it will help improve your blog's SEO ranking for this post. Next, you need to close the hyperlink by adding a closing (</a> ) tag at the end of the text portion of the first menu item. Here is an example of copy/pasting the full HTML code:
<a href="#hyperlink-text-goes-here">Описательный текст дисплея здесь</a>
You will need to add the HTML hyperlink tag to each individual menu item in your table of contents. If you want to bypass the text mode and are confident in the functionality of your WordPress theme , you can simply click the Insert/Edit Link button and add the hyperlink tag text in the format #hyperlink-text as shown below:
Important: It is definitely best practice to use the exact same (descriptive) text in your clickable menu item as in the corresponding section that readers will be taken to when they click. Whichever method you use to add the HTML anchor tag, you have already created the first half of the WordPress table of contents link. In the next step, you will add the corresponding tag inside your post where you want this clickable link to take the reader.
Step 3: Add relevant link tags to the post
Once you've added anchor tags to your table of contents to make your menu items clickable, it's time to add a corresponding tag for each of those menu items so your readers go somewhere when they click on a menu item. As shown in the screenshot below, add it <a name="hyperlink-text-goes-here"></a> right after the title tag (and before the title text) — where the first list item section in your post begins. Since this title tag simply serves as an anchor point for the hyperlink to the menu item above, you can close the tag right away, as shown in the code snippet above. The text you use inside the (<a name=""> ) tag must exactly match the content of the (<a href="#"> ) tag you use in the corresponding table of contents item, or the clickable link won't work. The part highlighted in blue in this screenshot is what the full name tag should look like:
With this step, you have completed creating a hyperlinked table of contents menu using simple HTML . Here is an example of copy/pasting the full name tag code:
<h3><a name="hyperlink-text-goes-here"></a>Descriptive Display Text Goes Here</h3>
Now for those of you using the Gutenberg editor , let's walk through the process of creating a WordPress table of contents there as well.
Create a clickable table of contents in Gutenberg (without a plugin)
If you use Gutenberg, you're in luck! The process of creating a clickable WordPress table of contents just got a little easier. And if you'd rather follow
