fbpx

4 Easy Methods to Create Anchor Links in WordPress

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.

Advantages

  • 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.

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 want to add 301 redirects, it is important 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 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.

create-anchor-link-in-wordpress

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.

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.

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

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.

tinymce-anchor-link-plugin

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.

create-anchor-link-in-editor

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. 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.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Last Update:

About the Author

Submit a Comment

Must be required * marked fields.

:*
:*

logo2-1.1
study2

WordPress Site Management Crash Course

Get Our 7 Days WordPress Site Management Crash Course for Free

subscribe-themerally

Join Our Awesome Community!

Signup to get regular updates and freebies from Theme Rally