Quietly seated in front of your computer, you are looking for inspiration for the design of your blog.
One of the results from Google catches your eye. You click to open it and start reading.
You start scrolling it, a little lower, a little more and “ Oh god, but this article is way too long, I’m not interested, all that… Where does it talk about the tools to use?! “.
You see me coming, with my Table of Contents ? Yes: an excellent solution for make it easier to read of an article or a page, with a large volume of content, is to insert a summary with anchor links.
But what is it ? How to do ? What use? Stay with me. At the end of this article, you will have answers to these questions, and will know precisely how to create anchors in wordpress. Simply, and step by step.
Originally written in September 2020, this article was last updated in September 2022.
What is an anchor link?
An anchor link is a hypertext link which, when a user clicks on it, automatically redirects him to another location on the same page, or to an external page. The visitor no longer needs to scroll the page indefinitely to find the information he came for.
Technically, the anchor element is an HTML element
<a>(for anchor or anchorin English).
The text between the tags
<a> constitutes the anchor. By extension, this means the full link, i.e. the tag
<a> and its contents, as in the example below:
<a href="https://thecoupononline.com">Se rendre sur WPMarmite</a>
An anchor link can be added to any element: text, image, title etc..
To properly grasp the concept of anchor, let’s take a simple example. In this article that shows you how to install a plugin, a summary at the top of the page summarizes its content.
You can orient yourself in the content thanks to the titles of each part.
By clicking on the title of your choice from this table of contents (this is often where anchor links are inserted), you land directly on the part you have chosen to discover:
The anchor is therefore what makes it possible to make this link between the summary and the corresponding sections of the article.
Why create anchors with WordPress?
Now that you understand what an anchor is, you might be wondering if it’s useful. Well yes, no big surprise. And this, for 3 main reasons:
- it improves the user experience (UX, User experience). This is a very good way to make it easier for Internet users to navigate a page, since they can directly access the section of their choice, as you saw earlier in the example on the table of contents;
- the display of your pages in Google search results can be improved. The search engine may show some anchor links under the meta description of your content, which can improve the click-through rate on your content, and therefore increase traffic to your WordPress site;
- you can link to a section of another page. And this, even if it is in the middle or at the bottom of it. Let me explain: imagine that you are writing an article. You talk about your services and you want to link directly to a specific offer, which is at the end of your prices page. Well, it is thanks to an anchor that you will be able to do it. I detail how to proceed at the end of the article.
Everything clear to you? Now, time to practice. Learn how to set up an anchor in WordPress.
To make the exercise even more concrete, I will design a summary in which I will add an anchor link. Ahead !
Step 1: Create the anchor on the title block of your choice
Let’s start with create the identifier of the anchor which will be found, not in the summary, but in the body of the text.
For this step, it’s just a matter of giving it a unique name. Here’s how:
- first of all, choose the block of the chapter you are interested in, the one you want to point to, for example an h2 title. We can imagine that it is called “Create anchors”. Click on it;
in the “Block” column of the editor, on the right of the screen, click on “Advanced”. Then, in the “HTML Anchor” field, choose the name you want to give to your anchor. This is its identifier.
Choose a simple and short name, such as ”
creer-des-ancres“, for example. The best is to give a name related to the section to which the link is created.
Regarding the name of your anchor, the WordPress documentation offers some practical advice, to follow or risk seeing your anchor non-functional:
- use a unique name per anchor and per webpage;
- anchor name is case sensitive. You can use upper and lower case, as long as it remains understandable;
- you can use some special characters like the hyphen “
-» or the underscore «
_to separate two words, but no space (everything must be glued). Also avoid accented characters;
- the first character of the anchor name must be a letter.
The WordPress content editor can be a bit misleading in the words it uses when adding your HTML anchor. It does not allow creating a “unique web address”, as it suggests.
It allows you to add an identifier, as we have just seen, that you can use to create links to the chosen element, that’s all.
Step 2: Create an anchor link to your HTML anchor
For the second step, go back to the beginning of your article:
- start by creating your summary, using a “List” block, for example. Fill in all the chapter titles of your article. Finish by highlighting the chosen chapter name. Below is “Create anchors”, for our example:
- create a link with the anchor name added earlier (
creer-des-ancres). Be careful, there is a subtlety here. This name must be preceded by the character
#. In our example, this gives:
This link will lead to the element with the corresponding identifier in the current page (the one you chose in the previous step, i.e. your h2 title):
And that’s it, it’s all good: your anchor link is up and running. Congratulation !
In our example, we created an anchor link to a page title. In general, any element allowing to insert a hypertext link (ex: title, text, image etc.) can become the link to the anchor of your page.
For adding an HTML anchor, the WordPress documentation states that the setting is available for all blocks except :
- the Classic, Read more, Search, Page break blocks;
- Widget blocks (except Social Network Icons which offers it);
- embedded Content blocks;
- Theme blocks.
If you do not want to go through the “HTML anchor” option offered by the WordPress content editor, it is also possible to create an anchor manually in HTML code, still on the content editor.
I unroll the thread just below, always in two stages.
Step 1: Create the anchor for the chosen section
Start by choosing the block that interests you. Here, I will resume my example of the h2 of the previous explanation.
Click on the button of the block with the 3 small dots, then choose “Edit in HTML”.
The h2 chosen above is called “Create anchors”. When you go to HTML modification, you will see:
From there, manually add an attribute
id at the h2 tag, to give your anchor a name (it will be invisible on the visual editor). Which will give:
If you want to do the same thing in a paragraph, or any other type of block, it’s entirely possible.
The only difference is that you won’t be working with an h2 tag, but with a tag
p (for paragraph) for example. Which would give here:
Step 2: Place the anchor link in the table of contents
Again, return to the summary that you created beforehand, to move on.
In this summary, choose “Edit in HTML” again, if this is not already the case.
Around the anchor text (the name of your chapter), add a tag
<a>and add an attribute to it
href having the name of the identifier as its value, in order to create a clickable anchor link.
Don’t forget to add the prefix
# to refer to the attribute
id of the block to which it is linked.
So you will see:
Again, be careful to use exactly the same name (first ”
creer-des-ancres “, then ”
At the beginning of the article, I promised to explain to you how to use an anchor on WordPress to send your readers directly to the middle of another page.
To understand, I’ll take the example I used: you have a page of prices with several services. In your last article, you want to send your readers directly to the last post on this page.
The first thing to do is obviously to create an anchor on the block of this famous last performance (ex: “
derniere-prestation “), whoever she is. But now you know how to do that. 😉
Then, when you create the link in your article to your service, all you have to do is:
Enter the page URLfor example : ”
- Then add the prefix
#the name of your anchor, for example: ”
By clicking on your link, the person will arrive directly on the last service on your rates page.
Alright, so far I’ve shown you how to create an anchor manually, either using the WordPress content editor, or HTML code.
To be even more exhaustive on the subject, know that it is possible to add anchors on WordPress with an extension. I tell you more about it in the next section.
Do you regularly write articles on your blog? Rather long articles on which you are used to integrating a summary (table of contents) with clickable anchors?
Well know that it is possible to automate this process and go even faster when you create anchors on your WordPress site using an extension. For this, there are several solutions that we will see in detail.
Option 1: Use the LuckyWP Table of Contents extension to create a table of contents
Different plugins are lining up on the official directory to help you design a table of contents. Among the most famous, you will come across Easy Table of Contents, Table of Contents Moreor LuckyWP Table of Contents.
This one caught my attention because it is the best rated of the three (4.9 stars out of 5) and that she is very simple to usewith lots of customization options.
In particular, you can add a table of contents automatically, by choosing its location (eg before or after the first title, after the first block of text, etc.). Or, of course, embed it manually wherever you want in your content using a dedicated Gutenberg block.
Once it’s done, you can act on the content, the mode of operation of the summary and its appearancewith the following settings, among others:
- add numbering for your titles;
- customization of the name of your table of contents and the different labels (“show”, “hide” etc.);
- possible management of colors (background, border, title, links etc.) and font (size, weight);
- possibility to activate the nofollow attribute.
Download LuckyWP Table of Contents:
Option 2: Go through a Gutenberg block extension
If LuckyWP Table of Contents and the like are focused on a particular goal – adding and customizing a table of contents -, there are other more general extensions with an option to add a summary.
This is the case with Gutenberg block extensions. These are plugins that offer their own blocks (content elements) dedicated to the WordPress content editor. They allow you to add titles, sliderscalls to action, forms, search bar, price tables etc.
And, of course, for some: a table of contents. You won’t always find settings as advanced as with a dedicated extension like LuckyWP Table of Contents, but it may sometimes be enough for you depending on your needs.
Among the Gutenberg block extensions offering a table of contents, I could for example quote you:
Option 3: Use Elementor Plugin
Finally, the last option I wanted to talk to you about is based on the use of a rather special plugin, since it is a page builder.
Her name ? Elementor (aff link). This is the most famous of the WordPress ecosystem, which has more than 10 million users across the planet:
A page builder, called “page builder” in English, allows, thanks to modules (image, text, button, video etc.) and ready-to-use models, to design the visual appearance of your site without putting the hands in the code (or very little). It is very often used in drag and drop. We present ten essentials in this article.
From its free version, Elementor has a widget dedicated to the creation of anchors on WordPress: the so-called “Anchor menu”. It looks like this:
To use it, follow this small dedicated tutorial.
Do you want to go further and start getting started with Elementor? Find our user guide dedicated to the page builder.
And to fully create professional WordPress sites with it, discover our dedicated training on the subject 👇👇👇:
Along these lines, you have discovered several ways to create anchors in WordPress. In summary, you can opt for one of the following solutions, depending on your needs:
- native features of the content editor;
- HTML code;
- a dedicated WordPress plugin.
Do not hesitate to do tests on a draft to fully understand the manipulation to be carried out.
Remember, the most important thing is to keep the exact same anchor name! With the
# for the clickable anchor link, and without the
id of the anchor connected to it. Once you understand how to do it, it will be a breeze for the rest.
Remember to use it as soon as you have long content. Your readers will thank you.
So, do you want to use anchors now? Tell me in the comments what you’re going to test them on first.