This works just like creating and adding the code for the link with a slight difference and that is simply personal preference.

You can jump to a specific text, in my example it’s the “Third Sub-Heading”. I can “page jump” directly to this text line and it works fine. However, if I include the header title into the code, it will jump slightly underneath it. This means, the header title won’t be visible after the page jump and starts right underneath with the first sentence.

This is not crucial for the page jump to work, I just prefer that the header title is the starting point after the page jump.

To do that, we don’t add the header title to the code place the code right above the title. But before we do that, we have to customize the code for the target from page 1 of this tutorial.

Notice a slight difference in both codes? The target code has “name” instead of “href”. Codes with “href” are links, as we used for the link. The target itself is not a link, so we don’t create a link. We create the “landing spot” for the jump. That’s where the ID comes in.

We set the ID in the link using a hashtag (#) format. Just like you see on Twitter. In the target code, we add the ID without the hashtag (#). This tells WordPress where the landing spot is.

ID with hashtag (#) = Starting point, link from

ID without hashtag (#) = Landing point, not linking from

I want the page jump to land right above the sub-heading. That’s why I won’t include the header title. I don’t need the part saying “Target Text” and shorten the code to this:

In this code, I need to replace with the ID I set in the link code. I gave it the ID "#sub3". We remember, no hashtag (#) for the target. ONLY for the link. So, adding the ID, my code for the landing spot looks now like this:

Once you’ve added the ID and if you want the text/header of the landing spot, save it to a notepad/text file for easy copy and paste later.

1) If not already, click on the “Text” tab to switch into HTML mode again. Remember, you can simply go back to the “Visual” tab and add a few XXXX before, after or before and after the text you want to jump to.

2) Copy the code snippet you’ve saved on a notepad/text file. Highlight the code snippet, right mouse click and then “copy”.

3) Since I want it slightly above the title, I put a space between the last word of the paragraph before the sub-heading and the sub-heading. To do so, simply put the mouse cursor at the end of the paragraph and hit enter.

4) Find the spot (look for XXXX if you added those) you want as a landing point, click to add the mouse cursor, right mouse click and “paste” the code in there.

5) Click “Save Draft” or “Update”, if the post/page is already published.

6) Go back to “Visual” to check if the code has been placed correctly. If the landing spot is set correctly, you’ll notice a little anchor symbol. This is invisible at the frontend and only for you to know that you’ve created a “page jump” aka “Anchor Text” in this article. It tells you, that a “page jump” has been added correctly.

7) Delete “XXXX” or any other stuff you’ve added to help you find the right spot. It’s not needed anymore. Click “Save Draft” or “Update” again.

Now you need to preview the post/page. Do that by clicking on “Preview” and check, if the page jump works. Click on the link you’ve set first on page 2 of this tutorial. If created and added the codes correctly, you’ll notice a quick “jump” to the spot on your article you’ve defined as landing spot with an ID.

In my example, it looks like this after the jump:

Works? Congratulations! You’ve successfully created and added a page jump in WordPress.



Join the Discussion
Write something…
Recent messages
RobinA8181 Premium
Starred this (and liked it) for future use.
Reply
NicoleJBN Premium
Thank you. Glad to hear it's a keeper. :)
Reply
NWTDennis Premium
Thanks again Nicole for this Tutorial in response to my Question. I have a sense it will come in handy for many members. What makes it so confusing is the upside down Chinese salad (HTML strings). The XXXX locator trick is indispensable.

Hopefully once I do a few, I'll get more confidence in doing page jumps. There is so much value added to a website (better experience for both human and Google spider visitors) by them.

I'm considering the WP Plugin, but want to wait until I'm sort of caught up on my site. Taking care of business as we go probably makes the task a lot simpler.
Reply
NicoleJBN Premium
Hi Dennis,

thank you for your kind feedback and I hope it will be very beneficial to others.

I totally agree, having a little helper in the form of some X's or so helps a lot. When you scan the code for the right spot all you need to look out for are those X's.

You will, Dennis. I was very hesitant as I started to look into HTML. The fear was huge that I break more than improve. But once you get into it and you start to understand it, it's easier than you think. And fun too.

If you want to get into HTML, I highly recommend to create a dummy website (e.g. a free SiteRubix website works great for it) or a dummy page on your existing website and test codes on it. If something goes wrong, you're not ruining your article as you may not remember how to undo the codes.

So, don't worry. It doesn't take long to get the hang of it.

If you want to learn more about it, HTML.net is a great starting point worth a look. :)

All the best,
Nicole
Reply
SuzQ Premium
Great detailed training. wondered if I could ever accomplish something like this when I had seen it used on sites. Great to know. In your training you help to take some of the hesitation out of coding!
Reply
NicoleJBN Premium
Thank you for the kind words and I'm happy to know that this training was helpful to you.

Hesitation describes it quite well. I hesitated to get into it too. I was afraid to break instead of make it better...lol.

But once you get into it, it's not that hard to understand. And it's quite fun to see what a simple code snippet does to your website.

And next time you wonder about something, remember, it's just a tiny code that is responsible for these amazing features - and easy too. :)
Reply
AlejandraB Premium Plus
Thank you Nicole for this great training, I didn't know we could do this on our blog posts, will book mark this training, I'm sure I will use it later.
Alejandra.
Reply
NicoleJBN Premium
You're welcome, Alejandra. It's amazing what's all possible with a basic code like that. There are actually other kinds of page jumps you can use. They allow you to jump from one article to a specific spot on a different article. I will cover this later in another training though.

Glad you found this training helpful. :)
Reply
bidnesslady Premium
Thank You, Nicole!! Had no idea what that was. Lol :)
Reply
NicoleJBN Premium
Glad it was helpful for you. :)
Reply
Top