So, while back I was working on this full-detailed article that had about 3000+ words. Very specific and detailed and it contained many subsections that I couldn’t do without. Once I finished the whole piece I knew I had something great in front of me but also that I couldn’t just post it as is.
What seemed to be the problem? No matter how good it’s written, if it’s not presented in a user-friendly way, it’s not helping anyone. And by user-friendly I mean I needed to have a table of content. Just as in books. And moreover, that table of content required to have anchor links. Yes, that terrible (in my head at that time) scary, coding-related anchor link guys. That pretty plain HTML feature that, no matter how easy it looks, to me was out-of-this-world heavy. Until I successfully did it! (after X times trying) 🙂
However, success is a success, and today I’m a proud know-how person for doing great anchor links in WordPress.
So, naturally, I wanted to share my knowledge about it with you guys, thus, this guide on how to do anchor links without coding experience. This feature is also known as jump links in WordPress, and it’s useful in more than one way. Or, more exact – it’s a shortcut to wherever you want your readers to go.
Why use anchor links in WordPress at all?
It’s all about user experience. Just as your articles are useful, the links should be as well. Especially if you have a long piece of text, as in my described case. So, these are situations in which these page jump links can be quite useful:
- Long blog posts
- Table of contents
- Landing page with lots of subsections
- Return to top feature
So, you see, having this cool feature can considerably improve the UX of your blog or a website. Which is why I’m teaching you how to do it right now.
The easy guide to creating anchor links inside WordPress posts and pages
Just as any other regular link out there, the anchor link has to point to somewhere. The main difference between regular and anchor links is that we should point to an existing element on the same page instead of an external URL that leads to another page. To fully understand how this works, let me explain the HTML basics of required elements we need for anchoring:
- Anchor source – a link element
- Destination anchor – an element on the same page which we want our link to point to
A href attribute of any regular link usually points out to another page, but in this case we use a “#” symbol followed by an identifier. Take a look at the example below.
1 | <a href="#stepone">1. How to set up a travel blog?</a> |
What does that mean? It literally says this command to the browser: Find an HTML element on the current page which has “stepone” ID attribute and scroll there.
And finally, the remaining step is to provide an ID attribute to the element on the same page which we need our anchor link to point to. It can be a div, an h-tag, basically any HTML element. The only requirement is that it has an ID attribute that matches the href attribute in the anchor link. An example is below.
1 | <h2 id="stepone">1. How to set up a travel blog?</h2> |
That’s it! So, how do we do that within WordPress editor? Just in case you get confused, below is an example from our actual blog where we wrote a piece on how to start a travel blog from scratch and in there you have a bunch of subsections and tips covered. And, we divided it into a table of contents for easy navigation.
Go to your WordPress post or page editor, then click on the text tab and you’ll get your HTML code which you can edit to create anchoring. Here’s how it looks like based on our previous example:
By doing this, you’ve instructed a command to both browser, Google and your visitors what those links are about and how to use them. And if you are interested to learn HTML links anchoring more deeply, you can check this detailed link anchoring explanation.
What if I need a WordPress link to anchor on another page?
All right, while the most usual case is that you want the link to point to an element on the current page (as I explained above) there might a specific case where you want to point out to an anchor element on another page on your website, or another website.
In such case, there is only a slight modification required inside the link element href attribute where you will use both an actual URL to the page plus “#” symbol following the id of an element on that page. Take a look at the example below where we are using our travel blog post as in the previous example:
1 | <a href="https://mekshq.com/how-to-start-a-travel-blog-from-scratch-the-ultimate-guide#stepone">1. How to set up a travel blog?</a> |
Simple as that! And, for your browser it basically means: Go to this URL and find an HTML element on that page which has “stepone” ID attribute and scroll there.
And what about Gutenberg, how to create anchor links in Gutenberg?
Obviously, this guide will not work for all of you who are using the new Gutenberg editor. Fear not, I have a quick tutorial for that as well. Just follow these steps, and you’ll have anchor link in Gutenberg within minutes. Note, this works for Header type of content, anything you write with H1, H2, H3,…
#1
Open the Gutenberg Editor and select the section you want to use as an anchor link. Click on the Advanced option on the right sidebar and write down that section’s name in the HTML Anchor bar. That is the destination anchor.
#2
Go back to the Gutenberg Editor and create a table of Contents or a Summary, with the list of the section you want to link. Then, highlight one by one and write the same thing you wrote in the HTML Anchor bar, only add a # in front of it.
All done! You’ve successfully added anchor links in Gutenberg 🙂
Setting up anchor links in WordPress with plugins
Now, in case you don’t want to mess with codes, there’s a way out. The beauty of WordPress is that it has so many plugins and for (almost) any occasion that you can set up that internal linking and page jump in no time. I searched through WordPress depository, and these are the anchor link plugins I found out about.
Easy Table of Contents
A free plugin that is very user-friendly and easy to use. It helps you add a table of contents /anchor or jump links/into your posts, pages or custom post types. It does it by automating the process which you set up in the settings area of the plugin. There you can select the post types where you want to enable the support for the table of contents as well as to select the post types which will have that feature added automatically.
So, in just a few clicks, you’ll have that anchor links where and how you want them. Moreover, you can set up more details there like the Header label, the position of the table, Toggle view and more.
Scroll to Anchor
Another great free plugin that helps you set up anchor links in WordPress. After installation, you will get an anchor icon in your Visual Editor toolbar that saves you from messing with the code area.
All you need to do is click on that icon after you’ve highlighted the text, insert the shortcode in the popup window and you’re done with that part. Then link it to the source anchor by entering the name of your anchor with the #, and it’s done.
TinyMCE Advanced
One of the most popular WordPress plugins for anchor links. Enables advanced features and plugins in TinyMCE, the visual editor in WordPress, so it’s much more than the average anchor link plugin. Install it and go to the Settings area where you’ll get this:
With the drag-and-drop feature, mix and set up what you need within your Visual Editor – like the anchor shortcut icon – the label. The next time you’re writing a piece that needs page jump option, just highlight the part of the text you want to link it up to, click on the Insert feature from your Visual Editor toolbar, insert the id, and you’re done.
No HTML writing within the text mode no more 🙂
WP Anchor Header
Maybe the simplest plugin for generating anchor links in WordPress. So simple, that I had to recheck it few times just to be sure 🙂 There are no settings to deal with, just install and activate it, and it automatically puts an anchor next to it, like in this example:
Conclusion
Apart from the benefits I described, knowing how to create and implement anchor links is good for Google too. That way, its spiders can crawl faster through your content and have better knowledge of what your page is about, thus, improved SEO. Anchor links will help you improve the UX of your content, improve navigation through posts and pages and, in time, generate lower bounce rate because of it.
I hope this how-to will help you learn how to do anchor links all by yourselves. If, by any chance, you still get stuck along the way, feel free to contact me and share your struggle in the comments section.
