• 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 Matt

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.

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

Recent Posts

  • 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
  • How to Add the WordPress Widget HTML Unit
  • How to Change the Publish Date When You Update a Post in WordPress 5.9

Site Info

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

Archives

  • 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
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more about our privacy policy, see here: Privacy Policy

Copyright © 2022 AnswerYourTech.com

 

Loading Comments...
 

You must be logged in to post a comment.