How To Create Jump Links In WordPress

Learning how to create jump links in WordPress, or what many people call “page jumps” can be very useful to people that come to your site.

If you don’t know what a jump link is, basically it’s a block of text that when clicked will send you to a specific part on a page.

Normally you’ll see many people create a small table of contents at the top of their post that will let people quickly go to the middle or end of their page.

Here’s an example of what jump links look like:

Topics:

Creating Your link
Creating your target
How to send readers to the top of your page
How To Create Jump Links To Other Pages Of Your Site
Why Should You Use Jump Links

Now that you understand what a jump link is, let’s now get to the main part of this post which is how to create one.

How To Create A WordPress Jump Link

I’ll admit the first time I tried to create a jump link I was totally clueless and spent hours trying to figure it out. Honestly though I blame it mostly on the websites I was looking at — because they made it more confusing then it really should have been.

So to put it simply, there’s only two parts you’ll need to create a jump link:

  1. The Link
  2. The Target

Let’s first talk about the link, and how you’ll go about constructing it.

1) Creating Your Link

Creating both your link and target will require a simple HTML code that you’ll be putting in your text editor of WordPress.

The code you’ll use for the link will be this:

Jump link code<a href=”#unique-name”>Your Link Text</a>

This is the part people will click when you want to send them to a specific part of your page.

In the link itself you’ll want to create a unique name with the hashtag symbol before it, plus have a visible text link saying whatever you want.

Let’s take a look at this page your to see how I constructed this link.

Example

Let’s use the jump link I created sending people to the section of my post talking about why you should use jump links.

First I created the unique name “why use jump links”.

My unique name<a href=”#whyusejumplinks”>Your Link Text</a>

Then I made my visible text say whatever I wanted. So I simply used the header title “Why Should You Use Jump Links” as my visible text in this situation.

creating text<a href=”#whyusejumplinks”>Why Should You Use Jump Links</a>

Now once you have your link all set up, you’ll simply click the text tab in WordPress and place your link wherever you want.

Again this is what people are going to be clicking on, so more then likely you’ll want this at the top of your page somewhere.

Where to place links

2) Creating Your Target

Now that you got your link all set up, it’s now time to create your target (or the place you want people to go after they click your link).

The code you’ll use to create your target is:

Target code<a name=”unique-name”></a>

Continuing with the same example above, let me show you how I did this.

Example

So as you just saw, I made my unique name “why use jump links”, so in order for my target to work I’ll need to use this exact name again.

target code example<a name=”whyusejumplinks”></a>

As you can see I used the exact same name here just without the hashtag. Now I’ll head back into the WordPress text tab and place this code where I want people to be go.

From what I’ve seen, the best place to put this code is right above the spot you want people to go. This will allow them to read whatever you have there without part of it being cut off.

place code above headers

How To Send Readers To The Top Of Your Page

Now that your readers have gotten to the middle or bottom of your page, what if they want to quickly go back to the very top?

I’m sure many of you have seen where an arrow or a block of text will say click here to go back to the top right? Well you can easily do this with the same target and link code’s we just went over.

First you’ll want to put the following target code at the top of your page:

code to send people to the top<a name=”top”></a>

Next you’ll want the following link code wherever you want someone to click:

link to send people to the top<a href=”#top”>Go to the Top</a>

Again you can put whatever text you want, but I normally like to put “Click Here To Go Back Up” or “Go to the Top”.

Here’s an example of it in action.

Go to the Top ^

How To Create Jump Links To Other Pages Of Your Site

I got a comment recently asking how to create a jump link from one page to another, so I decided to update this post and add this into it.

Now in order to do this, you’ll still need a link and a target to make it work — however the main difference is that your link is going to look a little bit different, and you’ll be placing your target on a different page.

So to start off, let me first show you what the link is going to look like.

Creating Your Link

The code you’ll be using to create your link will look like this:

jump link to new page

<a href=”http://yourwebsite.com/somepage#unique-name”>Yourlinktext</a>

To give you an example of what this will look like, let’s say I wanted to explain in further detail how to create a group of words into a hyperlink.

So I would then create a unique name for my target, as well as copy and paste the page I want to jump to into the code where it says “some page”.

In this example, I’ll call my unique target “creating a link with words” — so my link will look like this now:

Here’s what it would look like now:

example of jump link to new page

<a href=”https://generateonlinerevenue.com/3-ways-on-how-to-create-a-hyperlink-in-wordpress#creatingalinkwithwords”>Creatingalinkwithwords</a>

Now after I paste this code into my text editor of WordPress, It will create this link here…

Creating a link with words

After that’s done, now I’ll create my target.

Creating Your Target

Now All I have to do is create my target on the desired page and spot I want my link to go to. So I’ll simply use the same target code I showed you earlier in this post, and place it on the other page.

Here is the code I’m using, and a pic of where I placed it on the other page:

target code for new page

<a name=”creatingalinkwithwords”></a>

Where I place my target code

There you have it. Now when you click on the link above, you’ll be sent straight the this exact spot on the other page.

As you see its not that hard, and basically it’s just like creating a regular jump link — expect for a few minor adjustments.

Why Should You Use Jump Links?

The thought might have crossed your mind by now wondering what’s the point of even creating a jump link when you can simply scroll down and accomplish the same thing.

I would say jump links serve as two main purposes:

1. They give a brief overview of what the reader is about to learn. People online tend to jump from one website to the next scanning to see if what their looking for is on a particular site. By having a small table of contents with jump links at the top of your page, they can quickly glance and see what your page is about.

2. It lets people quickly jump to the content they want. Instead of making your readers scroll all the way down your page over content they may not necessarily be interested in, with jump links they can go right to the topic there interested in with a click of a button.

Next time you’re surfing the web, take a note as to which sites are using jump links. I think you’ll start to see the ones that do use them are much easier to navigate and allow you to find what you’re looking for a lot faster.

A Quick Recap On How To Create A Jump Link

Creating jump links is very useful, and is something that isn’t all that complicated to implement either.

So to give you a breakdown of what I just went over, here’s the two steps on how to create a jump link again:

1. Create a link with the code <a href=”#unique-name”>Your Link Text</a>. Make the unique name and link text whatever you want, and place is preferably somewhere at the top of your page

2. Create a target with the code <a name=”unique-name”></a>. Use the same unique name you have in your link text (without the hashtag symbol), then place it wherever you want someone to go after they click on your link.

Final Thoughts

Creating jump links in your articles is a great way to enhance your readers experience when they visit your website. It allows them to “jump” instantly to wherever they want without having to scroll through your entire page.

If you start incorporating these jump links into your own blog, don’t be surprised if your bounce rate starts to drop and you get people coming back to your site more often.

You see when Google views your site as a place people like to come to and interact on, they will start to rank your site a little higher in the search engines allowing you to get more traffic.

However this is only one metric Google looks at, as there are thousands of things they consider too. For me personally I was totally lost on how to get search engine traffic until I came across Wealthy Affiliate.

They taught me everything I know from creating a website, how to get traffic through SEO, then teaching me how to convert these people into paying customers.

Join Wealthy Affiliate

So do you have any questions or maybe some tips you would like to share regarding jump links? Do you currently use them in your site, and if not do you think you will start now?

Let me know your thoughts in the comment section below. 🙂

Want to turn your passion into a thriving online business?
Check out this simple 4 step formula millions of people are using to make money online!

CTA image

8 thoughts on “How To Create Jump Links In WordPress”

  1. I love jump links – I used to use them all the time when I wrote web pages with HTML. I kind of forgot about them when I switched over to WordPress – thanks for the reminder I should start to use them again!

    Reply
    • You’re welcome Heather. Yes jump links can definitely come in handy and is something I highly recommend everyone use once in a while in their post — especially if it’s an extra long one.

      Reply
  2. Hey. The guide really did help me. You explained it in the best way and now I know how to create jump links. 

    This will make it easier for visitors to navigate on my site. Sometimes I write a post for over 3000 thousand words and having such a function can be useful. Thanks.

    Reply
    • No problem Michael, glad I could help. I would definitely say this can come in handy with your 3,000 word article for sure.

      Reply
  3. This is exactly the kind of information I was looking for on how to create jump links. I too have been to many sites that gave confusing information. 

    Your website post was the first one that actually made sense and I found your directions easy to follow. Have you written a post about using jump links to land people on a different post altogether?

    I’m going to bookmark your website for future reference.

    Many thanks, Jeff.

    Reply
    • I have not Jeff, but I will update this post very soon and incorporate how you can also use jump links to send people to specific spots on a different page.

      So keep a look out in the next week or two, and I should have this updated showing you how to do this by then. 🙂

      Reply
  4. I have never used jump links but have seen them on other sites. 

    I have bookmarked your site for future reference due to these will come in handy on my website and make my site more user friendly. 

    Thank you for the information. When you mention placing it in the text editor of Word Press are you talking about the the text tab part on your post and where would I go if I want them on a Presentation Page?

    Reply
    • You’re correct as you will want to put your codes in the text tab within WordPress. If you look over this post again, I have screenshot showing exactly where you’ll want to go, and where you’ll want to place your codes at.

      I’m not quite sure what you mean by presentation page, but whether you’re creating a post or page within WordPress — the method I talk about here will work for either one.

      Reply

Leave a Comment