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”.
Anchor links are used for navigation and helping users find what they need – especially on long pages. If your website is in WordPress (and it really should be), making anchor links is easy!
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.
- 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:
- Add Anchor Links (lets you automatically add anchor links to headings in your page or post via Settings)
- 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)
Do you have questions about how to create anchor links in WordPress? Need other kinds of WordPress training?
Contact us. We’d love to help!