How To Add anchor links wordpress: Your 2026 Guide

You land on a long WordPress page, know the answer is somewhere below, and still spend too much time scrolling to find it. That’s the moment anchor links earn their keep.

For teams building with Elementor, this gets more frustrating fast. The idea is simple, but real-world pages add sticky headers, nested containers, menu widgets, and section IDs that break when someone duplicates a template. Most anchor links WordPress tutorials stop at “add an ID and link to it.” That’s not enough when you’re building production sites.

Why Anchor Links Are Your Secret UX and SEO Weapon

Anchor links move visitors to a specific section on the same page, or to a section on another page, by pointing to an element ID. In practice, they do two jobs at once. They clean up navigation for humans, and they help search engines read page structure more clearly when used with intent.

On long pages, they reduce friction. FAQs, service pages, documentation, comparison pages, and single-page sites benefit the most because visitors rarely read those from top to bottom. They scan, jump, confirm, and act.

Where anchor links actually help

The strongest use case is long-form content. Research suggests anchor links should be reserved for pages over 500-1000 words, while using them on very short content can signal weak organization. On pages where you do use them, a return-to-top link matters because user abandonment on long content rises by 35% when people have to scroll back manually, according to Themeisle’s anchor links guidance.

That lines up with what works in live builds. If a page has enough depth that users ask the same “where is that section?” question, it needs jump links. If the page is short, anchor links usually add clutter instead of clarity.

A related point gets missed often. Anchor links aren’t a replacement for a good internal linking strategy. They work best when the page already has a clear hierarchy and useful supporting links. If you want a stronger framework for that, this guide on why internal links are important for SEO is worth reading.

Practical rule: Use anchor links when the page is long enough to justify sectional navigation, not as decoration.

Why Elementor users need a different approach

Most tutorials assume Gutenberg or the old Classic Editor. Elementor changes the workflow because you’re often linking to containers, widgets, tabs, accordions, and nav items instead of plain headings. That’s why anchor links WordPress setups can feel easy on a demo page and unreliable on a real client site.

This matters even more on one-page builds, landing pages, and microsites, where every menu click needs to land cleanly. If that’s your layout pattern, a single-page website in WordPress is where anchor links stop being optional and become part of the page architecture.

How to Create Anchor Points in WordPress Editors

An anchor link only works if the destination exists first. In WordPress, that destination is usually an ID added to a heading, section, container, or widget.

The naming rules aren’t flexible. IDs must be unique on the page, they can’t contain spaces, and they should be descriptive. Hostinger’s WordPress tutorial notes that semantic IDs such as elementor-setup instead of section-2 can improve crawlability by an estimated 15-20% in structured content audits because the ID gives clearer destination context to search engines. Read the full implementation notes in Hostinger’s anchor link tutorial.

Gutenberg editor

Gutenberg is the cleanest place to add anchor points.

1. Add or select the heading block you want people to jump to.
2. Open the block settings in the right sidebar.
3. Expand Advanced.
4. Find HTML Anchor.
5. Enter a clean ID like pricing, faq-shipping, or contact-form.

Use short, descriptive names. Don’t use section1, block-4, or anything tied to visual order. Content order changes all the time. Your ID should still make sense after edits.

A few naming examples:

• Good: pricing-plans
• Good: seo-audit-checklist
• Bad: Pricing Plans
• Bad: section-2
• Bad: my cool section

Classic Editor

If you still maintain older sites, the Classic Editor needs a manual HTML step.

Open the Text tab and add an ID directly to the target element. A heading might look like this:

<h2 id="services">Services</h2>

That’s it. The ID becomes the anchor point. The link that points to it comes later.

The mistake I see most on legacy sites is attaching the ID to the wrong element. If the section starts with a heading, put the ID on the heading. If the page uses a wrapper div before the heading, you can put the ID there instead, but test the click behavior afterward because wrappers sometimes create awkward landing positions.

Keep the anchor on the element that best represents the section start. That makes debugging easier later.

Elementor

The difficulty often arises because Elementor provides several valid locations to set the target.

The most reliable method is using the CSS ID field on the section, container, or widget you want to land on.

1. Edit the page with Elementor.
2. Click the target section, container, or widget.
3. Open the Advanced tab.
4. Find CSS ID.
5. Enter the ID without the # symbol. Example: testimonials.

That makes the element available as an anchor target.

This approach works well for:

• Containers and sections when the whole block is the destination
• Heading widgets when the heading starts the section
• Form widgets when you want menu clicks to jump directly to contact or quote forms
• FAQ or accordion wrappers when the section is interactive and not built around a single heading

A practical Elementor tip: put the ID on the highest meaningful wrapper, not on a nested inner widget unless you have a specific reason. Nested IDs often create odd offsets when the design changes.

Here’s a quick visual walk-through if you prefer to see the flow in action:

Naming rules that save time later

Developers skip this because it looks minor. It isn’t.

Use this naming checklist every time:

• Unique on the page: Never repeat the same ID twice.
• No spaces: Use hyphens or underscores.
• Descriptive names: case-studies beats box-3.
• Stable labels: Name for content meaning, not page position.
• Lowercase by default: It avoids avoidable mismatch issues.

If you duplicate Elementor sections across templates, keep a simple ID naming habit. Reused template parts are a common source of duplicate IDs, especially on landing pages with copied hero, pricing, and FAQ blocks.

Building the Links That Make Your Anchors Work

Once the target exists, the clickable part is simple. The link points to #your-id.

If the destination ID is pricing, the link is #pricing. That’s the whole mechanic behind anchor links WordPress uses on the front end.

In-page links inside content

In Gutenberg or Elementor text editors, highlight the text you want users to click, open the link tool, and enter the anchor path with a hash.

Examples:

• #pricing
• #faq
• #contact

If you’re linking to a section on another page, use the full page path plus the ID fragment:

• /services/#seo-audit
• /about/#team

The cleanest anchors are descriptive, not generic. If you want a refresher on markup patterns and how internal links behave in plain HTML, OneNine’s guide to internal linking in HTML is a useful technical reference.

Menu links in WordPress navigation

This is the version people search for most, because it’s less obvious than in-text links.

To add an anchor link to your main menu:

1. Go to Appearance > Menus.
2. Add a Custom Link.
3. In the URL field, enter either:
   • #contact for a section on the current page
   • /homepage/#contact for a section on a specific page
4. In the Link Text field, add the label users will see.
5. Save the menu.

If you’re using Elementor’s Nav Menu widget, the link itself still follows the same rule. The difference is where you manage the menu display, not how the anchor URL works.

What works and what usually fails

The common failures are predictable:

• Using the # in the ID field: The ID should be contact, not #contact.
• Mismatch between link and ID: #Contact and contact may not behave consistently across setups.
• Linking to a section that loads dynamically: If the section appears late, test carefully.
• Using full raw URLs everywhere: Internal anchor links are cleaner when they stay readable and intentional.

If an anchor link fails, check the ID spelling first. Most “mystery bugs” are just a mismatch between the link fragment and the target ID.

Advanced Anchor Link Techniques and Enhancements

Basic jump links work, but default behavior can feel rough on polished sites. Two fixes make the biggest difference in Elementor builds. Smooth scrolling makes movement feel deliberate. Offset control stops sticky headers from hiding the content users clicked to see.

This is the part most general tutorials skip, and it’s exactly where page builder users lose time.

Add smooth scrolling

Browsers can handle smooth scrolling with a lightweight CSS rule:

html {
  scroll-behavior: smooth;
}

Add it in Appearance > Customize > Additional CSS, or in your theme or child theme stylesheet if that’s how you manage frontend styles.

This improves the feel of jump links without adding a separate plugin. That matters on Elementor sites because plugin creep adds up quickly. If a native CSS solution does the job, use it.

A quick caution. Smooth scroll can appear inconsistent if another script is trying to control scrolling. If you already use motion effects, popup triggers, or custom navigation scripts, test the page after adding the CSS.

Fix sticky header overlap

This is the headache.

You click a menu item, the page scrolls, and the heading lands under the sticky header. The link technically works, but the user can’t see the section title. That’s the bug behind a lot of “anchor links not working” complaints.

The problem is common enough that Elementor-specific frustration shows up repeatedly in community discussions. A roundup of tutorial gaps notes Reddit threads in r/Elementor from 2025 with over 200 upvotes on posts about anchor links not scrolling properly, along with unresolved Stack Overflow questions from 2024-2026 around sticky header offsets and dynamic content. That summary is cited in this WPBakery article discussing anchor link gaps for page builder users.

The cleanest fix is scroll-margin-top.

Add this CSS to the element you’re targeting, or to a class used by anchored sections:

.anchor-target {
  scroll-margin-top: 100px;
}

Then apply the class anchor-target to sections that need the offset.

If you know your sticky header height, use that value. If the header changes size across devices, use media queries.

Example:

.anchor-target {
  scroll-margin-top: 90px;
}

@media (max-width: 767px) {
  .anchor-target {
    scroll-margin-top: 70px;
  }
}

Elementor-specific fixes that hold up

On real Elementor sites, these patterns work best:

• Put the ID on the container, not on a tiny inner widget when the whole section is the target.
• Apply scroll-margin-top to the same target element or a consistent class used across anchored sections.
• Test on tablet and mobile because sticky headers often shrink or change behavior.
• Check motion settings and custom scripts if the page jumps twice or lands inconsistently.

Don’t fight the sticky header with random spacer widgets. Fix the scroll target instead.

If you need script-based control because the layout is heavily customized, a method like element.scrollIntoView({block: 'start', behavior: 'smooth'}) can help, but CSS should be your first choice. It’s easier to maintain and less likely to break when the page structure changes.

SEO and Accessibility Best Practices for Anchor Links

Most anchor link problems aren’t technical. They’re editorial. The links work, but the text is vague, repetitive, or useless to both readers and crawlers.

The biggest fix is choosing better anchor text.

Use descriptive anchor text

For SEO, anchor text distribution matters. Best practices suggest 20–40% branded anchors, 25–40% partial match anchors, and less than 10% exact match anchors. Generic text like “click here” should be under 2%. The same guidance also recommends descriptive link text instead of naked URLs because anchor text acts as a ranking signal about the value of the linked content, based on WP Statistics’ anchor text best practices.

That doesn’t mean you should force keyword-heavy phrasing into every link. It means the link should tell users what happens next.

Better examples:

• Good: Check pricing plans
• Good: Jump to refund policy
• Good: Read the accessibility checklist
• Weak: Click here
• Weak: More
• Weak: https://example.com/page-name

Accessibility is part of the same discipline

Clear anchor text helps screen reader users, keyboard users, and anyone scanning quickly. “Click here” gives no context. “Jump to shipping options” does.

Anchor links also support better keyboard navigation on long pages because users can move through meaningful destinations without endless tabbing or scrolling. If accessibility work is already on your roadmap, this website accessibility checklist is a useful companion for reviewing the rest of the page beyond navigation.

The best anchor text reads well out of context. If a user only hears the link label, they should still know where it goes.

Keep hierarchy aligned

Anchor links perform best when they follow the page’s visible structure. If your links point to arbitrary blocks while the headings suggest a different order, users feel the inconsistency immediately.

A practical standard:

• Link to real sections with clear headings
• Keep labels close to the destination topic
• Avoid stuffing exact-match phrases into every jump link
• Use generic anchors sparingly

That balance improves both findability and readability.

Troubleshooting Common WordPress Anchor Link Issues

When anchor links WordPress setups fail, the cause is usually small and fixable. Use this quick guide to diagnose the issue fast.

Anchor Link Troubleshooting Quick Guide

Fast checks before you blame Elementor

Run these in order:

• Inspect the target first: Make sure the ID is still there after template edits.
• Test without the menu: Create a temporary text link in the page body to isolate whether the issue is the anchor or the navigation widget.
• Check for broken internal links elsewhere: If the page has broader linking issues, clean those up too. This guide on how to fix broken links in WordPress is a solid maintenance reference.
• Clear caching layers: Cached HTML can preserve old IDs or old menu links longer than expected.

If you’re debugging a client site, I’d start with duplicate IDs and sticky header offset before anything else. Those two cause a disproportionate share of the pain.

Start Using Anchor Links Today

Anchor links are one of the simplest upgrades you can make to a WordPress page, but only if you build them with intent. The basics are easy. The difference between “working” and “working well” comes from good IDs, clear link text, reliable menu setup, and a proper sticky-header offset.

If your Elementor pages are long, section-heavy, or built as one-page experiences, anchor links aren’t a nice extra. They’re part of the user journey.

If you build with Elementor regularly, Exclusive Addons is worth a look. It extends Elementor with a large set of widgets, templates, and builder features that help teams ship more polished layouts without bloating the editing workflow. For freelancers and agencies managing complex page structures, that flexibility makes anchor-driven pages much easier to design and maintain.