How To Create Anchor Links In WordPress (Gutenberg Editor)

Do you want to create anchor links in your blog post?

If yes, then you are at right place. Here I’m going to show you two simple ways to create anchor links in WordPress Gutenberg Editor.

Undoubtedly, anchor links can improve user experiences. It helps readers to jump to their point of interest. It’s especially essential for long-form content.

Also, it adds value to your overall SEO as Google shows anchor links in SERPs.

So there is no reason to not using anchor links in blog posts. Here’s you’ll learn:


Anchor Links (also known as jump links or table of contents links) are links that navigate users to a specific part of a page.

Once you click on these links, it will automatically take you to a specific section or part of the post/page. They are also used to link an external page.

Let’s see a simple example:

Here in this post, we have a ‘Table of Contents’. When you click a link from the table of contents, it will take you to that specific part.

There are mainly two ways to add anchor links in WordPress.

Let’s see the manual way first.


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

Let’s find out how you can do it in Gutenberg 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.

Also Read: 10 Time-Saving “Gutenberg Tips & Tricks” You Should Know


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

The great news is, we have an advanced “Table of Contents” block on our Gutenberg plugin – Ultimate Blocks.

It lets you add a table of contents which is generated automatically from the headings available in the post or page.

Now let’s see how to add 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 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 the blog post where you want to add a table of contents. Then insert the ‘Table of Contents’ block on your blog post.

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 as 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.


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.

6 thoughts on “How To Create Anchor Links In WordPress (Gutenberg Editor)”

    1. 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. True. But Gutenberg makes it easy. In the Classic editor, you’ll have to either use a plugin or do it manually.

  1. 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.

Leave a Comment

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

Copy link
Powered by Social Snap