You’ll make many design choices around site reference usability and user experience (UX). What’s more, blog content—usually reading pages from your site—has a lot of value. If you combine the two, you’ll usually be thinking about ways to help the user experience of your content. WordPress anchor links are a staple of content user experience.
Think of anchor links as inline navigation for related articles. You can put them anywhere, but headers are a common use case. This allows readers to jump through articles at will without getting lost. This is a top-notch UX consideration, and one that most website owners should consider.
To show you how easy it is to use them, this article will look at WordPress anchor links. Before we discuss the different ways to add them, let’s talk about what they are and what they can do for you.
What are anchor links?
In a general sense, anchor links are clickable inline navigation. It is specific to a piece of content and will take you to a later point on the page. We use them at Lightning Blog to help you jump to the different steps in the tutorial:
If you click the link, the page will jump to the relevant section you specified. It’s a simple implementation that can make a big difference to the usability of your website. We will discuss some of these examples next.
Why use anchor links in WordPress?
We mentioned that usability is a key motivator for using WordPress anchor links, which is the main reason to use them. However, there are many use cases for adding them to your site. E.g:
If you want to provide readers with extra-long-form content (such as a 3,000-word article), you usually have a table of contents. This is tailor-made for anchor links.
Anchors also work when you share bookmarked articles. If you include anchors in the URL, readers will jump right to where you want them to see.
Your search engine optimization (SEO) can get a boost because, in some cases, search engines will show these WordPress anchor links as separate entries.
In short, if you want your readers to stay on your website and engage with your content, WordPress anchor links are a great weapon for vying for traffic. As for how to add them to your website, the next few sections will show you.
How to add anchor links to any HTML code?
The basis for adding WordPress anchor links is HTML. In fact, you can use these on any website, not just in WordPress. There are two parts: anchors and tags.
First, you’ll add the anchor link like any other hyperlink – using the <a> tag. For the link itself, you would use “octothorpe” (also known as a pound sign) before it:
This will link the two tabs together and create the inline navigation you need. Note that we used a title tag here, but this can be any HTML tag. You are welcome to use paragraph tags, image tags, or any other element of HTML if that gets the user where they need to be.
How to Add WordPress Anchor Links?
We will now show you real examples of WordPress anchor links! Here’s what we’ll cover in the next few sections:
You can add anchors to block editor elements and set IDs on other elements. This is also possible in the classic editor.
Page builders like Elementor will provide a module that lets you add WordPress anchor links to your content.
Some plugins can add automatic anchor links to your content, which can save you some setup time.
First, we’ll look at the manual method. As hard as it sounds, using the block editor makes it easy.
1. Use the manual method to add anchor links to the block editor
2. Add Anchor Links Using a Page Builder Plugin
3. Use plugins to add automatic anchor links to your site
The user’s experience is the most important thing, so you need to think about how to make their time on your site count. WordPress anchor links do this. They help you create inline content navigation, which, in turn, will help your users scroll to the content they need without fuss or delays.