How to Create Jump Links or Anchor Links in WordPress

8th March 2019

White Label WordPress Care Plans UK Jump links WordPress

Jump links also known as anchor links are special links that when clicked take you to a different section of the same page. It’s known by many names, some call it a page jump link or page jump HTML. 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.


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

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 link to another section of the page by adding 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 Gutenberg 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 behaviour. 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 customise, 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.

Gavin Pedley

Gavin Pedley

Gavin is the guy behind the award-winning ThriveWP. He has over 18 years of experience creating, developing, hosting and managing WordPress websites.

Gavin regularly shares his expertise via the ThriveWP blog and Youtube channel, where he creates informative and helpful WordPress tutorial videos.

Connect with Gavin on FacebookLinkedin or Twitter.

Share this article

Subscribe to receive articles right in your inbox

Get Your Free Guide On Keeping Your WordPress Website Safe

Subscribe to learn how to keep your WordPress website safe, starting with this free guide. Unsubscribe with one click at any time.

We hate SPAM and promise to keep your email address safe. Here’s our privacy policy.


Three amazing products that will enhance your website performance, ranking and maximise your income! Our eBook offer includes three eBooks in one bundle.

We hate SPAM and promise to keep your email address safe. Here’s our privacy policy.