Sometimes linking to a page isn’t enough. You may have a very long page with lots of text, and you want to direct visitors to one section in particular.
In this post, you’ll learn the trick for linking to a precise part of any post or page on your WordPress site.
How to Link to Part of a Page
Update: this new video tutorial has easier instructions to follow with the Gutenberg editor:
In order to link to a specific part of a page, you need to do two things.
1. Add a point to link to
First, you need a way to mark a place in the page. We’ll do this by adding an ID attribute to a heading element on the page. Don’t worry, it’s easier than you think.
2. Link to that specific point
Secondly, you need to modify a link to point to that place in the page. To do this, we’ll modify the URL of a link with the ID of the heading we want to link to.
Let’s get started, and I’m sure you’ll find this easy to setup on your site.
How to Add an ID to a Heading
In your dashboard, navigate to the page you want to link to. Then, switch the editor from the Visual view to the Text view.
Scroll down the page until you find the section you want to link to. In this example, we are going to use an h3 element as our target.
In the Text view, you’ll see your headings are wrapped with HTML tags like this:
<h3>This is a heading</h3>
To add an ID, update the h3 tag like this:
<h3 id="page-part">This is a heading</h3>
Here’s how it will look in the editor:
The ID doesn’t have to be added to a heading. You can use any HTML element in your page. In fact, if you don’t see any HTML tags you can use, just add this to your page while in the Text view:
That will add an empty “div” HTML element. You won’t see any difference when you view the post, but this will give you a target you can link to.
How to Link to an ID on a Page
Now that your ID has been added, you can link directly to it.
Highlight the text you want to be linked, and click on the link icon to add a link.
In the popup, add the link to the page followed by a hashtag and the ID you added to the page.
When you want to link to part of a page, you can always add a hashtag (#) and an ID of an element on the page to link directly to that element.
Now when someone clicks on that link, they’ll be taken directly to the element you added the ID to.
With a bit of HTML, you can link to any part of any post or page on your site. This can be great for linking to long pages, or simply saving visitors a bit of time.
If you’re new to working with HTML, check out this free HTML course by the Khan Academy to learn more.
If you have any questions about adding links to specific parts of pages, leave a comment below.