How to Create Anchor Links (AKA “Jump Links”) in WordPress

anchors

Andrea Ferguson

President at AndiSites Inc.
Andi is founder and President of AndiSites Inc. She writes about website design and development, best practices, and random stuff her busy brain thinks would be useful.
Andrea Ferguson

Anchor links defined

You know how sometimes on a web page you click a link, and rather than taking you to another page it jumps you further down on the same page? That’s an “anchor link,” and it’s a great way to help users find what they need on long pages.

How to create anchor links in WordPress

Method One (manual)

  1. Make sure you’re in the “Visual” tab of the Edit Page or Edit Post screen.
  2. Enter or highlight the text for your link.
  3. Click the little chain link icon above the page editor to open the link window.
  4. Instead of linking the text to a URL, post, or page as you would with a normal link, assign it an anchor name by entering “#your-anchor-name-goes-here” (without the quotes) in the link box. Click the blue Enter icon to save and apply your new link.
  5. Next, click on the “Text” tab in the page editor to switch over to the HTML view.
  6. Find the place in the text where you want the link to “jump” to (ideally a header), and add an ID attribute just after the heading tag, inside the brackets. Here’s an example:
    <h2 id=”your-anchor-name-goes-here”>This is the Heading Text</h2>
  7. Save, test, and celebrate your awesomeness!

Method Two (plugin)

Although we don’t recommend using plugins for small or infrequent functions, these two can automate the process for you:

  • TinyMCE Advanced (adds functionality to the native page edit, including an “Insert” dropdown with “Anchor” as an option)
  • Easy Table of Contents (lets you automatically add a list of anchor links for all headers in your page or post by inserting the [ez-toc] shortcode)

Method Three (Gutenberg editor)

Although we’re honestly not quite a fan yet, the Gutenberg editor includes a built-in option for anchor link creation.

  1. Highlight the header in the Gutenberg Block and click “Advanced” on the right-hand pane.
  2. Enter an anchor link ID for the highlighted header in the “HTML Anchor” box.
  3. Highlight the text inside the block that you want to use as your anchor link, and click the chain link icon. In the link box, enter “#anchor-link-ID-you-just-created” (without the quotes). Click the enter icon to save and apply.

 

Have questions about adding anchor links on your WordPress site? Contact us. We’d love to help!

 

 

 

 

Back to Blog