A page jump is when clicking a link takes you to a specific part of a page or post, historically called an anchor link. It will “jump” you down a page.
Setting up page jumps in WordPress is great when you have a page or post with a lot of information and you want to let someone navigate to specific sections within it. These can also be used to link to a section on another page entirely, not just the page you’re on.
Below I’ll show you how to do a proper page jump in both the Classic WordPress editor and also in Gutenberg. It’s easy to do for either editor.
WordPress Page Jumps
Setting up a page jump (anchor link) in WordPress is really simple. You don’t need knowledge of HTML or programming to do it, and you don’t need a plugin.
I’ll show you everything you need to know below.
Let’s dive in!
Set Up the Anchor/Target
Setting up the anchor/target, and setting up the link, can be done in either order. I just like to create the anchor first and then setup the links to them. Either way is fine.
So, find the area you want someone to jump down to. Ideally this will be a heading or subheading, something distinguishable.
It can be anything too, not just text. You could make an image an anchor if you like, and it would be done the same way you see below.
Now, highlight the text that’s serving as the target (anchor) and click on the Text tab in the WordPress editor if you’re using the Classic editor.
Highlighting the text first will let you see where you are when you go into the Text mode.
If you’re using Gutenberg then you’ll want to click the More Options button on the block and click Edit as HTML.
<h2>An Article Heading</h2>
It will look something like that, assuming you picked a heading as the anchor/target.
All you have to do is give the anchor of the page jump an ID.
<h2 id="jump">An Article Heading</h2>
Once you’ve done that it’s time to setup the link to it.
Tip: Keep the ID simple and one word. Including symbols or spaces in the ID can cause issues.
Now, let’s say you’re not linking to a heading. Maybe it’s just some text you have. In this case, it’s going to be a little different as the text may not already be contained within an HTML element.
Let’s use this as an example.
Text being used as an anchor.
Unlike the heading, we have to create an HTML element, so that we can add an ID to it and make it an anchor.
So, what we’ll do is wrap that text in a span tag. Span tags are often used as ways to create visual styles using CSS (cascading style sheets). However, today we’re just going to use one to be able to assign an ID to some text.
<span>Text being used as an anchor.</span>
And of course it needs an ID to be an anchor, so:
<span id="jump">Text being used as an anchor.</span>
Anchor Link/Page Jump
To create the link for the page jump you will do like you usually do to create a link, but there’s one big difference. The link you insert will begin with a pound sign (#) and be followed by the name of the anchor/target, IE: #jump.
So, select the text you want to make an anchor link to the target and do this.
The pound sign designates the link as an anchor link, or page jump. What follows it is the anchor since you can have multiple anchors on a given page or post.
So, you could have a list of page jumps, each going to different sections, and thus each differentiated by different IDs.
Page Jumps to Another Page
To do page jumps to other pages, you follow the same process but the link is a bit different. The link you setup will be like: https://yoursite.com/pagename/#jump
So, you would start typing into the link box, select the article or page, click into the text box, go to the end of the URL, and then add in the target, IE: #jump.
That’s how you link to another page that you’re not on and to that specific area (anchor link / page jump).
That’s All, Folks!
Seriously, that’s all there is to create page jumps in WordPress. It’s a very simple thing to do that can be very valuable to your visitors.
If you have any problems at all then please leave me a comment and I’ll try to help you out.