Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
If you have a long page on your site, linking visitors directly to one section on that page can be more helpful than a regular link.
Luckily, the Gutenberg editor has made this easy, and you don’t need to install any new plugins.
And just to be clear, I’m talking about a link like this that will take you to the heading below: scroll to the next heading.
You’ll learn how to create links like that in this tutorial, which can link to the same page or a section on a separate page.
This tutorial includes steps for the Classic Editor too, but please read the rest of the post first to learn how to link properly.
How to Link to Part of a Page
If you’d prefer video tutorials, you can follow this step-by-step tutorial instead of reading the instructions in this post.
Subscribe to Compete Themes on Youtube
In order to link to a specific part of a page, you need to do two things.
- Add an anchor to link to
- Link to the anchor
First, you need a way to designate the element you’ll link to. This can be any element, but we’ll be using a heading since it’s the most common element to link to.
Once the anchor is added, all you need to do is link to it using the normal link editor and a slightly different URL format.
It will be easy to understand in practice, so let’s get started.
How to add an anchor to a heading
Start by selecting a heading block in the editor. You’ll see an Advanced section in the right sidebar that is collapsed by default.
Open up the Advanced section, and the first thing you’ll see is the HTML anchor option.
Inside the HTML anchor field, give the heading a short and descriptive name. It cannot have any spaces, but you can use hyphens to separate words. For example, a section on diet in an article about caring for a dog could have an anchor like “diet” or “dog-diet.”
Once you’ve added the anchor, you’re ready to link to it.
How to link to an anchor
The steps are slightly different depending on whether the link is on the same page or not. Let’s start with same page links.
To link to an anchor on the same page, highlight the text you want to link and click the link icon (or use the cmd+k shortcut).
Then in the URL field, enter a hashtag followed by the anchor.
Once you hit enter, the link will be added. You can preview the article to try it out right away.
To use this technique for an anchor on a different page, the URL needs a small modification.
The only difference is that you’ll add the full URL first followed by the hashtag and anchor, like this:
The link might not work without the forward slash at the end of the URL before the anchor, so make sure to include that every time. It can also make your site load faster by skipping the automatic redirect to the URL’s forward-slash version.
That likely covers everything you need to know about adding internal anchor links to WordPress, but I’ve got a few more tips for curious minds.
You can use this same technique to create a one-page website.
With a one-page site, you only have a homepage, and the menu links visitors to different sections on that page rather than to entirely new pages.
To create this type of site, you’ll create your anchors using the same method you’ve just learned. Then you can open up your menu in the Customizer and use the Custom Links section to link to your anchors.
If you use this technique for a multi-page website, make sure to include the full URL before the hashtag.
How to link to other elements
Headings aren’t the only elements that include the HTML anchor option.
You can also add anchors to:
- Paragraphs
- Images
- Lists
- Galleries
- Tables
- Quotes
In fact, while browsing through Gutenberg blocks, I couldn’t find a single one that didn’t support the HTML anchor option.
That said, if you use a block added by a plugin, it could be missing this option. Furthermore, the anchor option isn’t available if you’re using the Classic Editor, so here’s how you can edit the HTML to add an anchor to any element on your site.
How to add anchor links with HTML
If you’re using the Classic Editor (or a block missing the HTML anchor field), there a few more steps to add the link.
The way you link to the anchor is the same. The only difference is how you add the anchor to the element.
To add the anchor, you need to edit the HTML. In the Gutenberg editor, you can open the block’s options menu and select Edit as HTML. In the Classic Editor, use the tabs at the top right to switch from the Visual view to the Text view.
When viewing the HTML, you’ll see your headings are wrapped with HTML tags like this:
<h3>This is a heading</h3>To add an anchor, you need to add the ID attribute to the heading. Here’s an example giving the heading an anchor called “dog-diet”:
<h3 id="dog-diet">This is a heading</h3>Every HTML element can use the ID attribute, so you’re not limited to headings. In the Classic Editor, a lot of the HTML doesn’t actually show up, but you can always wrap a section in “div” tags to add an anchor, like this:
<div id="link-target"><p>This is a paragraph</p><p>This is another paragraph inside the div</p></div>
Adding the div element won’t make any visual difference on the page, but it will allow you to link directly to these paragraphs.
Editing the HTML like this works exactly the same, whether you’re using Gutenberg or the Classic Editor. Once the anchor is in place, all you have to do is link to it using the method outlined above.
Keep learning WordPress
With knowledge of anchor links and a bit of HTML, you can link to any section on any page from anywhere on your site.
If learning new WordPress techniques is exciting and fulfilling for you, you’ll probably love my free WordPress email course:
Take the 7-day WordPress Mastery Email Course
If you don’t like it, you can unsubscribe in one click, but I’m certain you’ll pick up at least one new valuable tip. The 7-day email course delivers design, marketing, and performance tactics to create an all-around better website.
Thanks for reading this guide on how to link to parts of pages in WordPress, and please consider sharing it with someone else using the social buttons below.
