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.
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.
Alejandra.