How to Link to Page Content From a WordPress Navigation Menu

In this step-by-step guide, I’ll show you straightforward ways to set up such links in WordPress, plus all the common uses of what you can do with them. Let’s dive in and get started!

Your primer on anchor links

Just to make sure we all know what we’re talking about, here’s an example of a normal link (non-anchor one):

This link will take the reader to our hosting survey page – to the very start of the page, to be exact.

An alternative version of this link can be something like the following – the anchor link:

Please notice the #top-rated at the very end. This is the “anchor” that tells WordPress to take you to the section of the article that talks about the top WordPress hosts as voted by our survey respondents (you should check that out by the way).

With the definitions out of the way, let’s now talk how to add links like that to your navigation menus. There are two good methods to do that.

Before we begin: how to create an HTML anchor for the destination section

Before doing anything, make sure to create an HTML anchor for the section of a WordPress post or page that you intend to link to. An HTML anchor is the endpoint of an anchor link. This all sounds pretty fancy, but it’s actually pretty easy to set up.

You can create HTML anchors by opening a page or post for editing, then selecting any block you want. HTML anchors are traditionally attached to headings, but the WordPress block editor allows for HTML anchors on just about any content block, like photos, paragraphs, and lists.

For this tutorial, I’ll still stick with the standard of adding an HTML anchor to a heading, since that often makes the most sense.

1. Select the heading that you want to link to.
2. Click on the Block tab in the sidebar.
3. Scroll down to see the Advanced section and click into it.
4. Use the HTML Anchor field to add the anchor – type a memorable and relevant word or phrase without any spaces (dashes are allowed).

The anchor you set there becomes the specific identifier for that subhead within the article. In other words, if I want to link to the section from my example above then I can do that with the #what-is-a-static-wordpress-website anchor.

💡 Note: It’s required to have some sort of content already in the post or page you intend to link to. In addition, you must publish the post for the anchor link to work.

How to link to a section of a page from the navigation menu

What we’re going to achieve with the method described below is:

• add a new menu item to any of your menus in WordPress, and then
• link that item through an anchor link to an individual section of any post or page.

Your path to making this happen, however, will depend on the type of WordPress theme you’re using. There’s a lot going on under the hood with WordPress themes these days, but the details of it are not that crucial for what we want to achieve here. So let’s try to simplify the process as much as possible.

Go to your WordPress dashboard and check if you see a Menus section under Appearance, like so:

How to add anchor links to menus in classic WordPress themes

Here’s the step by step process:

1. Create an anchor link in the WordPress menu

Go to Appearance → Menus and pick a menu where you want to add the anchor link to.

Click on Custom Links. In the URL field, paste or type in the URL of the post or page you want to link.

That establishes a general hyperlink to a page or post. To make it an anchor link, go to the very end of the URL you just pasted. This is where you’ll add the HTML anchor created in the previous step. Simply add a “#” to the end of the URL, followed by the HTML anchor that you added in step one.

Like this: https://example.com/#html-anchor

Except you’ll replace example.com with your domain name, and the html-anchor text with whatever HTML anchor you made from before. For example, this can look like something like this:

💡 Note: Be sure to include a “/“ before the “#” if it’s not already provided.

2. Add the menu item to the menu

You now have an anchor link by using the Custom Links tool in the Menu section of WordPress.

Make sure you fill in the Link Text field so that the menu shows a relevant title for the menu link.

To place the anchor link into the menu itself, click on the Add To Menu button.

You should now see the Custom Link (also an anchor link) box included with any other tabs you have in your menu. You are welcome to click and drag to reorder the menu or place the new anchor link in a different place in the menu hierarchy.

Click the Save Menu button when you’re done.

How to add anchor links to menus in block themes

Note: skip this whole next section if you’ve managed to set up your anchor link through the method described above. In this case you can go straight to testing the link.

First off, consider yourself lucky! Not seeing the Menus section under Appearance means that your site is running on a modern “block theme!”

1. Enter the site editor

Instead of the Menus section, click on the section called Editor (under Appearance):

From there, click into Navigation:

Lastly, click on the edit icon:

This will take you to a whole new screen where you’re able to adit your whole menu.

2. Edit your menu and add the link

Based on how many links you have there already, you’re going to see something similar to this:

To add a new link there, click on the plus icon and then search for a page/post that’s already on your site or copy-paste a whole URL there. At this stage, we’re adding a normal link. The next step is turning this link into an anchor link. To do that, click on the pencil icon to edit your new link:

In the LINK section of the settings, add the HTML anchor of the section of the page that you want to link to. Place it at the very end, like so:

Click on the Save button that you can see in the image above to save the new menu item. Then click on the main Save button of the menu settings that’s in the top right corner of the screen. This prompt at the bottom of the screen will tell you that the menu has been updated and your anchor link is now live:

Test your new anchor link in the menu

Now it’s time to test out the menu item that links to a section in a WordPress page or post. Go to the frontend of your website, or any part of your website that reveals the main menu.

Simply click on your new link and see if it’s taking you where it should.

That should not only send you to the right page or post, but the specific section with the HTML anchor created from before.

👉 If you have difficulty replicating this process, follow some of the tips below:

1. Make sure you have the right anchor link – spelling matters, as does spacing.
2. Check to see if the post or page you’re linking to is actually published. An anchor link can’t direct a user to a private or unpublished page.
3. Ensure that the menu is published to the appropriate location on your website. Some WordPress themes allow for multiple menu locations, so you may have to make a certain menu live or adjust where it’s located.

How to link to a specific section of a page inside a post/page

Okay, so adding anchor links from your site menu is one thing, but you can also add those links to help users scroll through a post while they’re reading it. You can even see an example of how that works in this very post that you’re reading here. Remember these links:

Both of them are anchor links that send people to different sections inside this post.

Adding a link like this is very easy to do – it’s even easier than adding an anchor link to a menu, in fact. Here’s how to do it:

1. Insert the content you plan to use as anchor links

To build an anchor link, you need some sort of content to link in the first place. A fine example is paragraph text, often in a list for a table of contents. It’s possible, however, to add anchor links to any type of text, or even an image, or other block type.

2. Add the anchor links

Highlight the content you’d like to serve as your link. Click the Link button.

With a “#” before the text, type in the HTML anchor text you created before – the one that correlates with the section you’d like to navigate to.

The link field should show something like this: #html-anchor.

Except, replace html-anchor with your own anchor text, like so:

Click the Submit button to save that link. You can complete the same process for as many content elements as you’d like.

3. Test to see if the anchor link leads to the right section in the post

Be sure to Update or Publish the post before testing. Go to the anchor link, and click on it to see if it brings you directly to the right section. If so, you have successfully made a link to go to a specific section in a WordPress post!

A summary on setting up anchor links

Anchor links, also known as jump links, let you link to any section of a WordPress page from your navigation menus, the post editor, or any other area on your site.

I’ve outlined a couple of methods of how you can add such links to your WordPress menus (both for classic and block themes), and also how you can take any piece of text within an existing post or page and link it to another section of that same post.

I hope this has been useful and that it will help you organize content on your pages better.

In case anything is unclear, shoot me a comment and I’ll try to help.