How to Create Easy Page Jumps & Back to Top Links within WordPress

Do you want your readers to be able to jump to the topics they’re interested in within your post, without having to scroll through lots of content? Then you need page jumps and back-to-top links. I’ll show you how to create them in this post.

 

Table of content:

 

• What are page jumps and why do I want them?
• My introduction to page jumps
• The reason their codes never work with WordPress
•  I finally found it
• Here’s the process
• Step 1: The base title
• Step 2: Placing markers
• Step 3: Placing the two-line code
• Placing your back-to-top links
• Saving and checking the page jumps
• My conclusion
• Subscribe to my e-mail list
• My closing remarks

 

What are page jumps and why do I want them?

Page jumps are links that take you to another section on your post page. They are designed to jump you to another section on the same page. They do not lead away from the post you’re currently reading.

Page jumps usually go from a table of content to a heading title, but you can use them in many other situations too.

These page jumps are very helpful to your readers. They allow them to scan your content for what they are interested in.

Having page jumps on your posts shows your readers you care about their time. It shows that you want to make it as easy as possible for them to find what they’re looking for.

Back to top:

 

 My introduction to page jumps:

Creating jump links is something that should be easy, BUT, it isn’t. As a matter of fact, it’s one of the hardest things I had to deal with during the last six months.

First off I had a very hard time finding a jump link that would actually work within WordPress.

Oh sure, there are several websites out there that have articles on how to do them, but they either didn’t work at all or only half worked.

What do I mean by only half worked? Let me explain.

Most blog posts on the internet that says they have jump links that work with WordPress are not telling you the whole truth.

Some have codes that work at first, but soon they don’t work at all and you’re stuck wondering why. While other codes don’t work from the beginning.

I’ve gone to several of these sites and tried their codes, only to be disappointed and frustrated when they didn’t produce what they said they would. After having this happen time and time again, I gave up trying to find one that worked.

Back to top:

 

The reason their codes never work with WordPress:

All the different codes I’ve ever tried to use were not designed to actually work with WordPress. That’s because they were giving me anchor links that were designed to go with other programs.

WordPress has compatibility problems with anchor links. Because these anchor links were not designed to work with WordPress, half of the links kept disappearing when I would update my posts or change anything within them.

Needless to say, that got real old, real quick. I hated having to redo all my jump links every time I needed to change something or when WordPress would come out with an update.

When you have several posts that all contain jump links and you have to redo them all every time an update comes out, you learn to dread those times. I knew there had to be a better way, so I kept searching.

Back to top:

 

I finally found it:

Flash forward almost a year and I’m glad to say, I’ve finally found a jump link code that actually does work with WordPress.

WordPress calls its jump links, Page jumps. They work with the code on your WordPress site and are easy to install.

Back to top:

 

Here’s the process:

This is a three-step process. First, you have to create the base title. This is usually done in a table of contents. Then you place markers throughout your document. Finally, you create the page jump link. It’s just copying and pasting.

Sounds easy, right? Well, it is. Here’s how it’s done.

Back to top:

 

Step 1: The base title:

 

First, you have to highlight the text you want to make into your base title. You want to highlight the whole title for this.

---

 

 

---

Now click on the link button at the top of your WordPress edit page.

---

 

 

---

This box comes up, and your base title is highlighted.

---

 

 

---

Now put a hashtag in the link box and the text you want to use for your base title.

You want to use only lowercase letters without any spaces between words and no punctuation marks.

I use the first three words of my heading for this. It will look like this.

---

 

 

---

Now click the apply button. It’s the crocked left arrow on the right side of the link box.

---

 

 

---

Now your whole base title should be highlighted and it should look like this.   

---

           

 

---

Here is how your new link appears. This is the first part of your page jump. This is what your readers click on to be taken to that heading title. 

---

 

 

---

That is how you do the first half of the page jumps. That wasn’t so hard, was it?

Now all you have to do is repeat the above process for all your other headings within your table of content.

Now that you have made your base title links, it’s time to create the page jump links that are connected to them. This is the place the base title will jump your reader to.

Back to top:

 

Step 2: Placing markers:

Before we create our page jumps, we have to know where we want the base links to jump to.

To accomplish this, go to the place within your content that you want the first link to jump to. I go to, two spaces above my heading and place four or five asterisks in that location. It will look like this.

---

 

 

---

Notice the line of asterisks just below the My closing remarks heading. This is the marker I placed there. It doesn’t really matter how many asterisks you put down. You just want enough of them to be able to find these markers in the code portion of your content.

You have just placed your first marker within your content. Now, you have to repeat this same process for all the other headings you have in your table of contents.

 

Here is the two-line code that you’re going to copy:

 

<div id=” base title”></div>

&nbsp;

 

Now it’s time to copy the above two-line page jump code. To do this, left-click on the beginning of the code and scroll across the code to highlight it. Now, place your cursor on the highlighted text, and right-click to bring up the text box. Now click on copy.

 Now that you have the page jump code copied it’s time to move on to step 3.

Back to top:

 

Step 3: Placing the two-line code:

This is the scary part of making a page jump. This part of the link must be made in the text portion of your post. Within the code section. It looks like this code sample is below.

---

 

 

---

I know what you’re thinking, “Man, I can’t do coding!” I thought the same thing when I first started out.

But, I’m here to tell you, you can do this. It’s not really that hard. Don’t be afraid of this page. We are not going to change very much of the code. We will only be adding two small lines of code.

Here’s how it works.

To get to the text portion of your post, click on the text button at the top right of your WordPress edit page. It’s just above the distraction-free writing mode button, which looks like a box with an x in it. 

---

 

 

---

          Once you click on the Text button your contents page comes up in its code form. It looks like this.

---

 

 

---

As you can see, this is the code portion of your content. This is how your computer sees the text you type and how it knows what to put where.

I know it appears kind of scary looking. But, you’ll get used to seeing this code as you learn more and use it occasionally.

I know what you’re thinking now, “How am I going to find where to place my page jumps in this mess?” That’s why I had you place the asterisks in step 2. If you look at the code example above you will see my line of asterisks at the top left side of my example.

Now you need to scroll down the page to the first set of asterisks. This is where you will place your first line of code. 

Now, place your cursor behind the last asterisk and very slowly backspace through them, to remove all the asterisks. Do not go beyond this last space. This is where we want to place our new code.

Now, right-click your mouse and paste in the two-line code. It should look like this.

---

 

 

---

You will notice the two-line code within the purple box, next to the point of the arrow.

Now you have to carefully delete the word base title from the code. Your quotation marks will now be together and should look like this.

---

 

 

---

 As you can see I left my cursor line in between the two quotation marks.

Now it’s time to type in the base title. (What you placed into the link box in step 1. Be very careful to type in the exact same title you used in step 1, Or the link will not work.

Now your code should look like this.

---

 

 

---

As you can see, I typed in the first three words of my heading, seeing as that’s what I’m using for my links.

I want you to notice that I’ve typed in my base title in between the quotation marks. My base title for this link was step3placing. It’s the first three words of my heading without any spaces. 

Now you click on the visual button, that’s next to the text button at the top right of your screen. This will take you back to the regular WordPress editor page. You will now see this.

---

 

 

---

As you can see from the example above, there is NOTHING between the back to the top and my heading title. You would think that it didn’t work. BUT, it has. It should appear as if nothing has happened. The change we made is in the code only. Even though it doesn’t look like it worked, it did and will show up when you publish the post.

Now all you have to do is repeat this process after each of your sections.

That’s it! You’re done! That wasn’t so hard, was it?

Important tip: I want to remind you to remember to use both of the code lines when copying the code into your text. If you forget to use both lines, the link will not work properly.

After you publish your post check all your links to make sure they work. If your links are jumping to the section, but are not at the section heading or are cutting off your first sentence, it’s because you forgot the second line of the code which is a space. This space is very important to have in place so the link does not cut anything off.

Back to top:

 

Placing your back-to-top links:

Your readers have clicked on a base title from the table of content and were taken to the heading they selected. They’ve read that section of information and now want to go back to the table of content to read another heading, but don’t want to scroll through the text to do it.

You’re in luck because this post has a back-to-top link after each section. If they click that link it will take them back to the top of the table of content. Now they can click on any topic title they want. 

Can you see why having back-to-top links is so convenient for your readers? Especially if they only want to read a few of your sections. Your readers will find this feature a blessing, and will more than likely return to your website to read more of your posts because of your consideration for their time and convenience.

Now that you have all your page jumps put into place and have them all saved, it’s time to put in some back-to-top links. These are super easy to do. You create these the same way you did the page jumps, except these links jump you up the page instead of down. Here’s how to do them.

Step 1:

You start by typing Back to top: at the bottom of each section. it should look like this.

---

 

 

---

It doesn’t have to be in colored text. Regular black text is fine. Now you highlight it and click on the link button at the top of your screen, just like before. It will look like this.

---

 

 

---

 Put a hashtag sign into the URL box and type on top next to it.  now, click the apply button. It will now look like this.

---

 

 

---

You have just created the first half of your back-to-top link. Repeat these same steps until you have a back-to-top under all your sections.

Step 2:

Just like before we are going to place a marker between your table of content titles and your list of contents.

---

 

 

---

This is so we know where to place our code in the text portion of our coded content.

 

Step 3:

Now it’s time to place the code where you placed your marker. Again you want to place this code into the text portion of your content, just as you did before. Here’s the 2 line code you’ll be copying and pasting into place.

 

<div id=”top”></div>

&nbsp;

 

It will appear like this within the text portion of your content.

---

 

 

---

That’s it! You’re done! That wasn’t so bad, was it?

Just like before this will appear not to have worked. Trust me, it did. Now, after you publish your finished post your back-to-top links will work.

Important tip: I want to remind you to remember to use both of the code lines when copying the code into your text. If you forget to use both lines, the link will not work properly.

Pro tip: You only have to create one back-to-top link per post and the one top link in the code section.

After you have created one back-to-top link, it’s a simple process of just copying and past all the other links you need into their places after each section.

Back to top:

 

Saving and checking the page jumps:

That’s it, you’re done. All that’s left is to click back to the visual portion of your content and click on save draft. Your content will now have your page jumps and your back to tops in place.

Tip: I have to let you know that these page jumps will not work inside your WordPress document. They will only work on your website after you publish your blog post.

After you publish your new blog post don’t forget to check every one of your new page jumps and back-to-top links to make sure they all work.

The last time I did page jumps I had to fix five of my links because I didn’t type in the correct base title. Even adding an extra letter will cause the link to not function, so double-check what you type into both places.

Back to top:

 

My conclusion:

That wasn’t so bad, was it? Even if this article was short and sweet I still covered the whole topic of creating page jumps and back-to-top links.  This is what I covered.

• What page jumps are
• The reason anchor links don’t work with WordPress
• My search for a jump link that worked
• Finding a link that works
• The 3-step process with a step-by-step tutorial with examples
• How to create your back-to-top links
• Saving and checking your page jumps

Now that you understand how to create page jumps and back-to-top links, I hope you’ll give them a try in your next post.

I know if you’re anything like me, you’re a bit nervous about trying this process. I wasn’t sure about changing my computer’s code either, but I was told it wasn’t very hard to do. I decided to give it a try and found it wasn’t very hard at all.

I’m not very tech-savvy and if I can do this, so can you. It really isn’t that hard.

Back to top:

 

Subscribe to my E-mail list:

Did you like this article? Would you like to receive notices when a new one is published?

If so, please sign up in the subscription box below. Your privacy is very important to me, so your e-mail address will NEVER be given out or sold.

You won’t get sent any spam either. I appreciate your support and want to keep you happy.

  

Back to top:

 

My closing remarks:

I hope you enjoyed this article and feel it has met all your needs. I would greatly appreciate a rating from you to let me know how I did. Please leave your 1-5 stars rating at the bottom of this article, just above the comments area.

If for some reason I haven’t met your needs, please let me know how to better serve you in the comments area, or by contacting me privately. I want to make it right.

You can now rate other people’s comments on this blog, but please be nice about it. Please, no flaming, or rude comments.

If you have any questions about this article or anything else please feel free to leave a comment below.

I would love to hear from you and help in any way I can. I’ll get back to you as soon as possible. (Usually within 24 hours or less.)

 

Do you feel this article has been helpful, and appreciate the information I’ve provided? If so, could you please share this article with your friends and family on your social media sites? I appreciate your support for this website.

Don’t forget to: “Like”, “Share”, “Pin”, and “Tweet” to show your support.

Thanks for stopping by,

Lynne

Back to top: