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.
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.
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.
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.
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.
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.
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>
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.
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.
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>
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.
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.
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.
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.
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
Heya i’m for the first time here. I found this board and I to find It really helpful & it
helped me out a lot. I hope to give something back and help others like you
aided me.
Thanks for your comment.
I’m happy that you found my website interesting and helpful.
Wow, that’s what I was searching for, what a data! existing here at this website, thanks
admin of this web site.
Thank you for your comment. I’m so glad my article was helpful to you.
Hi there to all, how is all, I think every one is getting more from this web site, and
your views are fastidious for new people.
Thank you for your comment. I appreciate it.
I’m so happy that you found my information helpful.
This is a topic that’s close to my heart… Best
wishes! Exactly where are your contact details though?
Thanks for the comment. I’m glad you enjoyed my article.
You can find my contact information on the right-hand side of my blog under contact me.
I want to convey my appreciation for your generosity supporting persons that must have help with this one field. Your real commitment to getting the message across was quite functional and have truly permitted those much like me to arrive at their endeavors. This helpful tutorial denotes a whole lot to me and further more to my colleagues. Warm regards; from each one of us.
Thank you for your kind comment.
I appreciate it. I’m so glad that you and your colleagues have found this helpful.
I’m not that much of a internet reader to be honest but
your blogs really nice, keep it up! I’ll go ahead and bookmark your site to come back
later. Cheers
Thanks for the comment.
I’m glad you found my article informative and useful.
Heya i am for the first time here. I came across this board and I find It truly helpful & it helped me out much.
I hope to offer something back and aid others such as you aided
me.
Thanks for the comment.
I’m happy that you liked my articles and that they helped you out.
Please feel free to share my web link with your friends.
Would you mind letting me know which web host
you’re working with? I’ve loaded your blog in 3 completely different internet
browsers and I must say this blog loads a lot quicker than most.
Can you recommend a good internet hosting provider at a fair price?
Kudos, I appreciate it!
Thanks for the comment.
My server is IONOS one-to-one.
A fair price is subjective to what you need to be covered
and how large your site is, so it will cost differently for each person.
I hope that helps you.
Hey there would you mind stating which blog platform you’re working with?
I’m planning to start my own blog in the near future but I’m having
a difficult time making a decision between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your design seems different then most blogs and I’m looking for
something completely unique.
P.S My apologies for being off-topic but I had to ask!
Hi,
It doesn’t matter which platform you choose, they are all about the same.
I’m using WordPress for mine, but it’s hard to learn if you’re a beginner.
I believe it’s my theme that you like, and that is Gold Essentials.
Good luck with your future blog.
Did you write the article yourself or you hired someone to
do it? I was wondering because I am a site owner too and struggle
with writing new content all the time. Someone told me to use AI to
create articles which I am kinda considering because the output is
almost written by humans.
Let me know if you think I should go ahead and use AI.
I write all my own content. I DO NOT USE AI EVER,
nor would I suggest that you use it either.
Here is the reason I don’t use it.
I have done a lot of research on this subject,
and I have found that AI articles ONLY COVER VERY BASIC INFORMATION.
You can find basic information everywhere, it WILL NOT make your website or content
stand out or be different from anyone else’s website.
I want my information to be detailed and help my readers understand the ins and outs of my subjects.
I feel AI doesn’t give my readers enough information, and that’s why I don’t use it.
I hope you do your own research into this subject before commenting on an AI program.
First off I want to say awesome blog! I had a quick question which I’d like to ask if you don’t mind.
I was interested to find out how you center yourself
and clear your thoughts prior to writing.
I’ve had difficulty clearing my mind in getting my thoughts out.
I truly do take pleasure in writing but it just seems like the first 10 to 15 minutes tend to be wasted just trying to
figure out how to begin. Any ideas or hints? Many thanks!
Hello,
Thanks for your comment and compliment. I appreciate them both.
I don’t start out my writing sessions on my keyboard.
I start thinking about what I want to say in general before I ever get to the computer.
I also don’t write my articles from the beginning to the end,
instead, I add in the basics, then I go back and put in the beginning and end.
I find this method works well and allows me to get started writing as soon as I turn on my computer.
Give it a try, you may find this method works for you too.
Good luck and let me know if it works for you.
Aw, this was a really good post. Spending some time and actual effort to generate a really good article… but what can I say… I put things off a lot and don’t manage to get anything done.
Thanks for your very kind comment. I appreciate it.
Thanks for letting me know that you found my article informative and helpful.
I understand about putting things off, I use to do the same, but I found the older I got
the more I put things off and I wasn’t going anywhere with my life or my carrier.
So I decided to start this blog to not only help people like me but to bring in money
from writing from home.
I found this very rewarding, and it helps bring in extra cash as well. I started off small
and am building as I go. Once I got started it wasn’t hard to stay motivated and keep it going.
I suggest you do the same.
You are the only one who is holding yourself back. You can do this! It’s not that hard.
Good luck,
Wonderful article! We are linking to this particularly
great post on our site. Keep up the good writing.
My page; palmbomen Kopen
Thank you for your kind words. I appreciate it.
I’m glad you found my article helpful. Thanks for the linkback. I appreciate that too.
Lynne,
your articals is very helpfull for me.so you visit my blog. i hope you like it very much.
Hi,
I’m so glad you found my article on How to Create Easy Page Jumps & Back to top links Within WordPress helpfull.
It looks like you are putting the information to go use. Keep up the great work!
Lynne
I’ve been trying to figure this out for months and here you are showing it to me in less than two minutes. Your content is amazing as always, so keep up the good work and I hope your website “blows up” one day with traffic and rankings….
All the best to you!
Gorjan
Thanks, Gorjan for taking the time to read my article on How To Create Easy Page Jumps & Back To Top Links Within WordPress. I’m so very happy to hear that my article has helped you out. I too understand how frustrating Page jumps can be. I’ve struggled with them for months before I found something that actually worked for me, and would stay on my website and not disappear the next time an update came along. So I totally understand how you feel and what you were going through. That’s the reason I wrote the article in the first place, so other people wouldn’t have to go through what we went through.
Thanks for your compliment and your good wishes. I appreciate them very much.
I hope you continue to come back to read more of my articles in the future.
Lynne.