To create an anchor link in WordPress, assign an HTML Anchor (an ID without the #) to the block you want visitors to reach, then link to that ID with #your-anchor-id. For a link from another page, use the page URL followed by the hash, such as https://example.com/page/#your-anchor-id.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
The block editor supports anchors on headings and many other blocks. After saving, test the link on the public page—not only inside the editor—to confirm that it lands on the intended section.
As an Amazon Associate I earn from qualifying purchases.
Free tools Windows power users keep installed
One-click scans. No signup required.
What an anchor link does in WordPress
An anchor link, also called a jump link or page jump, moves a visitor directly to a specific point in a page instead of leaving them at the top. The destination is identified by an HTML id. WordPress exposes that ID through the block editor’s HTML Anchor field.
A typical use is a long video-game guide with a contents list. A reader can select “Boss strategies” and jump to the heading carrying the matching anchor. Anchors are also useful for FAQ sections, walkthrough chapters, update notes, forms, and calls to action placed lower on a page.
#1 Best Overall
| Link type | What you enter as the link | Where it works |
|---|---|---|
| Same-page anchor | #boss-strategies |
From another link on the current page |
| Cross-page anchor | https://example.com/guide/#boss-strategies |
From any page or site that can link to the destination URL |
| Anchor target | boss-strategies in the HTML Anchor field |
The block visitors should reach |
The hash belongs in the link, not in the target block’s HTML Anchor field. The target value and the text after the hash must match exactly.
Create an anchor on a block in the WordPress block editor
1. Select the destination block
Open the page or post in the block editor and select the block you want visitors to see after they click. A heading is the clearest destination, but the target can be another block when that better matches the action—for example, a paragraph introducing a walkthrough, an image, a group containing a build list, or a button area.
Recommended Free Tools
2. Open the Advanced settings
With the block selected, open the settings sidebar and expand Advanced. Locate the field labeled HTML Anchor. This field stores the block’s HTML ID.
3. Enter an ID without the hash
Type an anchor such as boss-strategies. Do not type #boss-strategies in this field; the hash is added when you create the link. Use a value that is unique on the page.
For reliable IDs, use letters, numbers, and hyphens. Avoid spaces and special characters. Short, descriptive names are easier to recognize in the editor and easier to maintain when the page changes.
- Good:
boss-strategies - Good:
chapter-3-loadout - Avoid:
Boss Strategieswith a space - Avoid:
boss_strategiesor punctuation when a simple hyphenated ID will do
4. Keep every ID unique
An ID should identify one destination. If two blocks use boss-strategies, a browser cannot provide a dependable single target for that name. Before adding an anchor, check the page for an existing ID and choose a different, descriptive value if necessary.
Link text, images, and buttons to the anchor
Link text in a paragraph or heading
- Select the words that should be clickable, such as Jump to boss strategies.
- Use the block toolbar’s link control.
- Enter the hash and the exact ID:
#boss-strategies. - Apply the link, then save or update the page.
The link text should describe the destination. “Boss strategies” tells a keyboard or screen-reader user what the jump does; “click here” does not.
Images
Select an image, activate its link control, and enter the same hash form, such as #chapter-3-loadout. The image then acts as the jump link while the destination remains the block carrying that ID.
Buttons
Select a Button block and set its link to an anchor such as #download-checklist. The button itself is the source link; assign the ID to the block that contains the checklist or other destination content. Other blocks, including paragraphs, groups, and images, expose the HTML Anchor field under Advanced when anchor support is available.
Link to an anchor from another WordPress page
Cross-page links use the same ID but add the destination page’s full URL before the hash. If the target page is https://example.com/complete-walkthrough/ and the block’s ID is boss-strategies, enter:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →https://example.com/complete-walkthrough/#boss-strategies
When a visitor follows that URL, WordPress loads the page and the browser moves to the element with the matching ID. The destination page must be published or otherwise accessible to the visitor, and the ID must remain unchanged for existing links to keep working.
Save and test the jump link on the front end
- Save a draft or select Update for a published page.
- Open the public page, preferably in a new tab or logged-out window.
- Click the anchor link from the same page, or paste the full cross-page URL into the address bar.
- Confirm that the intended block is visible and that the address bar contains the expected hash.
- Test every contents-list entry, image link, or button that uses an anchor.
Testing the public page matters because an editor view can hide problems that appear after WordPress renders the final markup. A duplicate ID, a typo, an unsaved change, or a link pointing to the wrong page can all make a jump appear broken.
Choose useful anchor names for long pages
Anchor IDs are part of a page’s linking structure, so name them for the content rather than for its visual position. A heading that may move from section two to section three should keep a stable name such as controller-settings, not section-2.
| Destination content | Example ID | Example link |
|---|---|---|
| Introduction to a game mechanic | how-parrying-works |
#how-parrying-works |
| Recommended equipment list | recommended-loadout |
#recommended-loadout |
| Chapter four walkthrough | chapter-4-walkthrough |
#chapter-4-walkthrough |
| Frequently asked questions | faq |
#faq |
Keep the spelling, capitalization, and punctuation consistent between the HTML Anchor field and every link that references it. Hyphenated lowercase IDs reduce accidental mismatches.
Rank #4
What to do when an anchor does not work
The link does nothing
- Confirm that the target field contains
boss-strategies, not#boss-strategies. - Confirm that the source link contains
#boss-strategies. - Check for spelling differences, extra spaces, or a second block using the same ID.
- Save or update the page again and retest the public URL.
The cross-page link opens the wrong page
Inspect the URL before the hash. It must be the exact page URL that contains the target block, followed by /#anchor-id in the documented form. A correct ID on the wrong page cannot reach the intended content.
The block editor reports invalid block content
Some WordPress guides report an “invalid block content” notice after an ID is added. This is a reported edge case rather than a guaranteed behavior. If it appears, follow the editor’s recovery options and consider converting the affected block to HTML to finish the edit, then review the rendered page and test the link. Preserve the original text before accepting a conversion so that you can restore it if the block changes unexpectedly.
The destination is hidden under a fixed header
An anchor can place the destination at the top edge of the viewport. If a site’s fixed header covers the heading, visitors may not immediately see the section they selected. Check the front-end result at desktop and mobile widths. The HTML Anchor field establishes the target; spacing and offset behavior are controlled by the site’s theme or custom CSS, not by the hash itself.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Anchor links versus skip links
A normal anchor is an author-created jump to a chosen block. A Skip to content link is an accessibility feature that lets keyboard users bypass repeated navigation and reach the main content.
Block themes can generate a skip link that targets the ID of the page’s MAIN element. If a block theme’s skip link does not appear, a theme-support discussion suggests adding wp--skip-link--target in the HTML Anchor field of a Group block. Treat that value as a theme-specific troubleshooting step: verify the result on the front end and make sure the target is the main content area, not an unrelated group.
Best Value
Skip-link implementation also involves WordPress functions. The function the_block_template_skip_link() is deprecated; developer documentation identifies wp_enqueue_block_template_skip_link() as its replacement. This is a theme-development concern rather than a requirement for ordinary page anchors.
Limitations with Query block pagination
The Query block’s pagination controls cannot be pointed at an anchor through the block’s standard settings. In other words, you cannot use the pagination panel to make each “next” or numbered result automatically append a chosen hash.
If a project requires pagination links to carry an anchor, it needs a custom implementation that edits the pagination link destinations, such as a script or theme-level modification. Treat that as development work: test it after WordPress, theme, and plugin updates, and verify that the modified links still preserve the correct page and query parameters.
Advanced block and theme considerations
Anchor support is provided by the block
The HTML Anchor control appears when a block supports anchors. WordPress block-support documentation describes the feature as a way to link directly to a block, with a field for the block ID and a copy-direct-link button. Block developers enable this support with anchor: true in the block’s supports configuration.
For a site editor, the practical result is simple: if a block does not show the HTML Anchor field, use a heading, group, paragraph, image, or other block that does, or ask the block developer whether anchor support is enabled. Do not assume that every custom block exposes the same controls.
Changing an ID can break incoming links
Once a published page has been linked from a contents list, another article, a message, or a bookmark, its anchor ID becomes part of those URLs. Renaming boss-strategies to boss-tactics requires updating every known link. If old URLs must continue to work, retain the old target where your page structure permits it or plan a deliberate redirect or compatibility solution at the site level.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Accessibility and usability checklist
- Use descriptive link text that names the destination.
- Keep the target ID unique and readable.
- Make sure the destination contains a meaningful heading or label, not an empty spacer.
- Test keyboard activation as well as mouse or touch activation.
- Check the jump at narrow and wide viewport sizes.
- Verify that a fixed header does not obscure the destination.
- Retest anchors after reorganizing blocks, changing templates, or replacing navigation.
Quick reference
| Task | Value or path |
|---|---|
| Set the destination | Select block → Settings sidebar → Advanced → HTML Anchor |
| Target value | my-section (no hash) |
| Same-page source link | #my-section |
| Cross-page source link | https://example.com/page/#my-section |
| Allowed naming style | Letters, numbers, and hyphens; no spaces or special characters |
| Final check | Save or update, open the front end, and click the link |
The Bottom Line
Set the destination block’s HTML Anchor to a unique ID without #, link to it with #id (or the full page URL plus that hash), then test the saved page on the front end.
Quick Recap
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.
