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”.
It’s used for navigation and it’s a great way to help users find what they need – especially on long pages.
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.
- Highlight the header in the Gutenberg Block and click “Advanced” on the right-hand pane.
- Enter a link ID for the highlighted header in the “HTML Anchor” box.
- 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).
- Click the enter icon to save and apply.
Method 2 - Manual
- Make sure you’re in the “Visual” tab of the Edit Page or Edit Post screen.
- Enter or highlight the text for your link.
- Click the little chain link icon above the page editor to open the link window.
- 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.
- Next, click on the “Text” tab in the page editor to switch over to the HTML view.
- 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>
- 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: