Anchor links are not a topic that is much debated, but we have achieved great results with them! Today, we’ll discuss deeper about how to create anchor links in WordPress and explore why you might want to start using them. From our experience, anchor links can improve the user experience, make it easier to navigate content a long way, and even give you a slight advantage over Google. Who doesn’t want a free advantage on Google?
What are Anchor Links?
Anchor links, also called links to a jump menu or table of contents, are links that take you immediately to a specific part of the page (or external page). Anchors are usually specified using element A (naming with the name attribute) or any other element (naming with the id attribute).
Advantages and Disadvantages of Anchor Connections
Just because we do something doesn’t always mean we should. Here are some pros and cons to consider when using anchor links on a WordPress site.
- One of the biggest benefits of anchor links is creating a better user experience when browsing your site. This is especially true when it comes to long-format articles. We post a lot of in-depth content (4000+ words) and scrolling can become a pain. Using anchor links allows the user to immediately jump to the section of interest. Let your users find what they need faster.
- Using anchor links in the headers allows you to share direct links to different sections in an article. This is great for social media and even support teams. For example, our support team at ThemeRally relies heavily on the anchor links in our Knowledge Base articles so that we can send the user to the exact troubleshooting step he needs to follow.
- When it comes to search results pages (SERPs), results can always vary depending on what is displayed. However, we have repeatedly seen anchor links (pop-up menus) on our SERP list because we used them in our articles. These are great because they basically give you another line of text for your unpaid list. They can also help increase your CTR as the user may see something related to their query that you did not specify in the meta description or title.
- You can also use anchor links for other things, such as the “back to top” link that Wikipedia uses along with citations or notes.
While we think the pros certainly outweigh the cons, here are some setbacks you might want to consider.
- Anchor links or an index can reduce the average site time per visitor. Why? Because they skip right to the content you want, instead of reading the whole article. However, if you cheer up your visitor right away, it can lead them to sign up for your newsletter or research more about what you’re selling. So this could be understood as positive or negative sides.
- Anchor links that are directly related to the problem above can affect your ad revenue. Visitors who jump straight to a particular section could reduce the number of impressions and clicks. Sites that rely heavily on advertising may want to try A / B with anchor links and indexes.
Anchor Connection Passage
You may also want to consider changing the passage of the anchor connection. By default, anchor links will suddenly jump to an ID lower down the page. This can be annoying for some. You can change this so that it is a smooth sliding transition. We actually do this on the ThemeRally blog. You can use a free plugin like Page scroll to id or add some CSS to your site, for example, scroll-behavior: smooth. There are some additional tips for developers in this song overflow post.
As with most WordPress tips, here are a few different ways to show how to add anchor links to WordPress. Take a look at these four different simple methods. And yes, these links below use anchor text.
How to Manually Create Anchor Links in WordPress
The first way to create anchor links in WordPress is to simply manually execute the HTML in each of your posts. Let’s create it so you can see how they work.
Create text for your link and add a hyperlink to it, as you would normally do for any other link. Create an anchor link with HTML.
Instead of linking it to a URL, post, or page; you will assign it an anchor name. URIs that specify anchors contain a “#” character followed by the anchor name. You can name anything you want, although we usually recommend that they be short and related to the actual name of the head.
If you look at the text view (HTML), it looks like this:
How to manually create anchor links in WordPress
Here is an example of all the anchor links we use in this post:
- How to manually create anchor links in WordPress
- How to create anchor links in WordPress with a plugin
- And how to create anchor links in WordPress with Gutenberg
Then you need to add the ID to which you want to jump the anchor link to the header. To do this, you need to switch to text view (HTML) in WordPress. In the header, in this case, header H2, add the ID along with the anchor name you selected in step 2. The anchor name and ID attribute must be exactly the same for the connection to work.
How to Create Anchor Links in WordPress with a Plugin
Don’t want to be burdened with HTML every time? No worries, there are some great free WordPress plugins available that allow you to easily add anchor links and even an index to each post.
Add an Anchor Connection to the Plugin
One of the easiest ways to add an anchor link is the free TinyMCE Advanced plug-in. This plugin basically adds additional features to the editor with quick shortcuts. Since writing this article, the plugin has had more than 2 million active installations with a rating of 4.5 out of 5 stars.
Step 1- Add an Anchor Name
After installing and activating the plugin, go to the post and create a hyperlink on the anchor text. Instead of linking it to a URL, post, or page; you will assign it an anchor name with # in front of it.
Step 2- Add an Anchor
Highlight the header you want to connect to. Then click “Insert” on the button at the top and select “Anchorage”. This button appears in the editor due to the TinyMCE Advanced plug-in.
Step 3- Anchor ID
Enter the name of the anchor you gave it in step 1 and click “OK”. This plugin saves you time because you never have to leave the view of the visual editor. If you do this manually with HTML, you need to switch between the views of the visual editor and the text editor (HTML).
Add Content with a Plugin
You may want to speed up the process even more. ? If you write a lot of in-depth content and always want to include an index (anchor link lists/jump menu) in your posts, then take advantage of the index plugin.
One of the best free plugins is Easy Index. This plugin automatically creates anchor links for your heads and allows you to easily insert the index anywhere in the post with a simple shortcode. Since writing this article, the plugin has had more than 30,000 installations with a rating of 4.5 out of 5 stars.
Step 1- Simple Index Settings
After installing and activating the plug-in, you will probably want to change some settings. You can find them in the “Settings → Index” section.
- The “Enable support” option allows you to choose which types of posts you want to use the index for. Most likely this is your type of “Posts”.
- You can then choose whether or not to insert the index automatically or manually. We probably recommend that you do it manually if your posts change slightly.
- The “Show when” option allows you to specify how many titles a post should contain before the table of contents appears. For example, you probably don’t want a table of contents to appear in a short blog entry, so it’s probably best to do at least four or more chapters.
Step 2- EZ-TOC Shortcode
To insert the index manually, simply insert the shortcode [ez-toc] where you want it to appear in the post. The table of contents is then automatically created for all chapters in the post. How great is that?
You can also make several changes in the settings regarding what to display, exclusions, appearance, and so on. For example, you may always have a “Summary” heading at the end of your posts. You can enter this header in the exclusion list in settings so that it is not included in the index.
Another index plug-in you might want to check out is the Short Code Index. It’s a newer plug-in on the market, but it was developed by James Kemp, with whom we were happy to talk.
You May Also Read: How to Add and Use Widgets in WordPress
Automatically Add Anchor Links to the Heads with a Plugin
Do you want to automatically add anchor links to all of your heads? Then check out the free WP Anchor Header plugin. This will add anchor links to all of your H1-H6 heads.
WP Anchor Header plugin
This is a very basic plug-in and there are no settings. Simply install it, activate it and you’re ready to go. Each head will automatically get an anchor name (derived from the head name), and they even get a cool little anchor icon that appears when you move the mouse pointer over your head. This allows visitors to easily see that there is a link there that they can copy if they wish.
Automatic anchor links on the heads
How to Create Anchor Links in WordPress with Gutenberg
You can easily create an anchor link in WordPress with Gutenberg by following some steps. Let’s talk about these steps:
Step 1- Add an HTML Anchor to the Gutenberg Editor
Highlight the header in the Gutenberg block and click “Advanced” on the right. You will then see the option to add an HTML anchor.
Step 2- Add an Anchor Link to Gutenberg
To connect to it, simply create a hyperlink on the anchor text. Instead of linking it to a URL, post, or page; you will assign it an anchor name with # in front of it.
How to Create Anchor Links in WordPress with the Chrome Extension
Don’t want to create anchor links with HTML or install a plug-in? Then check out the free Anchor Links Chrome extension. It is fully compatible with standalone WordPress, WordPress.com, and Medium.
Step 1- Chrome Extension Adds Anchor Link
Once you’ve installed the Chrome extension, simply highlight the header to which you want to add the anchor link. Then click the small Anchor Link Chrome extension icon in the browser toolbar.
Creates an anchor ID in the background (derived from the header name). In this case: # Header_1. When you click the icon, it automatically copies it to the clipboard.
Step 2- Add an Anchor Link
Then go to the text to which you want to add an anchor link, create a hyperlink as usual, and press “Paste”.
And that’s It! The Chrome extension helps make it quick and easy without relying on any third-party plug-ins.
As you can see, there are many creative ways to add anchor links to WordPress. Some are lighter than others. Posting much longer content helps visitors get to the content they want right away. We’ve also noticed that anchor links help find “menu jumps” in SERPs, which helps increase CTR on your organic list.
Do you already use anchor links on your WordPress site? If so, we would love to hear your experiences or thoughts.