• Skip to main content
  • Skip to primary sidebar

WPisLife

WordPress - Blogging - Internet Marketing

  • WP Commerce
  • WP Hosting
  • WP Plugins
  • WP Themes
  • WP Tutorials
  • Product Reviews

Date Published: May 6, 2017 | By: Marvin

How To Create a Page Jump in WordPress

34
SHARES
ShareTweetFree Guide

In this tutorial, I will teach you how to create a page jump on your self-hosted wordpress website

What is a Page Jump

Page jumping is a neat trick where if you click a link somewhere in a post, it will take you instantly to a certain location on that post, may it be further up or further down a long post. This is especially useful if you have a very long post with several topics, so what you can do is to create some sort of table of contents at the beginning of your post, and in this way, your readers can just click on a topic that interest them and they will be taken to that topic instantly

How To Create A Page Jump

Creating one is actually very easy to do and you don’t need any special kind plugin to do it. I actually made one myself  on one of my published article and you can find the page jumping demo on my post “how to start a blog”

There are 2 steps in creating a page jump and I will be using that post as my example to demonstate how to create a page jump

Step 1: Creating the Unique Identifier for the Target Text

To create the unique identifier, you need to switch your content entry box to text

, How To Create a Page Jump in WordPress

Then you need to insert the unique identifier id=”unique-id” to your target text like the one below

, How To Create a Page Jump in WordPress

On my example, I inserted id=”lesson1”, where lesson1 is the unique identifier, in the H2 tag but you can actually insert it anywhere on the article, and could be on other header tags or paragraph tags. I just strategically inserted it on the H2 tag because that is also the title of one of the topics. Just make sure that the unique id has no spaces in between as it might cause compatibility issues with older browsers.

Step 2: Creating the Link

Creating the link to the target text is very easy, it’s just the same as creating anchor texts but instead of url, you need to specify the unique identifier as reference with a sharp (#) sign at the beginning. You can see the image below for sample

, How To Create a Page Jump in WordPress

And that’s basically it. I just made several more to target all the topics on my posts.

Creating A “Back to Top” Page Jump

This is just to enhance the page jump, so that when readers were done reading one of the topics and would like to go back to the top of the page, they can easily do that without scrolling all the way to the top.

The process is just the same, you just need to create a unique identifier to reference the top most page, and in this example, the H3 tag “Main Lessons” with the unique identifier “top” (see image below)

, How To Create a Page Jump in WordPress

Then at the end of each topic, I created a button that says “Back To Top”. I just made it a button for aesthetic purposes but you can make it as an ordinary link as well

, How To Create a Page Jump in WordPress

And the code is just like this

, How To Create a Page Jump in WordPress

Wrapping Up

And that wraps up this tutorial. If you are still having problems on setting up page jumps on your own. Don’t hesitate to contact us or comment below. If you think this tutorial helped you, please do share this guide to others as it might be able to help others as well.

Related

Affiliate Disclaimer: Some posts and pages, especially product review articles, may contain affiliate links that if you click on that link and decide to buy the product, I will get a commission.

Browse by Categories

  • Journeys
  • Making Money
  • Other Products Reviews
  • Product Reviews
  • WordPress Commerce
  • WordPress Hosting
  • WordPress Plugins
  • WordPress Security
  • WordPress Themes
  • Wordpress Tutorials
  • WP Plugin Reviews
  • WPisLife Blurbs

Reader Interactions

Comments

  1. Muneer says

    August 26, 2017 at 3:06 pm

    Wonderful article.
    Before i found your blog then I’m able to do by my website according to your information.
    Thanks for sharing

    Reply
  2. Cadu de Castro Alves says

    February 28, 2018 at 10:07 pm

    Hi!

    I built Anchor Links, a free Chrome Extension that makes this process easier and very straightforward.

    There is no need to switch to text mode anymore.

    All you have to do is to highlight the target anchor and click on the extension button on Chrome.

    Behind the scenes, the ID is auto-generated, added to the target tag (headings, paragraph, images etc) and copied to clipboard.

    Then, you just need to highlight the text you want to convert to a link and paste the anchor link.

    You can see more about this here: https://medium.com/@castroalves/medium-anchor-a-must-have-chrome-extension-for-bloggers-c45dfdc6b91e

    I appreciate if you can try it out.

    Reply
  3. Ankurman Handique says

    July 18, 2018 at 8:14 am

    Your article really saved my time. I was thinking of installing a plugin for this, but I happen to read your post and it was damn easy to follow.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

DISCOVER THE EXACT BLUEPRINT ON HOW I BUILT WPISLIFE FROM SCRATCH AND EARNED MY FIRST $4K ONLINE…Click Here To Learn More

Popular Posts

  • Link Whisper Plugin Review: Can it Really Help You?
  • WooDropship Review: An In-Depth Look At This Plugin
  • Spocket Review Dropshipping Made Easier
  • Shopmaster Review: Is It An App Worth Getting?
  • Oberlo Review: Yet Another Dropshipping App

Copyright © 2023 · WPisLIFE