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.
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:
- 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)
Do you have questions about how to create anchor links in WordPress?
Contact us. We’d love to help!
