Anchor links are a useful way to navigate a long piece of content. They allow you to skip to the part of the post that you want to read without scrolling all the way down.
In this post I will show you how to easily add anchor links or jump links as they are sometimes known to a WordPress blog post using the Gutenberg editor.
You can see a video showing you step by step how to do this below. Alternatively, keep reading for the written tutorial.
Set Up Your Post For Anchor Links
Before you start creating anchor links you need to set up your blog post so it is ready for the links to be added.
If you have already written the blog post then you have the sections that you want to skip to in place. These are usually the headings throughout your post.
For this example I will have three paragraphs, each with the title Paragraph 1, Paragraph 2 and Paragraph 3.
The three paragraphs will be the sections that we can skip to using the anchor links that we will be creating.
Once we have our sections and titles in place we now need to add a list near the top of the post from which we can link.
In this example our list will be –
- Paragraph 1
- Paragraph 2
- Paragraph 3
The titles in your list will be the headings of each section in your blog post. To create a list just use the LIST block in the Gutenberg editor.
Now your blog post is ready to have the links added.
Creating Anchor Links
To create the anchor links you don’t need any plugins or coding knowledge. Everything you need is built in to the Gutenberg editor.
First you need to scroll down to the first heading that you want to link to. In our demo post example below it is Paragraph 1 (circled red in the picture).
After you click on the heading that you want to link to, you then need to navigate to the side bar where it says ADVANCED.
Click on the down arrow next to it and a drop down box will appear that says – HTML Anchor.
In the drop down box type the name of the heading that you are linking to without any spaces between words. In our example, it is paragraph1 as you can see in the image.
The next step is to go back up to your list that you created earlier and highlight the first title on the list.
When you click on the block that the list is in, a tool bar will appear above it. Click the LINK icon (circled red in the image below).
Clicking this icon will bring up a box to type the link in to. For this step you need to type # plus the title you added in to the HTML Anchor box.
In this example I will type #paragraph1.
Then click the APPLY arrow at the side of the box. The title in the list that you have created will now change colour to show that it is a link.
If you click on the link it will take you to the part of the post that you set it to link to.
Follow the same steps for each of the headings on your list.
Don’t forget you can see the video version of this tutorial above. You can also find more tutorial videos on our Youtube channel.
There are more tutorial blog posts here.