If you are a WordPress site owner, ensuring that your visitors always have a smooth and seamless user experience while navigating your website should be one of your priorities. A typical user doesn’t spend a lot of time on your page before deciding whether they want to continue browsing or leave altogether. So, you actually don’t have more than a few seconds to get them to stay.
Of course, this can be accomplished using many different strategies, but when it comes to improving the user experience on your site, nothing beats solid website navigation. Now, when we say website navigation, we mean the creation of different navigation menus, CTA buttons, and the propagation of different types of navigation links throughout your site, including anchor links. And this time around we will focus specifically on anchor links.
Anchor links have the power to enhance your visitors’ user experience ever since. They provide quick access to the section they are interested in.. Stay tuned as we discuss the importance of such links in more detail and show you some of the best ways to add them to your WordPress site. Gutenberg and Classical editor.
We will consider:
As we mentioned earlier, anchor links are highly useful navigational elements as they have the ability to bring users to a specific area on the same page and enable them to quickly get to the section they are interested in. Otherwise known as a table of contents, such links are often used in longer content formats such as different types of articles, FAQ sections, or product or service listings.
In addition to greatly improving your website’s UX in general, anchor links can also have a positive impact on your website’s SEO. That is, Google tends to show your anchor links in the form of a “skip” link in search results, especially if users type in keywords found in your anchor link. all this improve your click-through rate and in turn bring more traffic to your website.
Also, if you list your anchor links as a table of contents, Google may decide to display them as a rich snippet like this:
Now that we’ve covered some of the main reasons why anchor links can be valuable to a website, let’s take a look at how you can add them to WordPress.
There are two things you need to do to get your anchor links working – first, you have to add a # sign before your anchor text and then add the ID attribute to the text you want users to be redirected to when they click the anchor link.
To create your anchor link in Gutenberg, you must select the text you want to be your link and Connection button.
Usually a popup will appear where you can add a link URL.
But instead of doing this, # add prefix and enter keywords for specific field you want users to skip When you click on such a link. Of course, you should use the keywords related to the link section you are linking to. We also recommend using hyphens and/or capital letters to make your anchor text more readable overall. Here is an example of the # prefix:
#Hair products
Press Enter to finish adding your anchor link. After doing this you will be able to see the anchor link in the editor but you will not be able to click on it as you need to create an id for it.
To add an ID to the anchor link, you must: find the section where you want users to be redirected when they click on your link.
To link to a header section, select the desired block and choose Developed tab. Later, in HTML link area, you should add the same text you used for your anchor link – the only difference you have to make leave out the # prefix.
Then you can hit Publish/Update button (or Save Draft) and preview your anchor link to see how it looks live.
If you want to link to a section other than the title (such as a paragraph or other types of blocks), click the three-dot menu icon (within the block) and then edit as HTML button.
Now find the HTML tag for the particular section or item. For example, <p> is a paragraph <h2>, <h3>etc. are titles, etc.
When you find your item, simply Add an ID attribute with your link to the HTML tag.
Like this:
<p >
When you see a message saying that this block contains unexpected or invalid content, click Convert to HTML button.
That’s it – you’ve successfully added an anchor link to a specific section in your paragraph or another block of your choice.
If you prefer to use the classic editor, you can of course also create anchor links from this editor. Here’s how you can do this.
First, select your desired anchor anchor text and Add/Edit link button.
Next, add a # prefix and an info for your link.
After completing this step, add your identity attribute to the section you want your users to go to when you click on your link.
Change your mod like this: text before after Find the HTML tag of the section where you want to add the ID attribute (like <h2>, <p>and such that).
Add your id attribute with your anchor link info, but without the # prefix. E.g:
<p> id=“Hair-Products”>
Publish/update your page/post and then preview to see what your anchor link looks like.
If you prefer to write and edit your content entirely using Text mode, you can also use it to create your anchor links from scratch using HTML.
one time text mode, you can create your anchor link using <a href-“ “> ticket. Here is an example of what your anchor link might look like in HTML:
<a href="#Hair-Products">Hair Products</a>
Next, find the domain where you want users to be redirected when they click the anchor link (a title usually marked as ). <h2> and <h3>a paragraph marked as <p>etc) and add your ID attribute to the HTML tag (again without the # prefix):
<p> > Hair Products</p>
After you save your changes, go ahead and preview what your anchor link looks like.
If you regularly create and publish long-form content on your site (such as particularly long articles), you may want to consider adding anchor links automatically to speed up the process. Fortunately, WordPress has a large online community that regularly creates many useful tools and plugins, many of which are available for free. Among such plugins there is also a plugin called. Easy Contentsyou can use it to automatically generate anchor links on your website.
As the name suggests, this plugin allows you to easily create a table of contents with a list of links and add it to your pages, posts and/or custom post types. You can do it too enable auto add option to automatically add your anchor linksyou or can uncheck this option and set the table of contents for specific pages/posts only.
We already have an article that talks in-depth about adding a table of contents in WordPress using this handy plugin, so if you want to separate your pages or posts into different sections for better navigation, we recommend checking out this article.
Wrapping Things
Anchor links can be a great addition to any website as they allow users to quickly and easily jump to the section they want to read. In turn, they can help improve your navigation and improve your website’s UX as a whole. Adding such links to your pages or posts may seem complicated at first, but when you take a closer look at the instructions we’ve provided above, you’ll find it’s not that difficult at all. Make sure you follow all the steps carefully and everything will be ready.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
