How To Create a Page Jump in WordPress (Quickly & Easily)

Last update:

This article shows you how to create a page jump in WordPress. A page jump, also known as an anchor link, is a link that jumps to another place on the page.

There are two parts to creating a page jump:

  • the target text and
  • the link.

The target text is where you put your anchor. Normally, people insert an anchor.

But if you’re using Page Builder (it’s free and I highly recommend it) you can skip Step 1.

That’s because Page Builder inserts anchor IDs throughout your page. All you need to do is get the number of that unique anchor ID and create your link.

This is how to do it:

Lets say I want to create a page jump that takes the reader back to Heading #3 in my post:

create a pagejump

Highlight and copy the heading that’s going to be your target text:

Now open your published article and look at the source code for that page.

In Chrome, go to ViewDeveloper, and View Source:

pagejump

In Firefox go to ToolsWeb Developer, and Page Source:

how to create a pagejump

Then, in Chrome, go to EditFind, and Find…:

page jump in wordpress

In Firefox go to EditFind:

In the Find field type in the text of the heading.

When you’ve found the heading text in the source code, start looking for a CSS ‘id’ field.

In CSS the ‘id’ class is always unique so the number in this field will serve as a good anchor for your jump link.

Copy whatever number is in the ‘id’ field and then simply go to the text in your article where you want to insert the link.

Highlight the relevant text and use the insert link function as you normally would. Then paste in the unique ID number preceded by a hash or pound sign:

Press OK (or in the above example press the blue button with an arrow) and you’re done!

Now you know how to create a page jump in WordPress.

How To Create a Page Jump in Elementor

You can also create a page jump in the free version of Elementor

Here are the steps you need to follow:

  1. Drag the Menu Anchor widget to the top of the area you want the link to scroll to
  2. Give the anchor a name. (e.g. anchor-1)
  3. Edit the menu or widget element that will be linking to your anchor
  4. Type ‘#’ + the anchor name (ie: #anchor-1) in the URL link field of the menu item or widget element. 

Note that ID link ONLY accepts these chars: `A-Z, a-z, 0-9, _ , -`

Photo of author
AUTHOR
Rob Powell
Rob Powell shares the traffic building techniques that are working for him. Join him as he 'cracks the safe' on search engine traffic for bloggers - find out what works (and what doesn't).