How to Create Anchor Links in the Gutenberg Editor in WordPress

How to Create Anchor Links in the Gutenberg Editor in WordPress

If you’re wondering what the heck is Gutenberg? It’s the new text editor available in WordPress version 5.0. If nothing has changed in your WordPress admin the chances are you’re running an out of date version of the platform.

I would strongly recommend upgrading for both security and performance enhancements if you need assistance take a look at my WordPress web design service.

Below I have created two anchor text links
Clicking on the links below will anchor to the relevant section this is known as an anchor link.

How to create anchor links in Gutenberg
Additional ideas to make anchor links work better

Anchor Links are something that everyone’s familiar with, they also deliver a great user experience. Anchor Links are often found on web pages which display a lot of content. To a non-technical person, anchor links would be described as a link which jumps to the relevant content on a web page when clicked.

Usually, anchor links are found on FAQ pages or a page that displays a table of content. However, anchor links don’t need to be used for the less appealing content. Organising your content so that it’s easily accessible for users is very important. Users don’t have the time or patience to read a 1000 word article the key is to guide them into finding the relevant information.

Anchor links can be displayed in several ways: verticle, horizontal, as text links or as visual navigation, to achieve this some knowledge of web design will be needed.

Give your title block a unique ID

Open the relevant page or post on your WordPress website. Select the title block you want to anchor to. Make sure that the block is active and you can see the advanced menu. Expand the advanced accordion option and create a unique anchor ID in the HTML Anchor field.For this example, I’ve assigned the following anchor ID: how-to-create-anchor-links-in-gutenberg

Linking your your anchor through a link

Creating an anchor link is no different from linking to a page in the Gutenberg editor. The only thing we are going to do is replace the URL with the custom ID we create previously but include a # symbol at the start. Example: #how-to-create-anchor-links-in-gutenberg

Preview the page or post

Preview the page or post and make sure that the anchor link is working correctly. If not just revisit the steps mentioned in this post. Once happy it’s working publish your page or post.

By default, anchor links will jump suddenly to the ID further down the page. To some users, this can leave them with ‘Oh what happened then’ feeling. You can change the transition so that it’s a smooth scroll to the anchor. This can be achieved by using the scroll-behavior CSS property.