Kadence - Creating anchor links

Anchor links are a great way to improve navigation on your website, allowing visitors to jump to specific sections of a page with just a click. Whether you want to add anchor links to your navigation menu or within a page, this tutorial will walk you through the steps to set them up easily in WordPress. Let’s get started!

Create an anchor link

  1. Open the page in the Block Editor where you want to create the anchor link.
  2. Locate the section you want to link to and select the Row Layout block for that area.
  3. In the settings panel, switch to the Advanced tab and expand the Advanced menu.
  4. Find the HTML Anchor field and enter your desired anchor text.

Tips:

  • Anchors can contain any word or phrase, but if they contain multiple words, use dashes between each word (e.g. your-anchor-name).
  • Anchors must be unique. If you set up multiple anchors on a page, make sure they are all different.
  • It's possible to add an anchor to other block types as well, not just Row Layout blocks. Heading blocks, Paragraph blocks, and more all support HTML anchors.

Linking to an anchor in a navigation menu

Now that you've created an anchor, it's time to link to it!

  1. Navigate to Appearance > Menus and open the menu where you want to add the anchor link.
  2. On the left side of the Menus screen, expand the Custom Links tab.
  3. In the URL field, enter your website URL followed by # and your anchor name. Examples:
    • https://mywebsite.com/#anchor
    • https://mywebsite.com/#my-anchor-name
  4. In the Link Text field, enter the text you want to display for the link.
  5. Click Add to Menu, then save your changes.

Linking to an anchor on the same page

You can also insert an anchor link on a page. For example, on the Resources page in our Magnolia theme, the buttons under "Browse" link to various anchors on the page.

First, follow the same "Create an Anchor Link" steps above.

  1. Open the page in the Block Editor where you want to add the anchor link (the same page where you created the anchor).
  2. Choose how you want to link to the anchor:
    • For a button link, add a Button block.
    • For a text link, add a Paragraph block and highlight the text you want to link.
  3. In the URL field, enter # followed by your anchor name. If linking to an anchor on the same page, do not include your website URL—just the anchor itself. Examples:
    • #anchor
    • #my-anchor-name
  4. Publish or update your page to save the changes.

Linking to an anchor on a different page

Follow the same steps from the previous section but for step 3, enter the specific page URL before the anchor.

For example, if you want to link to an anchor that is located on your About page, it might look like this:

  • https://mywebsite.com/about/#anchor
  • https://mywebsite.com/about/#my-anchor-name