If you have a long page or post on your WordPress site, creating anchor links can make it easier for your visitors to navigate. In this guide, we’ll walk you through the updated methods to create some type of anchor links which would be good for SEO.
What are anchor links (or page jumps)
Anchor links are hyperlinks that instantly move visitors to a specific section of a page. They’re especially helpful for long-form content, landing pages, or FAQs. Instead of scrolling manually, users click a link and jump to the information they want.
Example: Clicking a “Back to Top” link to return to the top of the page.
How to create anchor links in WordPress
Step 1: Add an anchor to a block
- Select the Block: Click on a block (like a Heading, Paragraph, Image, or Button).
- Open Settings: Click the “Settings” icon (top right) if the sidebar isn’t visible.
- Expand Advanced Settings: Scroll to “Advanced”.
- Set an HTML Anchor: Type a unique, lowercase ID (e.g., section-one). WordPress will automatically format it if you use spaces (like section-one).
Step 2: Link to the anchor
- Highlight the Link Text: Select the text, button, or image.
- Insert the Link: Click the chain-link icon.
- Type the Anchor ID: Enter #section-one (include the hash #).
- Apply and Save: Click “Apply,” then “Update” or “Publish” your page.
Tip: In WordPress 6.8, anchor links often work even in preview mode.
How to add anchor links in navigation menus
If you want visitors to jump to sections directly from your site’s navigation menu:
- Create Anchors: Add anchors to your sections first.
- Edit Navigation: In Site Editor > Navigation Block.
- Add a Custom Link:
- URL = #section-name
- Link Text = Name you want displayed.
- Save Changes.
Note: Works only for links within the same page. To jump across pages, use the full URL + #anchor (e.g., https://yourdomain.com/page/#section-name).
How to create a “Back to Top” anchor link
Want a link that brings readers back to the top of your post?
- Anchor the Top: Add an anchor ID (e.g., top) to a block at the start.
- Create Link: Add text like “Back to Top” at the bottom.
- Insert Link: Set it to #top.
How to manually add anchor links in HTML
Prefer full control? Here’s the manual method:
First, add an ID to the target element
<h2 id="section-one">Section One</h2>Then create the anchor link
<a href="#section-one">Go to Section One</a>This method also works inside the WordPress Code Editor or the Classic Editor (Text Mode).
🌊 Too busy to manage your WordPress site? Our expert team handles all your website needs – from fixes to improvements – while you focus on running your business. Start with our WordPress retainer service →
Pro tips for optimising anchor links
- Smooth Scrolling: Add this CSS for a better experience:
html { scroll-behavior: smooth; } - Accessibility: Use clear and descriptive link text to assist screen readers.
- Short & Simple IDs: Keep anchor IDs short and avoid complex punctuation.
- Internal Linking Boost: Combine anchor links with internal links to enhance your SEO and user engagement.
- Structured Content: Helps search engines crawl your content easily.
- Featured Snippets: Google sometimes displays page jumps directly in search results.
- Longer Dwell Time: Easier navigation means readers stay longer.
- Improved User Signals: Better UX can positively influence SEO rankings.
Final thoughts
Creating anchor links (page jumps) in WordPress is simple and powerful. Whether you’re improving user experience, boosting SEO, or building a long scrolling homepage, anchor links make your site easier to navigate and more effective.
