I like to have a list of headings at the top of my posts. In this list, I create anchor links to the headings on that same page. Anchor links allow you to link to a different part of the same page. First, you assign an anchor with the text you want to be the destination of your link. Second, you create your link by adding the symbol ‘#’ before your anchor text. Third, you click apply. Then you have an anchor link within your post.
In my post I will show you in easy steps how to create anchor links in WordPress Gutenberg editor.
OK, let’s get started.
- Step one – Create the anchor.
- Step two – Create your link.
- How to test your anchor link before publishing.
- Conclusion.
- Frequently asked questions.
Step one – Create the anchor
First thing you need to do is select the text that you want to link to.
For me, I create a contents list at the top of my posts. So I need to select the sub-headings to be my anchors.
I will show you how I create anchor lists for this post I am writing now.
You can see above, that I have a sub-heading. ‘Step one -Create the anchor’.
That heading is going to be my first anchor.
I highlight the text.
Like this.
On the right of the screenshot above, you will see a drop down box labeled ‘Advanced’. Click on that.
Like this.
To create your anchor, copy and paste your text into the ‘HTML Anchor’ box.
Like this.
Step two – Create your link
After your anchor is set. Then you can create the link.
I like to have content lists at the top of my posts. I will create a link to this anchor in my content list.
First, I need to start a list block. To do that I click on the plus symbol in a circle at the top of this edit post screen.
Like this.
I use the list block quite a lot so it is showing up in my most used list.
If you want to start a ‘List’ block but don’t see it here. Just type ‘list’ into the search box at the top.
Once I click on list I get this block on my page.
My first sub-heading will be my first link.
In my list, I will type my heading. Once I finishing typing, I highlight all the text and click on the link symbol in the tool bar.
Like this.
In the box that appears after clicking on the link symbol, we first type the ‘#’ symbol and then the exact text in the ‘advanced’ drop down box on the right.
Like this.
I always copy the text from the ‘advanced’ box and paste it into the link box.
Don’t forget you need the ‘#’ symbol before the text. If you don’t have this the link will not work.
When you have pasted the text into the box. Click on the arrow symbol to the right of the text you just pasted.
Once you click on the arrow, your anchor link will be ready. The anchor link will turn blue to show that it is now a link.
Like this.
How to test your anchor link before publishing
When I first started creating anchor links I was worried that I hadn’t done it correctly and the link wouldn’t work.
To test your link works. Click on ‘Save Draft’ on the top right. Once it finishes saving, click on ‘Preview’.
Here is a preview of my blog post.
You can see the blue anchor links.
To test your links work. Click on each one of them to make sure you go to the correct place on your page.
I have just checked my links in this post. They all work fine.
Conclusion
I think it is important to have good navigation in your blog. You want your visitors to get to the place they want to read with ease.
In long blog posts, having anchor links will really help your visitor find what they need quickly.
Not all your visitors are looking for the same thing so I like having my sub-headings as a list with anchor links near the top of my post.
My visitor can then decide what part of the post they want to start with.
Creating anchor links may look at bit hard at first, but once you do it a couple of times it isn’t that difficult.
Frequently asked questions
How do I link to a specific part of a page in WordPress?
To link to a specific part of the same page in WordPress, you need to create an anchor link.
My post above is a step by step guide how you can create an anchor link when using WordPress Gutenberg editor.
How do anchor links work?
Anchor links work in the same way as internal or external links. Once you click on the link you get taken to somewhere else.
Anchor links are for directing your visitors to somewhere on the same page.
For example, I like to have a list of my sub-headings at the top of my posts so that my readers can decide what part of the post they want to read first.
Once my reader clicks on my anchor links in my contents list, they go to the sub-heading of that link.
What is a jump to link?
Jump to links are anchor links. Some people call them jump links, some call them anchor links.
These links allow your readers to jump to a different part of your post without having to scroll down.
Comments
Do you use anchor links in your blog posts?
Did you know you could create anchor lists in WordPress?
I look forward to reading your comments.
