How to Create Jump Links or Anchor Links in WordPress

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

Jump links also known as anchor links are special links that when clicked take you to a different section of the same page. You may have come across these kinds of links before while browsing the web and visiting other webpages. They can be very useful when creating long posts which will require a lot of scrolling. In this post, we are going to look at how to create jump links in WordPress and how they work.

Please accept preferences cookies to watch this video.

What are anchor links?

Anchor links sometimes known as jump links or a table of contents are links that take you straight to another section of the page when clicked. They are made up of two parts, a hashtag link element, and an ID attribute.

If you are still not sure what anchor links are or how they work just click the link below.

Take me to the Smooth Scroll CSS Code

Create anchor links AKA jump links on your #WordPress website. Quick and easy guide! #ThriveWP #anchorlinks Click To Tweet

Jump links and anchor links how to use them in WordPress

Now that you have tested the link and have seen what it does, let’s dive in and show you how to add a jump link on your WordPress website.

We would advise against using a plugin for this because adding a plug-in adds more code to a website which can slow it down. It will also add another point of access for hackers and for a simple anchor link there really is no need to add a plug-in with lots of additional code just to achieve a link.

Let’s get started adding your first anchor link

You can start by either editing or creating a new post or page. Next, you need to write the text that will be the clickable link. You then need to highlight the text and click the link icon in the WordPress Gutenburg editor. A small box will pop up, in this box you should type # followed by whatever word or words you wish.

Important to note is that you keep the words lower case and without spaces. Something like the below image.

Anchor Link

You should now have some text that is a clickable link. This link, however, will not do anything at the moment because you need the second part of the code.

Don’t go running for the hills when I say code it’s very very simple. All you need to do is find the section you want that link to take a visitor to when clicked. Then pick some text in that area (i usually use a heading). What you would then do is change the WordPress editor to edit that heading as HTML and insert the following code.

Edit HTML in Gutenberg Editor

This is where you need to remember what name you gave your link above. It’s important that you use the exact same phrase for both or it will not work.

<h2 id="anchorlinkone">This is the heading text</h2>
Jump Link in WordPress

You can then put that heading or text back to the visual editor if you like. It doesn’t look any different on the front end. Now once you refresh your page your anchor text link should be working.

The text you chose to link to does not have to be a heading tag though it could be normal paragraph text. What is important is that there is some kind of HTML tag you can add your ID attribute to. So we could edit some paragraph text and add to it like below.

<p id="tagname">normal paragraph text</p>

So there you have it you now know how to create jump links in WordPress

A jolting experience!

You may have noticed when using anchor links or jump links that it is quite a jolting experience. The transition is not very nice, you click the link and bam its right there. It’s fast but this kind of jolting transition is not very nice or user-friendly.

Want to know how you can make this transition a bit more smooth and user-friendly? Read on.

As we mentioned above the transition can be pretty nasty so we are going to use a simple line of CSS code to change this behavior. You may also like our adding CSS styling to the code block post.

In your WordPress admin dashboard, you need to go to Appearance > Customize somewhere under customize, you will see Additional CSS. The position of this depends on your theme but it will be there somewhere, most often at the bottom. Click on additional CSS and then copy and paste the code below.

html {
  scroll-behavior: smooth;
}

Once you have done that click publish in the customizer and your done! If you have a cache plugin installed you may want to clear the cache. Now refresh your page and test the jump links. They should now scroll smoothly, this is a small effect but one that makes the experience on your site much nicer for users.

Is this all too confusing? Click here and I will help you get this sorted on your site.

Gavin Pedley

Hey, I'm Gavin!

I am a self-confessed geek and love to help people with their WordPress websites.

Learn More About Me