Learn How to Do Page Jumps in WordPress Easily

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.

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.

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. Highlighting the text first will let you see where you are when you go into the Text mode.

<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 (the ID can be anything) it’s time to setup the link to it.

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.

Page Jump in WordPress

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

Example:

Jump to Another Page

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.

Please Rate this Article

Please take a second to rate this. It helps us deliver to you the stuff you enjoy.

Learn How to Do Page Jumps in WordPress Easily
5 (100%) 1 vote

Author: Thor

I started blogging in 2009 for my wargaming blog. I've been blogging ever since. I even created a niche site about miniature storage of all things.

I have created a free 40K roster builder. I've also set up, maintain, and run my wife's site where she sells the Makeup Eraser.

I'm also a PHP programmer for a local web hosting company where I develop WordPress plugins.

Leave a Reply!

Note: You can comment as a guest by clicking the field indicated Name and checking off “

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of