How to link to a section of a page in WordPress? Table of Contents in WP

July 23, 2024
If you want to link a section of a page, that's a great choice you have, because it will always improve the navigation of the website, especially when you are creating a table of contents for your long articles or long webpages. Here's an example of what it looks like. I have attached a picture of it. 

How to link to a section of a page in WordPress? Redirect to a section in WP.
Basically, here I will tell you about how you can do it very easily. Linking any particular section of a page can be so easy in WordPress. Here are the steps.

Step 1: Add Anchor Links to that particular sections

To link to a specific section, you can very easily do that by using the anchor tag to the heading of that section.

Method 1: Using Gutenburg Block Editor

Edit your page in wordpress
Click on the heading you want to link to.
In the right sidebar under Block Settings, locate the Advanced section.
Find the HTML Anchor tag field and enter a unique ID (e.g., my-section).
WordPress will automatically assign this ID thing to the heading.

Method 2: Manually add the html a tags

If you want to add the anchor tag yourself, you can do it just by writing the code. If you know HTML, you might be familiar with the code I have provided. Then that's better.

<h2 id="my-section">My Section</h2>

Step 2, How to create the link to that section?

Now that you have set up the anchor tag, then you can create a clickable link to that part. You can again do this either in Classic Editor, or if you want, you can edit this in your HTML mode. \

In the editor, you will have to select the text you want to use as a link, then click the Edit Link button, enter the hashtag symbol followed by your anchor ID, then click Apply, and your link will be working fine. 

If you want to follow the HTML code method, then just add this particular code. 

Step 3: How to create a Table of Contents list? 

For Table of Contents, list all the sections with their anchor links at the top of the webpage, so that your user finds it very easy to locate them. Just by clicking on the link, they will be redirected to that particular section of the page.
For example:
  <ul>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#features">Features</a></li>
    <li><a href="#pricing">Pricing</a></li>
  </ul>

  <h2 id="introduction">Introduction</h2>
  <h2 id="features">Features</h2>
  <h2 id="pricing">Pricing</h2>

Step 4: Using a Plugin In WordPress 

This is the best thing that they have a lot of plugins for almost everything. And you can do anything with their plugins. Although they are paid, but they are worth the money. So if you don't want to manually add links, you can use a Table of Contents plugin. Like I will list out some popular plugins here. 

Easy Table of Contents 

It will auto-generate a TOC or Table of Contents from your headings. 

Table of Contents Plus 

It is highly customizable and it will also auto-generate the TOC. 

Lucky WP Table of Contents 

Well, it is lightweight and user-friendly. 

How to use these plugins?

You just have to install and activate your plugin, then go to Settings. And customize it. It will automatically appear in your posts and based on the headings you have provided. 

Conclusion 

Manual methods give you full control over the anchor tag and anchor links. So I will prefer that. You should also prefer that. Table of Contents plugin Automate Automate the process and save a lot of time. So you can prefer that too. And don't forget, always test your link, if your link works or not, before publishing it. Well, goodbye till then.




Tags:
Ankit

Ankit