How to Create Anchor Links in WordPress Without Plugins

Add an anchor to a heading

1. Edit the WordPress post or page that contains the section you want to link to.
2. Select the Heading block for that section. Add one if needed.
3. Open the block settings sidebar using the Settings button if it is hidden, then expand Advanced.
4. Enter a short identifier, such as shipping-info, in the HTML Anchor field. Do not include the # symbol.
5. Save or update the page.

HTML anchors must start with a letter, be unique on the page, and contain no spaces. Lowercase words separated by hyphens, such as shipping-info, are easy to read and remember. Underscores, periods, and colons are also supported.

You can also create anchors on other WordPress blocks that provide an HTML Anchor field under Advanced. The Heading block is usually the most useful destination, but it is not the only option.

Create a link to that heading

1. Highlight the text you want readers to click, such as Jump to shipping information.
2. Choose the link button in the block toolbar.
3. Enter #shipping-info as the destination and apply the link.
4. Save the page and test the link on the published page.

The # tells the browser to look for a matching anchor on the current page. The anchor name must match exactly, including capitalization.

Make a simple table of contents

For a long tutorial, add HTML anchors to its main headings, then place a list of links near the beginning of the page. If you have headings with the anchors overview and common-questions, a basic table of contents looks like this:

<ul>
  <li><a href="#overview">Overview</a></li>
  <li><a href="#common-questions">Common questions</a></li>
</ul>

In the WordPress block editor, you can create the same structure with a List block and use its normal link controls. No extra plugin is needed.

Link to an anchor on another page

To send someone directly to a section of a different page, append the anchor to that page's URL. For example:

https://example.com/faq/#shipping-info

This works for links in other posts, navigation menus, or messages, as long as the destination page contains an element with that exact anchor.

To add a jump link to a classic WordPress menu, go to Appearance → Menus, add a Custom Link using the destination page URL with its #shipping-info anchor, then save the menu. HoverCraft displays these links through its menu locations.

Use HTML when you need more control

The built-in block setting is usually the easiest method. If you're editing HTML directly, an anchor is simply an element with an id, and the link points to that ID:

<h2 id="shipping-info">Shipping information</h2>
<a href="#shipping-info">Jump to shipping information</a>

Use a Custom HTML block if you need to insert raw HTML in the WordPress editor. Do not paste HTML tags into an ordinary paragraph expecting them to become markup.

When an anchor link does not work

• Check the spelling: #shipping-info must match shipping-info, including its case.
• Check for duplicates: Two elements with the same ID can make jumps unpredictable.
• Check the page URL: For a link to another page, include the full destination path before the #.
• Check the header: A sticky header can cover the destination heading even when the jump itself works. Adjust the scroll offset in your site's CSS if needed.

If a sticky header covers anchored headings, this CSS can leave space above them when the browser jumps. Adjust 6rem to match the header height:

h2[id] { scroll-margin-top: 6rem; }

For the CSS property, see MDN's scroll-margin-top reference.

For the WordPress-specific editor controls and additional examples, see the official WordPress Page Jumps guide.