• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Answer Your Tech

Wordpress How-to Guides

  • Writing
  • Settings
  • Jetpack
  • Navigation
  • Hosting
  • Getting Started
  • Themes
You are here: Home / Writing / How to Add an HTML Anchor to a Heading Block in Wordpress

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

April 19, 2019 By Matthew Burleigh

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.

create a heading block

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.

open the post for the anchor text

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

select a heading block

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

click the advanced tab

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.

how to create an html anchor in wordpress

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.

turn text into a link

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.

create a link to the anchor that you just created

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.

Matthew Burleigh
Matthew Burleigh

Matt has been working with WordPress and creating content using this powerful content management system for years. While he has written about many other tech topics, WordPress is one of his favorites.

You can read his full bio here.

Join Our Free Newsletter

WordPress guides and deals

You may opt out at any time.
Read our Privacy Policy

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)

Related

Primary Sidebar

Join Our Free Newsletter

WordPress guides and deals

You may opt out at any time.
Read our Privacy Policy

Recent Posts

  • How to Add a TXT DNS Record in Cloudflare
  • How to Enable or Disable User Registration in WordPress
  • How to Install and Configure the WP Rocket Plugin
  • How to Make WordPress Not Organize my Uploads into Month and Year-Based Folders
  • How to Turn on Cloudflare Hotlink Protection

Site Info

  • Domain Name - Hostgator
  • Hosting - Cloudways
  • Theme Framework - Genesis
  • Child Theme - Smart Passive Income Pro
  • Site Speed - WP Rocket

Archives

  • November 2022
  • October 2022
  • May 2022
  • July 2020
  • September 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • July 2018
  • December 2016
  • November 2016

Categories

  • Comments
  • Genesis
  • Getting Started
  • Hosting
  • Jetpack
  • Navigation
  • Plugins
  • Settings
  • Sidebar
  • Themes
  • Writing
  • Affiliate Disclosure
  • Privacy Policy
  • FAQ
  • About
  • Contact

Copyright © 2023 AnswerYourTech.com

 

Loading Comments...
 

You must be logged in to post a comment.