Adding an Anchor Link to Headers in WordPress with Gutenberg

Last Updated on September 21, 2023 by Christopher G Mendla

I was trying to get a simple anchor link working in a WordPress header using Gutenberg. Through some trial and error I was able to get the anchor link working

What is an anchor link?

An anchor link is a link on a page that allows you to link directly to that part of the page.  I wanted to link from a category description to a section of a page with random images where I had images of the canal in the town. 

How it is supposed to work in Gutenberg

The general method is to:

• Create a header block
• Give the anchor a name under the advanced controls for the header block
• Link to the anchor

Step by step

Create a header

Go to the place in your document where you want the anchor. Create a header using a header block. 

Give the anchor link a name

Next, look for the block controls on the right. Be sure you are still focused on the header block. Click the triangle to expand the ‘advanced’ section. 

Enter a name for your anchor. KEEP IT SIMPLE. One word is good. If you use multiple words, you will see Gutenberg translate spaces into dashes. CASE COUNTS. When you link, you need to specify the EXACT case of the anchor text. In this case, I simply called it “canal”

Be sure to update your post. If you are using server caching, you might need to clear the cache of the page. 

Link to your anchor

• Go to the page where you want to place a link to the anchor.
• Create a link to the anchor

This was where it got a bit tricky. I tried searching for the anchor text using the link maker but couldn’t find it. The following did work

• Create a link
• Search for the PAGE where the anchor text lives.
• Select that page
• Add the name of the anchor to that link in the format of #anchorname

In this case, the link to the page was

https://www.bucksviews.com/2018/04/random-images-of-new-hope-march-2018/

When I added the target, it became

https://www.bucksviews.com/2018/04/random-images-of-new-hope-march-2018/#canal

The window for the link is a little small but you can right arrow to the end where you can add the target. 

Notes

• I used the full url. This might cause issues if I ever changed the domain name or perhaps if a protocol replaces https.
• Decide if anchor links are worth the effort in terms of SEO and user experience. 
• Keep in mind that some browsers don’t seem to handle anchor links correctly. Most likely this affects older browsers. 

_{Featured image from BarelyDevi / Pixabay}