Skip to content

How to Create Anchor Link WordPress

This guide teaches you how to create anchor links in WordPress using the block editor or classic editor. You’ll learn to link sections within a page for faster navigation and improved readability.

Key Takeaways

  • Anchor links improve user experience: They let visitors jump to specific sections on long pages, reducing scrolling and increasing engagement.
  • Works in both Block and Classic Editors: You can create anchor links using Gutenberg blocks or the classic WordPress editor.
  • Use descriptive anchor IDs: Choose clear, simple names like “contact” or “features” for easy linking and better SEO.
  • Link from menus or buttons: Add anchor links to navigation menus, buttons, or text for seamless in-page navigation.
  • Test your links: Always preview your page to ensure anchor links work correctly across devices.
  • No plugin needed: WordPress supports anchor links natively—no extra tools required.
  • Combine with smooth scrolling: Use a small CSS snippet for animated scrolling between sections.

What Are Anchor Links and Why Use Them?

Anchor links—also called jump links or in-page links—are hyperlinks that take users to a specific section within the same webpage. Instead of scrolling endlessly, visitors can click a link and instantly jump to the content they need.

For example, a long blog post about how to create anchor links in WordPress might include a table of contents at the top with links to “Step 1: Add an Anchor,” “Step 2: Link to It,” and so on. This makes navigation faster and more user-friendly.

Anchor links are especially useful for:

  • Long-form content like guides, tutorials, or FAQs
  • Landing pages with multiple sections
  • Product pages with detailed descriptions
  • Documentation or help centers

Best of all, you don’t need a plugin. WordPress supports anchor links natively, and setting them up takes just a few clicks.

How to Create Anchor Links in WordPress (Step-by-Step)

Follow these simple steps to add anchor links to any WordPress page or post. We’ll cover both the Block Editor (Gutenberg) and the Classic Editor.

Step 1: Add an Anchor to Your Target Section

First, you need to mark the section you want to link to. This is called creating an “anchor point.”

Using the Block Editor (Gutenberg)

  1. Open the page or post in the WordPress editor.
  2. Navigate to the heading or block you want to link to (e.g., a heading titled “How to Link to the Anchor”).
  3. Click on the block to select it.
  4. In the right-hand sidebar, find the Block tab (look for the three dots menu if it’s not visible).
  5. Under Advanced, find the HTML Anchor field.
  6. Type a simple, descriptive ID—like contact-form or pricing. Avoid spaces or special characters. Use hyphens instead of spaces.

Example: If your heading is “Get in Touch,” set the anchor ID to get-in-touch.

Using the Classic Editor

  1. Switch to the Text tab (not Visual).
  2. Find the heading or paragraph you want to link to.
  3. Add an id attribute inside the HTML tag. For example:
    <h2 id="features">Our Features</h2>

Now your target section has an anchor point that can be linked to.

Step 2: Create a Link to the Anchor

Next, you’ll create a clickable link that jumps to your anchor.

In the Block Editor

  1. Highlight the text you want to turn into a link (e.g., “Jump to Features”).
  2. Click the link icon in the toolbar.
  3. In the URL field, type a hash symbol (#) followed by your anchor ID.
    Example: #features or #get-in-touch
  4. Press Enter or click the arrow to apply the link.

In the Classic Editor

  1. Highlight the text you want to link.
  2. Click the insert link button.
  3. Type #your-anchor-id in the URL field (e.g., #contact-form).
  4. Save the link.

Now, when someone clicks that link, the page will scroll directly to the anchored section.

Step 3: Test Your Anchor Link

Always preview your page to make sure the link works:

  • Click the Preview button in WordPress.
  • Click your anchor link.
  • Check that the page smoothly scrolls to the correct section.

If nothing happens, double-check:

  • The anchor ID matches exactly (case-sensitive).
  • There are no spaces or special characters in the ID.
  • The link includes the # symbol.

Advanced Tips for Better Anchor Links

Once you’ve mastered the basics, try these pro tips to enhance your anchor links.

Add Anchor Links to Navigation Menus

You can link to anchors from your site’s main menu for instant access to key sections.

  1. Go to Appearance > Menus in your WordPress dashboard.
  2. Click Add Items > Custom Links.
  3. In the URL field, enter your page URL followed by the anchor.
    Example: https://yoursite.com/services/#pricing
  4. In the Link Text field, type something like “Pricing” or “Contact Us.”
  5. Click Add to Menu, then save.

Now your menu will jump directly to that section when clicked.

Use Buttons for Anchor Links

Make your anchor links stand out with buttons:

  1. Add a Button block in the editor.
  2. Type your button text (e.g., “See Pricing”).
  3. In the link field, enter #pricing.
  4. Style the button with colors and padding for better visibility.

Enable Smooth Scrolling (Optional)

By default, anchor links jump instantly. For a smoother experience, add this CSS:

  1. Go to Appearance > Customize > Additional CSS.
  2. Paste this code:
    html {
      scroll-behavior: smooth;
    }
  3. Click Publish.

Now, when users click an anchor link, the page will scroll smoothly to the target.

Tip: Learn more about customizing your site’s appearance with our guide on the best way to add CSS in WordPress.

Troubleshooting Common Issues

Anchor links are simple, but sometimes things go wrong. Here’s how to fix common problems.

Anchor Link Not Working

  • Check the ID spelling: Anchor IDs are case-sensitive. #Contact is different from #contact.
  • No spaces or special characters: Use only letters, numbers, and hyphens.
  • Ensure the anchor exists: If you delete a section, remove or update any links to it.

Link Jumps Too Far or Too Short

This often happens due to fixed headers (like a sticky navigation bar) covering part of the content.

Solution: Add a small CSS offset:

.anchor-offset {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}

Then wrap your anchor point like this:
<span class="anchor-offset" id="features"></span>

Anchor Links Not Working on Mobile

Some mobile themes or plugins interfere with anchor behavior. Test on multiple devices and consider disabling conflicting plugins.

Conclusion

Creating anchor links in WordPress is a simple yet powerful way to improve navigation and user experience. Whether you’re writing a long guide or building a landing page, anchor links help visitors find what they need faster.

You now know how to:

  • Add anchor points using the Block or Classic Editor
  • Link to those anchors from text, buttons, or menus
  • Test and troubleshoot your links
  • Enhance them with smooth scrolling and offsets

Best of all, you did it without installing any plugins. WordPress gives you everything you need to create professional, user-friendly pages.

Ready to take your site further? Explore how to create a WordPress theme with Elementor for even more design control.