How To Add Anchor Links (or Jump Links) In WordPress

Anchor links or jump links make navigation easier. By using these links, users can jump to their point of interest. These links provide better user experiences.

If you are publishing long-form content, you should consider adding anchor links in your WordPress posts.

If you are wondering how to do it in WordPress, you are in the right place. Here I’m going to show you two simple ways to create anchor links in WordPress (with and without using a plugin)

Here are what you’ll learn:

(Above links are anchor links or jump links. That means if you click any of the above links, you’ll go to the clicked section.)

What are Anchor Links?


There are mainly two ways to add anchor links in WordPress. You can add anchor links manually using the WordPress Block Editor. Or you can add anchor links as table of contents by using a plugin.

Let’s see the video tutorial first (1:40 minute).

Adding Anchor links in your post is super easy and straightforward. WordPress makes it insanely easier in the Gutenberg Editor. Now you can add anchor links without using a plugin.

Let’s find out how you can do it in the Block Editor.

In the very first step, highlight the header and click on the Advancedfrom the right-hand side. Then enter the anchor text in HTML Anchorbox.

Then just go back where you want to link it. Just select that text and link it with a # right before the anchor name. Check the screenshot given below:

That’s it.

You have successfully added anchor links to your WordPress Post manually.

Many WordPress users want to skip the HTML part and look for an automatic approach. If you are one of them, you can use a table of contents plugin.

You can use the Ultimate Blocks plugin. It has an advanced “Table of Contents” block. This block lets you add an automatically generated table of contents from the headings.

Now let’s see how to add a table of contents using the Ultimate Blocks plugin.

Step #1: Install & Activate The Plugin

You can install the plugin directly from the WordPress dashboard. Just go to Dashboard > Plugins > Add New and search for ‘Ultimate Blocks’.

The very first result will be the Ultimate Blocks. Then just click on ‘Install Now’ and ‘Activate’ the plugin.

That’s it. You’re done.

If you want to upload the plugin manually, you can download the plugin from here.

Step #2: Add ‘Table of Contents’ Block

Now go to the blog post where you want to add a table of contents. Click on the plus sign (+) and search for ‘Table of Contents’. And insert the block.

Once you’ve inserted the block, it will automatically generate a table of contents from headings.

Step #3: Configure Your  Table of Contents

Now the great thing is, you can configure the table of contents to your needs and requirements. Here are the things that you can configure.

  • Changing the title of the table of contents.
  • Showing table of contents in one, two, or three columns.
  • Changing bullet style for the table of contents (Bulleted, Numbered, and Plain).
  • Choosing which headings to include or exclude.
  • Enabling Show/Hide toggle for the table of contents.

Just watch this video to understand all of the configurations.

Yes, you can see all the changes as they happen.


Also Read: 10 WordPress Editor Tips & Tricks You Should Know

Conclusion

So these are the two ways you can use to add anchor links in WordPress Gutenberg Editor.

While the manual way is very easy, you can consider using our plugin (Ultimate Blocks) to save time. Besides, it lets you configure everything you need. And not to mention that we have some other cool blocks.

Now let us know how do you add a table of contents to your blog posts.

And if you found this post useful, please help us by sharing this post on Facebook, Twitter, or LinkedIn.

10 responses to “How To Add Anchor Links (or Jump Links) In WordPress”

  1. Sharon Avatar
    Sharon

    Hi, I am trying to set up an anchor lick using the block editor, does it have to be a heading as the link? or can I have a few words of text that take viewers to another page on my site.
    Thanks for your help

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      It needs to be a header in case of an anchor link.

      But as you mentioned that you want to take your viewers to another page, you can do that on a few words of text. And that’s called ‘Hyperlink’.

  2. Joelle Avatar
    Joelle

    Hi there – is this how I add a link too, that doesn’t show the actual link, but like “click here” “read here” to be guided to wherever the post is? I think it’s called a hyperlink. Like you have in the first part of this post …. click here.

    I need to link other recipes of my site to one another.

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      To add a hyperlink, select the text where you want to add a link and then click on the ‘Link’ icon. And then insert the link and tap enter.

      Check this image

  3. Anna Avatar
    Anna

    I’m pretty much a noob, but I fought with WP for about two hours trying to follow these “simple” instructions. I walked away and went downstairs for lunch and then it came to me: you have to enter the page URL before the #anchorlink! Maybe that’s obvious to you guys, but not so much for us noobs.
    Thanks though. I never would have figured it out by myself anyway.

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Glad we could help. Please feel free to reach us if you face any issues related to WordPress.

  4. Sameer Avatar
    Sameer

    Does this not work in the classic editor ?

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      No, it’s only for Gutenberg Editor.

    2. Nikolay Trifonov Avatar
      Nikolay Trifonov

      Ofc it works. Anchor links (or jump links) aren’t something new or gutenberg specific.

      Just add custom id attribute to every , or whatever HTML tag you want to link to. Example:
      First subheading
      Second subheading

      Then create a custom list with links, as shown in this same article.

      1. Istiak Rayhan Avatar
        Istiak Rayhan

        True. But Gutenberg makes it easy. In the Classic editor, you’ll have to either use a plugin or do it manually.

Leave a Reply

Your email address will not be published. Required fields are marked *