Anchor links are not a topic that is much debated, but we have achieved excellent 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 benefit on Google? So, let’s start the discussion:

What are Anchor Links?

Anchor links are links that take you immediately to a specific part of the page. Anchors are usually specified using element A (naming with the name attribute) or other elements (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.

Advantages

• One of the most significant 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 jump to the section of interest immediately. 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 to send the user to the exact troubleshooting step he needs to follow.
• When it comes to search results pages (SERPs), results can vary depending on the display. However, we repeatedly saw anchor links (pop-up menus) on our SERP list because we used them in our articles. These are great because they 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.

Disadvantages

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.
• If you are changing domains or adding 301 redirects, it is essential to know that the fragment identifier (#) is never sent to the server. This can be complicated if you change things down the road with anchor links. There are ways to get around this with JavaScript, but this is by no means an easy task.

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 cannot be very pleasant for some. You can change this so that it is a smooth sliding transition. We 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. 

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.

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.

Step 1

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.

Step 2

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.

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

Step 3

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 add anchor links to all of your heads automatically? Then check out the free WP Anchor Header plugin. This will add anchor links to all of your H1-H6 heads.

Add Anchor Links Plugin: This is a very basic plugin, and there are no settings. 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 nifty little anchor icon that appears when you move the mouse pointer over your head. This allows visitors to quickly see a link there that they can copy if they wish.

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.

Conclusion

As you can see, there are many creative ways to add anchor links to WordPress. Some are lighter than others. For example, posting much longer content helps visitors get to the content they want right away.

Do you already use anchor links on your WordPress site? If so, we would love to hear your experiences or thoughts. If you have any difficulties, please join our Theme Rally Community to ask your questions.