I’ve created a dummy post for a better visual understanding. I’ve highlighted the areas where I set the link and the target.

First, you need to set the link. This is going to be the starting point for the page jump. In my dummy post, I’ve highlighted some text in red and I want the word HERE to be the link, which will page jump me to sub-heading 3 when I click on it.

To create the link, we need to add the code from page 1 of this tutorial to that word. Or in other words, we have to turn “HERE” into a clickable link.

First, you need to replace the code with your own text.

It requires a “unique name” and a “Your Link Text”.

I want to jump to “Third Sub-Heading”. The unique name is the ID of the jump. It helps WordPress to identify the spot it has to jump to. You can name it anyway you want, but it’s always good to keep it short and relevant, so that you know where it’s jumping to. Only you can see this on the backend. It’s not visible for your website visitors.

My “unique name” is “sub3”.

Now the code looks like this:

I want to turn “HERE” into a clickable link. To make this happen, I have to add “HERE” into the code.

I replace “Your Link Text” with the word “HERE”.

The finished code for the link now looks like this:

Now the code is ready to be placed into WordPress.

Write your finished code snippet into a notepad or text file, so that you simply can copy and paste it into your post. Your code snippet should look like this now:

And that’s how it’s added to the post/page.

1) Log into WordPress and go to the post or page you want to add a page jump to. Click “Edit” to get to the WP Editor.

2) Click on the “Text” tab to switch into HTML mode. Now the Chinese upside down part begins. If you have a hard time locating the text you want to hyperlink, simply go back to the “Visual” tab and add a few XXXX before, after or before and after the text you want to link to. This will help you find the right spot in the code salad.

Adding XXXX:

3) Copy your code from the notepad or any text file you typed it in. Highlight the code snippet, right mouse click and then “copy”.

Find the spot (look for XXXX if you added those) and highlight the word you want to use. Right click on the highlighted text and click “paste”. This wraps the word into the code and turns it into a clickable “Hyperlink”.

Highlight:

After Copy & Paste:

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

5) Go back to “Visual” to check if the code has been placed correctly. As you can see, “HERE” has been converted into a link. You can also “Preview” your post to see if the link shows up.

6) 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.

The first part of the page jump is done. Now we need to target the spot. We’re going to do this on the next page.



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