Latest posts by Andrea Ferguson (see all)
- How to Create Anchor Links (AKA “Jump Links”) in WordPress - September 11, 2019
- Do I Really Need to Care About GDPR? Maybe. - August 7, 2018
- Quick Thoughts on Where to Put Your Sidebar (or, Ode to the Sidebar) - March 7, 2017
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)
- 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, 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.
- Highlight the header in the Gutenberg Block and click “Advanced” on the right-hand pane.
- Enter an anchor link ID for the highlighted header in the “HTML Anchor” box.
- 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!