How to Add an HTML Anchor to a Heading Block in WordPress

When you write a long post in WordPress it can take a while for your readers to scroll all the way through it. This can be frustrating for them if they are only interested in a particular section of the post, or if they are coming back to continue reading it from a previous session.

One way to make this a little more convenient for them is to add an HTML anchor to a heading in your post. You can then link to that anchor from a table of contents or a list of sections at the top of the post, which your readers can then click on to be taken directly to that section.

How to Create an Anchor or ID for a Link on the Same Page of a WordPress Post

The steps in this article were performed using the Gutenberg post editor in the 5.1.1 version of WordPress. Note that the method we are using in this article requires the block where you are placing the anchor to be a heading.

You can turn a block into a heading by clicking inside the block, selecting the Change block type button in the toolbar, then clicking the Heading option.

Step 1: Sign into the admin section of your website at (yourdomain.com)/wp-admin.

Step 2: Hover over the Posts option in the left column, then create a new post or edit an existing one.

Step 3: Click inside of the heading block where you wish to place the anchor.

Step 4: Select the Advanced tab in the column at the right side of the window.

Step 5: Type the name of the anchor into the HTML Anchor field. Note that you can’t use spaces when you create the anchor name, and each anchor that you create on a page will need its own unique name.

Step 6: Navigate to the spot in the post from which you wish to link to this anchor, then select the text for the link and click the Link button.

Step 7: Type #youranchorname into the field, then click the Apply button. Replace the “youranchorname” part of that text with the actual name of the anchor that you created in Step 5.

Alternatively you can link to this anchor from another page, but you will need to add the #youranchorname part of the link to the actual URL for the link. For example, I added an anchor called section2 to the heading of this section, so if I wanted to link to it from another page, the full link would be:

https://answeryourtech.com/how-to-add-an-html-anchor-to-a-heading-block-in-wordpress#section2

Once you publish the post you can then click on the link to be taken directly to the spot in the post where you placed the anchor.

Do you often forget to put posts in the correct category when you create them, leaving you with an Uncategorized category? Find out how to change the default post category in WordPress so that new posts are automatically put in a different category than the Uncategorized one.