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

How to Create Anchor Links in WordPress

Here’s our guide on how to create anchor links in WordPress – also known as jump links.

So what are anchor links?

Have you seen on a web page that sometimes you click a link, and rather than taking you to another page, it jumps to further down on the same page?

That’s an “anchor link”. 

Improve Your Site Navigation and Anchor Links

It’s used for navigation and it’s a great way to help users find what they need  – especially on long pages.

Update: If you’re looking for block links, check out our new tutorial on How to Create Web Block Anchor Links.

How to Create Anchor Links in WordPress

Here are three different methods for creating jump links:

Method 1 - Gutenberg editor

If you’re in a current version of WordPress, the Gutenberg “blocks” editor includes a built-in option for jump link creation.

  1. Highlight the header in the Gutenberg Block and click “Advanced” on the right-hand pane.
  2. Enter a link ID for the highlighted header in the “HTML Anchor” box.
  3. Next, 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).
  4. Click the enter icon to save and apply.

Method 2 - Manual

If you’re still in (or just prefer) the Classic Editor, the process is a little different:

  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 to apply and test.

Method 3 - 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 Classic Editor, 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)

Contact us. We’d love to help!

Share and follow us on social media:
RSS
Twitter
Visit Us
Follow Me
LinkedIn
Share
INSTAGRAM

Subscribe now for useful information from AndiSites:

* indicates required

You might also enjoy

How Can We Help You?

We listen. We're different. You'll see.