WordPress Anchor Links: How to Add and Fix Them

A WordPress anchor link is a link that jumps to a specific spot on the same page instead of loading a new one. You build it from two parts that have to match. First you give a target heading a short id, then you point a link at that id with a hash in front of it, like #pricing. When someone clicks the link, the browser scrolls straight to the heading that carries that id.

The block editor handles both parts on its own, so most sites can add anchor links in a couple of minutes without a single plugin. You type a word into the heading’s HTML Anchor field, then link any text or button to that word. That is the whole mechanism, and it works the same in a blog post, a page, or a long sales page.

Anchor links earn their keep on long content. They power a clickable table of contents at the top of a guide, and they let a one-page site scroll between sections from the menu. They also make it easy to share a link that lands a reader on the exact paragraph you mean. Google sometimes turns those anchored sections into jump-to links right under your search result, which makes your listing take up more room.

Two things trip people up once the basics work. A fixed header can sit on top of the heading you jump to and hide it, and a small mismatch between the id and the link can stop the jump from happening at all. This guide covers the plugin-free block editor method, links that reach a section on another page, and the exact CSS and checks that fix both of those headaches.

An anchor link is made of a target and a pointer. The target is an id you attach to an element on the page, usually a heading, written as id=”pricing”. The pointer is a normal link whose address is that same id with a hash in front, written as href=”#pricing”. Click the pointer and the page scrolls the target into view without a reload.

You have seen anchor links even if you never built one. The contents box at the top of a long tutorial is a stack of anchor links, one per section. A one-page business site that scrolls from About to Services to Contact uses them behind every menu item. A support reply that says “see the refunds section” and drops you right there is doing the same trick.

The id has to be unique on the page and it should stay simple. Use lowercase letters, swap spaces for hyphens, and skip punctuation, so pricing-table works while Pricing Table or pricing table will cause trouble later. A short, readable id also makes a shared link easier to trust, since #refund-policy tells a reader where they are about to land.

Anchor links help readers more than they help rankings, and that is fine. They keep people moving through a long page instead of bouncing, and a clear structure of anchored sections is exactly what a WordPress table of contents is built from. Treat them as a navigation and usability tool first, and let the search benefits come as a bonus.

Anchor links pay off on long, structured pages where scrolling becomes a chore, and they get in the way on short ones. A guide with several sections, a one-page business site, a documentation page, or a long sales page all give readers a reason to jump ahead, so a contents list of anchor links saves them real effort. The longer and more sectioned the page, the more the jumps help.

They also shine for support and sharing. When you answer a question with “the shipping section explains this” and the link drops the reader right on that heading, you save them a scroll and a squint. The same goes for a teammate reviewing a draft, since a link to #step-four beats telling them to look about two thirds of the way down.

Short content is where anchor links turn into clutter. A contents box on a four-hundred-word post looks odd and helps nobody, because the whole thing already fits on one screen. Anchoring every tiny subheading has the same effect in reverse, since a wall of jump targets makes the page feel busier rather than clearer, so reserve anchors for sections a reader would genuinely want to skip to.

One trap is worth calling out. Anchor links are not a substitute for real pages, so if a section is big enough to rank on its own and deserves its own address, give it a full page rather than burying it behind a hash. A good rule is to reach for anchors once a page runs long enough that scrolling feels like work, keep the ids stable after you publish, and let each major topic keep its own URL when it earns one.

In the block editor you add an anchor without any plugin, straight from the block settings. Select the heading you want to jump to, open the Advanced panel in the settings sidebar on the right, and type a short word into the HTML Anchor field. Then select the text or button that should do the jumping and give it a link that starts with a hash. The two halves connect the moment you save.

Here is the full sequence for a heading you want people to reach from a contents list or a button.

• Click the target heading, then open Advanced in the settings sidebar and type a word like pricing into the HTML Anchor field.
• Select the link text somewhere higher up the page, click the link button, and enter #pricing as the address.
• Save or update the page, open it on the front end, and click the link to confirm it scrolls to the right heading.

Almost every block carries that HTML Anchor field, not only headings, so you can point a link at an image, a group, or a call-to-action section the same way. If you want the jump to fire from a styled button that matches your design, a block plugin like DigiBlocks gives you heading and button blocks with the same HTML Anchor field under Advanced, so the buttons look like part of the page rather than a plain text link.

The Classic Editor can do this too, it just shows you the raw markup. Switch to the Text view, add id=”pricing” to the opening heading tag, then create a normal link that points to #pricing. The idea never changes between editors, only the screen you type it into.

To jump to a section on a different page, use that page’s full web address followed by the hash and the id, like https://example.com/services/#audits. The link carries the reader to the other page and then scrolls to the heading that owns the id. The target page still needs the id set on that heading, exactly the way you would set it for a same-page jump.

This pattern is handy when a menu or a button on one page needs to reach a spot deep inside another. A “pricing” link in your header can send visitors from any page straight to the plans block on your homepage. A button in a blog post can drop readers on the sign-up section of a landing page without making them hunt for it.

You can wire the same address into your navigation menu. Go to Appearance, then Menus, add a Custom Link, and paste the full URL with the hash and id into the URL box. For a section on the current page a bare #audits is enough, while a section on another page needs the whole address so the browser knows where to travel first.

One caution saves a lot of confusion here. If you ever change the id on the target heading, every cross-page link that used the old id will quietly stop scrolling and just land at the top of the page. It is worth keeping a short note of the ids you rely on, the same way you would track the anchors behind your internal linking, so a small edit does not break a menu you forgot about.

Two short lines of CSS fix the two most common anchor complaints, and you add both in the same place. The first makes the jump glide instead of snapping, and the second stops a fixed header from covering the heading you land on. In your dashboard go to Appearance, then Customize, then Additional CSS, which is the safest spot to keep small tweaks like these. You can also read more on where to add custom CSS in WordPress if you want a permanent home for it.

For a smooth glide instead of an instant jump, add this one rule and you are done, html { scroll-behavior: smooth; }. It tells the browser to animate the scroll for every anchor link on the site at once, so you never touch it again.

The offset fix matters even more, because a sticky header is the reason so many anchor links look broken. When the browser jumps to a heading, it puts that heading right at the very top of the screen, which is precisely where your fixed header is already sitting, so the header hides it. Add scroll-margin-top: 100px; to your headings and the browser leaves that much room above them, dropping each one comfortably below the bar.

Set the number a little higher than your header is tall. Measure the header height in your browser’s inspector, then use a value with some breathing room, so a 70px header pairs well with a value around 90px or 100px. If your header shrinks on mobile, you can give small screens their own smaller value inside a media query, and the jump will feel right on a phone as well as a laptop.

Anchor links usually fail for a handful of plain reasons, and the first one is a mismatch. The id on the heading and the address on the link have to be identical, and they are case sensitive, so #Pricing will never find id=”pricing”. A stray space, a capital letter, or a typo is enough to break the jump, so the fastest fix is to read both spellings side by side and make them match character for character.

The next suspect is the sticky header from the section above. If the link does scroll but the heading ends up tucked under your menu bar, the link is working and the offset is not, so the scroll-margin-top rule is what you need rather than a rewrite of the anchor. It is easy to mistake a hidden heading for a dead link, so check whether the page moved at all before you assume the id is wrong.

Caching causes the sneakiest version of this problem. If you added or renamed an id but the jump still fails, your caching plugin or your host might be serving an older copy of the page without the new id in it. Clear the site cache, and clear your browser cache too, then load the page again in a private window to see the fresh version rather than a stored one.

A page builder or a script can interfere as well. Some builders add their own smooth-scroll handling that clashes with the browser, and a plugin that hijacks clicks can swallow the jump before it happens. If a link refuses to cooperate, try it with your builder’s scroll option turned off, or test the page with other plugins paused, so you can see which piece is stepping on the anchor.

Anchor links are one of those small skills that quietly make a whole site feel easier to use. Once you know that an id on a heading and a hash on a link are all it takes, you start reaching for them on long guides, one-page sites, and any spot where a reader would rather jump than scroll. The block editor gives you the field for free, and the two CSS rules turn a rough jump into a smooth, well-placed one.

Build a couple of anchored sections on your next long post and see how readers move through it. Pair them with a clear table of contents at the top, keep your ids simple and consistent after you publish, and a reader who wants your pricing can reach it in one click instead of a long scroll.