How to Link to a Specific Section of a Page in WordPress
![woman writing a URL](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-HERO-1-1024x451.jpg.webp)
Have you ever wondered how to link to a specific section of a page in WordPress? It can be a very effective way to lead your users to a part of your page without having them scroll all the way there.
To do that, you need anchor links, a fundamental HTML concept WordPress makes very easy to implement with the Gutenberg editor. More specifically, some refer to anchor links that lead to different sections of the same page as “jump links.”
This article will show you how to add jump links to your posts, making them easier to navigate.
As an initial demonstration, here’s a table of contents with jump links to each section of this article. Click on any of them, and you’ll automatically scroll down to that section.
- Key takeaways
- Anchor Links in HTML and WordPress
- How to Link to a Specific Section of a WordPress Page Using Anchor Links
- Benefits of Jump Links in WordPress
- Jump Links Are Very Useful and Easy to Implement
Key takeaways
- An anchor link is an HTML element that creates a link toward an external website, a different page of the same website, or a specific section of the page.
- Anchor links that lead to a different section on the same page are sometimes called “in-page links” or “jump links.”
- Using the Gutenberg editor or HTML code, you can easily add jump links in WordPress.
- Most Gutenberg blocks allow you to quickly add a jump link with the Advanced tag, but some custom blocks lack anchor support, forcing you to use HTML.
Anchor Links in HTML and WordPress
An anchor link is an HTML element that creates a link toward an external website, a different page of the same website, or a specific section of the page. This last use case is the one we’ll discuss in this article.
You can use anchor links to create a hyperlink that lets you jump to a specific section of the same page. Some use the term “in-page link” or “jump link” to refer to these anchor links. In WordPress, jump links can be very useful for creating tables of content that link to each heading and subheading, helping users navigate your content more easily.
For example, if you click here, you’ll be directed to this section’s heading. We did this with an anchor link (jump link), and you can use them to link to any type of content (paragraphs, images, videos, etc.), not just headings.
The rest of this article will explain how you can do it in your own posts and pages.
How to Link to a Specific Section of a WordPress Page Using Anchor Links
WordPress has 2 main methods for jump links: the Gutenberg editor and good old-fashioned HTML.
In most cases, the editor will be more than enough because most Gutenberg blocks allow you to add an anchor. The only case where you may need to use HTML is when the block you’re trying to link to doesn’t support anchor links, which will likely only happen with blocks created by plugins or other custom blocks.
Here’s a step-by-step guide for both methods.
Method #1: Add Jump Links with the Gutenberg Editor
This is the easiest and fastest to add jump links in WordPress since the Gutenberg editor skips the HTML code.
Add the Anchor
First, you need to go to the editor. Head to the page or post you want to edit, then place the pointer on the heading you want to link to. On the right-hand sidebar, you should see an Advanced tab (you may need to scroll down to see it). Click on the arrow to the right to expand the dropdown menu.
![The Advanced tab is on the right-hand sidebar](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-1-1024x451.jpg)
You will see several text boxes. The one we care about right now is HTML Anchor.
![The "HTML Anchor" field](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-2-1024x451.jpg)
Add a name for the anchor. It should have no spaces and be unique to this particular page or post. You can use dashes to separate words.
Give it a meaningful name that is relevant to the section’s content. In this case, we’ll name it first-heading
.
![Add a name to the HTML Anchor](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-3-1024x451.jpg)
Link to the Anchor
Now, all you have to do is create a link that points to the anchor you just made. Simply highlight the text that will contain the link and click on the Link icon to bring up the link menu. You can also press CTRL + K
or CMD + K
.
![Highlight the text and click on the Link icon](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-4-1024x451.jpg)
To create the link to the anchor, all you have to do is add the anchor’s name preceded by a numeral sign (#). In our case, it would be #first-heading
. Press Enter to confirm.
![Add the HTML Anchor preceded by a numeral sign](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-5-1024x451.jpg)
And that’s it! Now, you can go to the post or page’s preview and click on the resulting hyperlink. Instead of directing you to a different page, it’ll scroll to the specified section.
![Preview your jump links in the preview](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-6-1024x451.jpg)
![How your jump link looks in the published post](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-7-1-1024x451.jpg)
Method #2: Add Jump Links with HTML
The other, slightly more complicated way of adding anchors is using HTML code. This is likely only necessary if you encounter a block that doesn’t support anchors, like custom blocks or blocks added with plugins.
But even if you’ve never used HTML, adding anchors is pretty simple and only requires basic computer skills.
Add the Anchor with HTML
Click on the section you want to add the anchor to. On the toolbar, click on the 3 vertical dots to the right. This will expand a menu where you can select Edit as HTML.
![Click on "Edit as HTML"](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-8-1024x451.jpg)
Your heading will turn into a small HTML block. It will look something like this:
![The HTML block](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-9-1024x451.jpg)
<h2 class="wp-block-heading">The First Heading</h2>
To add the anchor, insert the id
HTML attribute within the heading tag. It’s important that the anchor name is inside quotation marks (“”
) and the id
attribute is inside the tag wrappers (<>
).
Otherwise, you follow the same naming rules as before: keep the anchor name unique and relevant to the content and use dashes to separate words.
An anchor with the name first-heading
would look like the following code. Notice how we added a new id
attribute following the rules above:
<h2 class="wp-block-heading" id="first-heading">The First Heading</h2>
Link to the Anchor
After you’ve added the anchor using HTML, the process is the same. Simply link to the newly-created id attribute in the same way we did before.
![Add the HTML Anchor name to your link](https://wcanvas.com/wp-content/uploads/2024/02/wordpress-link-to-section-10-1024x451.jpg)
Benefits of Jump Links in WordPress
Using anchor links to create jump links in WordPress has several benefits:
- Improved user experience. Anchor links allow users to navigate directly to specific sections of a page. This can be very useful for long content pages because it helps visitors quickly find the information they are interested in without scrolling through the entire page.
- Better content organization. You can use jump links to create a table of contents at the beginning of a page, making it easier for readers to understand the structure of your content and navigate to the sections that interest them the most.
- Better SEO. Jump links can improve SEO by providing direct links to different sections of your content, which makes it easier for search engines to understand the structure of your page.
- Potentially lower bounce rate. By making navigation easier, jump links potentially reduce the bounce rate, as users are more likely to stay on a page when they can easily find what they’re looking for.
Jump Links Are Very Useful and Easy to Implement
Anchor links are an essential part of HTML, helping you direct your users to external sites, a different page on your own site, or a specific section of the same page (jump links).
Adding jump links is very easy, whether you use Gutenberg or HTML, making your site easier for users to navigate and for search engines to crawl.
Hopefully, you know more about anchor and jump links now, and you can apply them on your own posts and pages.
If you found this post useful, read our blog for more WordPress insights and guides!
Related Articles
![](https://wcanvas.com/wp-content/uploads/2024/08/change-footer-BLOG-ARCHIVE.jpg.webp)
Development / 10 min read
Development / 10 min read
How to Change or Edit Your WordPress Footer
If you’re starting to dive deeper into your WordPress site, you may be wondering how to change or edit the contents of your footer. After all, it’s the part of…
Read More![The “Media” menu in WordPress’s admin dashboard](https://wcanvas.com/wp-content/uploads/2024/08/featured-image-size-in-wordpress-BLOG-ARCHIVE.jpg.webp)
Development / 8 min read
Development / 8 min read
How to Change the Size of Your Featured Image in WordPress
The size of the featured image in WordPress is an important factor in the look and feel of your posts, pages, and custom post types. As a result, you may…
Read More![A group of people using computers and smartphones with an "Upload" icon floating in the middle of the image](https://wcanvas.com/wp-content/uploads/2024/08/clean-up-uploads-folder-BLOG-ARCHIVE.jpg.webp)
Development / 7 min read
Development / 7 min read
How to Clean Up your WordPress Uploads Folder?
The WordPress Uploads folder is located on wp-content and contains all media files, such as images, videos, and documents, that you upload through the WordPress Media Library. Over time, it…
Read More![Various logos for social media applications on a smartphone screen](https://wcanvas.com/wp-content/uploads/2024/08/social-icons-color-BLOG-ARCHIVE.jpg.webp)
Development / 2 min read
Development / 2 min read
How to Change the Color of Social Media Icons in WordPress?
Looking for how to change the color of social media icons in WordPress? By default, social media icons in WordPress have unique colors. This can be great, but it can…
Read More![](https://wcanvas.com/wp-content/uploads/2024/07/wordpress-hide-page-title-BLOG-ARCHIVE.jpg.webp)
Development / 7 min read
Development / 7 min read
How to Hide the Page and Post Title in WordPress
Do you want to hide your post or page title in WordPress? Sometimes, it may be necessary to do it, especially if you want your home page or informational pages…
Read More