Link to section in WordPress

Banner for tutorial on how to link to section in WordPress

Link to a section in WordPress allows to draw attention to specific page elements, and ultimately improve user experience on the page.

Easy navigation boosts SEO and improves user experience.

Having links to various pages help to navigate between pages. But, how to navigate between sections?

Luckily, we can use anchor links to achieve it.

In this article, you will learn how to create a link to another section on the page in your WordPress website.

Anchor link

An anchor link is an element of a web page that helps to create a link to another location on the same page.

The process of creating anchor links is mostly similar on how to add regular links in WordPress, but with a few little changes.

Add anchor link

WordPress makes it easy to add anchor links, without a need to install any new plugins.

To link to a specific section of a page, two (2) things are needed:

  1. Create anchor.
  2. Link to anchor.

Both these actions are possible to do in editor and menu.

In editor

The Block editor allows to create anchor (unique ID) for sections and elements on the page by providing simple options to add anchor links.

First, create an anchor for your section:

  1. In dashboard, open your page in the Block editor.
  2. Select the block you want to link to.
  3. Locate and open the Advanced section in the right sidebar.
  4. In HTML anchor field, enter a short and descriptive name. Use hyphens to separate multiple words. For example, collect-info.
Preview of the Advanced section in the right sidebar of the editor, with added anchor to the block.

Next, create a link to the anchor:

  1. In the Block editor, select text you want to use as a link.
  2. Click the Link icon.
  3. Inside the address bar, enter a hashtag followed by the anchor. For example, #collect-info.
  4. Click the Apply button to create a link.
Preview of creating an anchor link, using the Block editor.

To apply this method for an anchor on a different page you need to add the full URL first followed by the hashtag and anchor.

Also, make sure to have the forward slash at the end of the URL before the anchor.

Example of linking to section, located on a different page, using the Block editor in WordPress.

In menu

You can also link to a specific section of the page from your site menu.

Assuming the anchor created, using the method above, time to create a menu link to that anchor.

Use the Customizer to customize links in WordPress menu:

  1. In dashboard, go to Appearance → Customize.
  2. Click Menus link to open the Menus panel.
  3. Create a new menu or select the existing one.
  4. Click the Add Items button to open Custom Links options.
  5. Create a menu link to the anchor, using the same method as noted previously.
  6. Publish your changes when ready.
Preview of adding anchor link to menu in WordPress.

Remove anchor link

Removing the anchor link in WordPress is simple, and it requires the following two (2) steps:

  1. Remove the anchor from your section.
  2. Clear URL of the anchor link.

First, locate and select your section to remove the anchor, added to HTML anchor field in Advanced.

Preview of the Advanced section in the right sidebar of the editor, with selected anchor ready to be removed.

Then, locate and select your link to modify its URL by clicking on the Link icon again to preview link settings.

Preview of removing an anchor link, using the Block editor.

Conclusion

It’s important to have a user friendly WordPress site.

Thus, creating links to various sections on the page, or to a section on a separate page in WordPress, can help to improve user experience and to boost your SEO efforts.

Also, you can use professional WordPress themes to better represent your professionalism, having performant, accessible, and secure site.

Thank you for taking time to learn how to link to section in WordPress. Hopefully, this tutorial was useful for you.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.