Adding an Anchor Link to Headers in WordPress with Gutenberg
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
When I added the target, it became
The window for the link is a little small but you can right arrow to the end where you can add the target.
- 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
- WordPress 5.3 Convert to blocks work around
- WordPress Categories and Tags missing in Gutenberg
- A quick way to have a link_to show as a button instead of a text link
- Why a WordPress site that isn’t mobile friendly is killing your traffic.
- Removing spaces from filenames in Joomla sites
- Using Anchors in Joomla 1.5x with the JCE Editor
- A Workaround for the number of menu items limit in WordPress.
- Hackers control vehicle functions on a Jeep Cherokee