Skip to content

Knowledgebase

Creating jump links with HTML anchors in WordPress

wordpress, development

A jump link sends visitors directly to a section of a page. It is useful for long guides, pricing explanations and contact sections, and can be created with an HTML anchor on a supported block without writing a script.

01 Choose a stable destination

Pick a heading or section that clearly identifies the destination. Use a short anchor such as delivery-options, with no spaces, and keep it unique within that page. Treat the anchor as part of a public link: changing it later can break links already shared in messages or other articles.

02 Add the anchor and link

  1. Select the destination Heading or another block that supports an HTML anchor.
  2. Open its block settings, expand Advanced and enter delivery-options in HTML Anchor. Do not include the leading hash in this field.
  3. Select the text or button that should lead to the section and open its link control.
  4. For the same page, enter #delivery-options. From another page, use the complete destination such as https://example.com/services/#delivery-options.
  5. Save the content and test the link on the public page.

03 Check the landing position

Verify that the correct section comes into view and its heading remains readable. A fixed header can cover the top of the destination; if that happens, ask your designer to adjust the theme's anchor offset rather than inserting several blank paragraphs above the heading.

Use descriptive link text such as View delivery options so readers know what will happen. A same-page jump normally belongs in the current tab. Test keyboard navigation as well as clicking, especially when the destination sits inside a complex layout.

04 Example: connect a contents link to a stable WordPress heading

For a delivery guide, enter delivery-options in the destination Heading block’s HTML Anchor field and link the contents text to #delivery-options. The following markup shows the relationship the editor creates; you can use the block controls rather than manually replacing block HTML.

Code or configuration example
<p><a href="#delivery-options">View delivery options</a></p>
<h2 id="delivery-options">Delivery options</h2>

The anchor field does not include the hash, while the same-page link does. From another page, use the full published URL followed by that anchor. Keep the identifier unique and stable even if you later improve the visible heading’s wording.

Expected result: The contents link lands on the intended section on desktop and mobile. Keyboard users can follow it, a fixed header does not hide the heading, and copied sections do not introduce a second identical ID.

Why does a jump link miss its intended destination?

If nothing happens, compare the anchor and link character for character, including case and punctuation. Check for duplicated anchors created by copying a section. If the link works while editing but fails on another page, confirm that you included the correct published URL before the hash. Renaming a heading's visible text does not require changing a stable anchor unless the destination itself has changed.

Was this answer helpful?

Need a little more help?

Our support team can help you find the next step.

Contact support