How to Add Anchor Links with Gutenberg in WordPress

One of the most common things you’ll find in web-based articles are links that jump from one location in an article to another location of that same article.  These links are known as anchor links. Follow the tutorial below to learn how to add anchor links in a WordPress post or page.

If you are looking for a new home for your WordPress site, then look no further than InMotion’s WordPress Hosting. You’ll find server solutions that are secure, optimized and priced to meet your budget needs.

There are a few different ways to create anchor links in a WordPress post or page.  We are going to be focusing primarily on how to add anchor links with Gutenberg, the default editor in WordPress. 

As of WordPress version 5.0, the integrated default editor is Gutenberg. This tutorial will show you how to add the links using the Visual Editor.

  1. Log into the WordPress Administrator Dashboard
  2. Click on a header within your WordPress Post or Page, or add a header block.
  3. When you select a header, you will see the menu in the right column change.  If not, then make sure you’re in the block editor. Click on the gear icon to see the right-hand column if it’s not viewable.
  4. Click on Advanced in the Block menu at right.
  5. You will then see the label and field for HTML Anchor.  Click in the empty field to name the anchor. Don’t add spaces in the name.  Make sure to remember what you added, as you’ll need it when you create the anchor link.

The screenshot below shows how to create the HTML anchor by clicking on a header in your post or page

creating anchor links 1 1
Click on a header, then click in the Block menu on Advanced.  Under Advanced you will see HTML anchor. Click in the field and name the anchor.

Once you have created the anchor, then you need to either select the text where you will create a hyperlink that will jump to your anchor link.

  1. To create the anchor link, you will need to select (or create) text in the document. Highlight the text, then click on the link icon at the header block in your post or page. 
  2. Once you click on the link, the add URL dialogue window will appear.  First, type a “#” sign in the black window for the URL. Then add the anchor link that you created earlier.  In our example, the link would be: #create-anchor-link
  3. Click on Save Draft or Publish to save your work.  You can view the post or use Preview to check the link.

This screenshot shows how to create a link that will jump back to your HTML anchor.

creating anchor links 2 1
Complete the creation of your anchor link by selecting the text that will be the link to your anchor text, select the hyperlink option to create the link, then type in the HTML anchor name preceded by a # sign

Learn more about the new WordPress editor, Gutenberg, and the capabilities of the separate Gutenberg plugin with our helpful Gutenberg articles!

AC
Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!