Your Website Sorted!

How to Create Jump Links or Anchor Links in WordPress

Share on facebook
Share on twitter
Share on linkedin
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.

Subscribe to our channel

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.

Share on facebook
Share on twitter
Share on linkedin

You may also like...

Free Guide!

5 Essentials For Keeping Your Website Safe

Your website is critical to your business - are you taking care of it?

  • Learn why backups and a disaster recovery plan are vital for your business
  • Understand why you should never give our your main passwords to third parties
  • Put together a WordPress website management schedule that helps you and your employees
  • See why it’s important to choose a good web hosting company for your website
  • Learn what happened to one business owner who neglected his website

Industry leaders when it comes to WordPress website management

Gavin Pedley

Gavin is the guy behind ThriveWP. He has over 13 years of experience creating, developing and managing WordPress websites. Gavin also runs and maintains large online forums such as the WindowCleaningForums.co.uk. Gavin regularly shares his expertise via the ThriveWP blog and Youtube channel, where he creates informative and helpful WordPress tutorial videos. Connect with Gavin at Facebook, Linkedin or Twitter.

Free Guide!

5 Essentials For Keeping Your Website Safe

Your website is critical to your business - are you taking care of it?

  • Learn why backups and a disaster recovery plan are vital for your business
  • Understand why you should never give our your main passwords to third parties
  • Put together a WordPress website management schedule that helps you and your employees
  • See why it’s important to choose a good web hosting company for your website
  • Learn what happened to one business owner who neglected his website

Schedule a call with us

mail

5 essentials for keeping your website safe