Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To add an anchor link in WordPress, give the destination block a unique HTML Anchor ID, then link to that ID with a URL fragment. For example, set a heading’s anchor to pricing and link to #pricing. You can do this in the Block Editor without a plugin, and the same pattern works for links to sections on other pages.
What an anchor link does
An anchor link, also called a page jump or fragment link, takes a visitor to a particular element in a page. The target is an element with an HTML id, such as pricing; the fragment is the part after the hash in a URL, such as #pricing. The visible clickable words are the anchor text. For example, “See pricing” can be the anchor text, while pricing is the target ID.
- A normal internal link opens another page or post.
- A same-page anchor link points to a location in the current page, such as
#pricing. - A cross-page anchor link opens another page at a target, such as
/services/#pricing. - A table of contents is a group of anchor links, commonly pointing to headings.
Anchor links are useful in long tutorials, FAQs, service and product pages, documentation, and pages with pricing, contact, or booking sections. They also support “back to top” and “skip to” navigation. WordPress describes page jumps and cross-page anchors in its page-jumps guide.
Add an anchor in the WordPress Block Editor
Set the destination
- Open the post or page in the WordPress editor.
- Select the block visitors should reach. A Heading block is usually the clearest target.
- In the right-hand settings sidebar, open the Block tab and expand Advanced.
- Enter a short ID in HTML Anchor, such as
pricing. Do not include#in this field. - Update or publish the page.
The Heading block has an HTML Anchor field in Advanced settings; other blocks may expose the same setting. See WordPress’s Heading block documentation and Advanced settings overview.
#1 Best Overall
Choose a reliable ID
WordPress’s documented HTML Anchor field requires a unique value within the page, is case-sensitive, cannot contain spaces, and must start with a letter. It permits letters, numbers, hyphens, underscores, colons, and periods. Lowercase, hyphen-separated IDs are easy to read and maintain:
pricingcustomer-reviewsinstallation
Keep an ID stable after sharing its URL. Renaming it can break bookmarks and links from other pages or sites. WordPress explains the field’s syntax in its page-jumps documentation.
Link to the destination
- Select the text that should be clickable.
- Choose the link control in the block toolbar.
- Enter
#pricingand apply the link. - Update the page, then test the published page.
WordPress’s Link control supports same-page fragments such as #contact, as well as links on supported text, images, and buttons. The exact controls depend on the block; see WordPress’s link-editing guide.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Link to an anchor on another page
Put the destination page’s path before the fragment. For example, if the target ID pricing is on the Services page, link to:
/services/#pricing
A full URL also works, for example https://example.com/services/#pricing. For a site-wide navigation item that should reach a section of the homepage, use /#contact rather than just #contact. A fragment-only link refers to the current page, so it may work on the homepage but not from another page. The required fragment must match the target ID exactly. WordPress documents the cross-page pattern in its page-jumps guide.
Use anchors on buttons, images, and other blocks
A heading is not the only possible target. If a block offers Advanced → HTML Anchor, you can assign it an ID and link to that ID. Depending on block support, targets may include paragraphs, images, buttons, Cover blocks, Groups, or other layout blocks. WordPress’s Advanced settings guide describes the block-level setting, and the block-support reference explains that support depends on the block.
If the block you want does not have an HTML Anchor field, put the anchor on the nearest heading, wrap the content in a Group or another block that supports anchors, or add an ID in the block’s HTML. You can also use the page builder’s equivalent ID field. A plugin is only necessary if you need features or automation that the editor does not provide.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteIf an image is the clickable link, make sure its alternative text appropriately describes its purpose or information. The destination does not replace an accessible link label.
Add an anchor with HTML
When editing HTML directly, put an ID on a meaningful element and use that ID in the link:
<h2 id="installation">Installation</h2>
<a href="#installation">Jump to installation</a>You can target a section containing several elements instead:
<section id="contact">
<h2>Contact us</h2>
<p>Get in touch with our team.</p>
</section>For a back-to-top link, put an ID on a suitable element near the top of the page and link to it:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →<div id="top"></div>
<a href="#top">Back to top</a>Prefer an ID on an existing, meaningful element over obsolete <a name="..."> markup; WordPress’s documentation style guide recommends ID-based targets: Heading targets. After editing HTML, check the published page because a theme, builder, or sanitization setting may alter the markup.
Rank #4
Add anchor links to a navigation menu
Add a custom link to the menu and make its URL match the target’s location:
- For a menu shown on the same page as the target, use
#contact. - For a site-wide menu linking to a section on the homepage, use
/#contactor the full homepage URL followed by#contact.
Menu-editing screens vary between classic menus, block themes, and page builders. The key is to include the page path when the menu may be used from a different page.
Create a table of contents
Manual list
A manually created list gives you control and avoids a plugin, but you must update the links when headings or IDs change. For HTML, use a labeled navigation landmark:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →<nav aria-label="Table of contents">
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>Native WordPress block
WordPress developer documentation describes a native core/table-of-contents block that can generate links from headings and their anchor IDs. The documentation labels it experimental, so availability and behavior may vary with the WordPress version, editor build, theme, and whether experimental blocks are exposed. Check the Table of Contents block documentation for its current status.
Best Value
Plugin or page-builder widget
A plugin or builder widget can scan headings, build nested navigation, insert a TOC automatically, or provide sticky positioning and active-section highlighting. These features are useful when a site publishes many long pages or needs navigation beyond a simple list. They also add generated markup, styling, maintenance, and compatibility considerations. If your site already uses Elementor, its Table of Contents widget can generate heading navigation. For a page that only needs a few jumps, native anchors are usually simpler.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Add an anchor in Elementor
Elementor calls its target field CSS ID. Select the target widget, container, or section, open Advanced, and enter an ID such as pricing without the leading hash. In a text, button, or other link field, enter #pricing. Elementor’s instructions are in Create anchor links.
Other page builders may call the target field HTML ID, Anchor, Section ID, or Element ID. Use the builder’s target field without #, then use #id in the link.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteKeep jumps clear and accessible
- Use descriptive link text, such as “Jump to pricing,” rather than repeated “click here.”
- Keep the heading hierarchy logical, and make sure the destination is understandable when visitors arrive.
- Use a real link for navigation rather than a clickable
div. - For a table of contents, use a labeled
<nav>or verify that the block or plugin output is accessible. - Avoid unnecessary motion and ensure keyboard users can focus and activate links.
Headings help organize content and support readability and accessibility; WordPress discusses their role in its Heading block documentation. Anchor links are chiefly a navigation and usability feature; do not treat them as a guarantee of higher search rankings.
Fix common anchor-link problems
- The link changes the URL but does not jump: Compare the fragment and target ID character for character.
#pricewill not matchpricing. - The hash is in the wrong field: In WordPress’s HTML Anchor field enter
pricing; in the link field enter#pricing. - There are duplicate IDs: Each ID should identify only one element in the document. Search the rendered page HTML for repeated values and leave one target.
- The ID contains spaces or starts incorrectly: Replace spaces with hyphens and begin with a letter, following WordPress’s documented field rules.
- The menu works only on one page: A fragment-only URL targets the current page. Use the destination path, such as
/#contact, for a homepage section linked site-wide. - The target is hidden in a tab, accordion, popup, or dynamically loaded section: The browser may navigate to an element that is still hidden or was not present when the fragment was processed. Check the builder’s behavior and whether the content is open and loaded.
- The target is missing from the published page: Test the public page rather than relying only on the editor or preview. Inspect the rendered HTML or browser DOM to verify the expected ID survived.
- The page shows old markup: If a cache is serving an older version, clear the relevant cache and test again.
- The heading is behind a fixed header: Add a scroll offset as described below.
Keep the target visible below a fixed header
A fixed or sticky header can cover the heading after a jump. Add a CSS scroll margin to the relevant targets, adjusting the value to the header’s actual height and testing desktop and mobile layouts:
h2[id],
h3[id],
section[id] {
scroll-margin-top: 80px;
}The example uses 80px as a starting value, not a universal setting. If the theme already sets scroll-margin-top, avoid overriding it unnecessarily.
Should you use smooth scrolling or a plugin?
Smooth scrolling is optional
Anchor links work without animation. If you want smooth scrolling, a reduced-motion-aware rule is preferable:
Recommended Free Tools
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}Smooth movement is a styling choice, not a fix for mismatched IDs. Some visitors prefer reduced motion, and animation can make navigation feel slower.
Quick Recap
Choose the simplest method that meets the need
- Use native anchors for a handful of stable links on a standard Block Editor page.
- Use a manual TOC when you want precise control over a short list and can keep it in sync.
- Use the native TOC block if it is available and suitable in your installation, accounting for its documented experimental status.
- Use your existing page builder’s features when it already controls the page layout or you need its TOC widget.
- Consider a plugin when automatic insertion, sticky navigation, scrollspy, copyable heading links, or cross-editor support justifies the added dependency. Check that its output is accessible, compatible with your theme and builder, and does not create duplicate IDs.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
