Learn how to create anchor links in WordPress using Gutenberg. Additionally, this post illustrates how to create an anchor link if you have a sticky header.
What is an Anchor Link?
Anchor links are also known as jump links, and they allow you to click on a link and jump to a specific part of the page. This works great when you have a table of contents for your blog post, or perhaps you have a long post and your reader wants to jump to a certain portion of the text.
This post may contain affiliate links. I may earn a small commission from purchases made through them, at no additional cost to you. Please see my Disclosure Policy for more details.
Want to see an anchor link in action? Click here and it will take you to the bottom of this post.
How to Create an Anchor Link Using Gutenberg
1. In Gutenberg, whether you are creating a page or a post, create a heading block. To do this, click the plus sign and select Heading.
2. Type in your heading. Then go to the side menu for this heading block, and select Advanced. In the HTML Anchor box enter a short title for your anchor that relates to your heading. Don’t use spaces, but you can use dashes if you have one or more words. For example, I typed in learn-more. Copy the HTML anchor you just created.
3. Now go the specific spot in your text that you want to put the link. Highlight the text that you wish to make a link and hit the link button.
In the link box, type in # and paste your HTML anchor after it and save the link. So I would put #learn-more.
4. You now have an anchor link! Preview your page or post to test it out and make sure it works. Click on the link you created and it should take you directly to the header you anchored it to.
How to Create an Anchor Link if Your WordPress Site Has a Sticky Header
My WordPress theme allows me to use a sticky header. So if I use the method above to make an anchor link, once I click my link my anchored heading gets covered up by my sticky header. The instructions below are my solution to this sticky header issue. If you have a sticky header, try this out.
1. In Gutenberg, whether you are creating a page or a post, create an HTML block just above the heading or block you wish to be your anchor target. To do this, click the plus sign and select Custom HTML.
2. In the Custom HTML box, insert the following text:
<div style=”height:25px” class=”wp-block-spacer” id=”learn-more”></div>
This HTML code creates a spacer with an anchor in it. The 25px is the height of the spacer. Feel free to adjust this number smaller or larger, in order to compensate for the size of your sticky header.
The anchor in this HTML code is learn-more. So change learn-more to reflect the title you want for your anchor. Make your anchor relate to the heading or block that’s just below this HTML block. It should be a short title with no spaces, but you can use dashes if you have one or more words. Copy your anchor id because we are going to need it in the next step.
3. Now go the specific spot in your text that you want to put the link. Highlight the text that you wish to make a link and hit the link button.
In the link box, type in # and paste your anchor id after it and save the link. So I would put #learn-more.
4. You now have an anchor link! Preview your page or post to test it out and make sure it works. Click on the link you created and it should take you directly to the spacer you anchored it to.