A Quick & Easy Jumplink Method | WordPress.com 2018

Introduction

Many of the posts I write are really long. I’ve been lobbying WordPress to add a feature which would allow me to easily create a ‘Table of Contents’ for my Readers. So far, other than what seems to be significant interest by other members of the WordPress.com community…people like me who create websites, WordPress.com management and even WordPress.com Support doesn’t seem inclined to want to consider the concept of adding this as a new feature. It appears they don’t necessarily understand what useful purpose a fully functioning Table of  Contents might serve.

Below are 2 examples of Table’s of Contents…one from a recent post of mine that I added as a navigational aid, but that lacks working links. Creating the hot links is the time consuming part and it’s the reason why I’ve been lobbying for them for a few years now.

My Table of Contents for My Hip Replacement Post

The 2nd is a WordPress.com Support post.

You’ll see if you visit the post that the Table of Contents links are hot, or functioning links.  Clearly having a Table of Contents that actually functions as a tool for Readers is the more desirable to of the two examples!

WordPress Support's Table of Contents

What are Jumplinks?

Both posts utilize a feature called jumplinks. Jumplinks are manually created hotlinks to another place within the same post. The jumplink instructions I’ve found are all different and all contradict each other. Therefore…learning to create jumplinks has not been an easy task.

This is one of the most important reasons why an automated Table of Contents would be such an amazing feature for WordPress.com users.

My Quick & Easy Method of Creating Jumplinks

Jumplinks consist of 2 parts. The first is the actual link itself. In the screen shot from my post above…the link in the Table of Contents entitled ‘Why Pears are My New Favorite Fruit.

The 2nd part of the jumplink is called the anchor point. It’s the location that the jumplink takes you to. You need to create a unique name for each anchor point that you want to create a jumplink too.

There are 3 steps to making a jumplink:

  1. Create the URL
  2. Attach the URL to the words that you want to function as the link.
  3. Make the achnor point or the place the link will go to

Creating the Jumplink URL

Creating the jumplink is super easy. It wasn’t always that way. It took days of work for me to figure out through testing many iterations of various examples which methods really do work and which combinations don’t. I’ve finally hit upon the perfect combination of simple coding that consistently works!

You can just copy the URL of the post or page and add #uniquename at the end of it. (You add this immediately at the end after removing the last  ⁄︎   )

uniquename = the name you’ve given to you anchor point

To create the actual link, just use the regular link creating mechanism and add the post’s URL with the ending / removed and #Anchorpoint at the end for the link.

Creating the Action Which Takes You to the Location Referred to in the Jumplink

Select the words that you’d like to be the destination for the jumplink. Wrap those words with:

IMG_6866

That’s all there is to it. Now just publish your work and test out the link to make sure it works.

Example

If you’d like to see an example of using this method, refer to this post and try out the link in the red box in the screenshot below.

Post example of this Quick method

2nd Example

Another jumplink I created is in my New Player Guide for PokémonGo.

Here’s where I wrapped some text with the anchor word:

22EED0DA-467B-473F-9AC2-9781BED6BF2F

Here’s the title I made into a link:

5BE4E325-6060-4B8B-9E67-6A4C145B5C9C

Here’s where you’re taken when you use the link:

AD4B9CA2-1A16-4C2A-978C-FB8342196D1F

One Remaining Problem

I’m not entirely sure why not, but whenever I try to wrap headlines (ones that use header tags) in the destination code, my jumplink never works. I can’t imagine why not. My work-around is to pick some other words close to the headline to wrap instead. But if someone could explain more about why this problem occurs to me and how to prevent it…I’d appreciate it!

This is just one more reason why I think that an automated Table of Contents based upon header tags, would be a really great feature to have!

Comments

Scroll down a way to leave any comments or questions.

About vsajewel

Hi...I'm the author of 2 main blogs on WordPress...vsatips...where I write tech tips for mobile devices...primarily ios...2nd is vsatrends...where I write less about tech things and more about everything else. I also host a YouTube channel which I use to better illustrate some of the 'how to's' in my posts. I love everything about technology. Currently, my main interests/platforms are ios, Windows and Amazon Echo. Recently I decided we were spending way too much money with our local cable provider. So I decided to cut the cord. There is a definite learning curve, especially the antennae part, but we successfully did that and are now saving a boatload of money, so I write some about that. I also am extremely conscientious about security because of an event my family endured , so I write a lot about that too. Two sub-categories of security I tend to focus on are the password manager Dashlane and Hardware Firewalls. Last, I take a lot of notes and have been a beta tester for Evernote for many years. I love Evernote! In recent years Apple has beefed up Apple Notes a lot...so it’s become a fairly serious note contender...as long as its OK if you lose or mess up all your Apple note data. I write about those 2 note platforms primarily.
This entry was posted in Blogging, Tech Tips, WordPress and tagged , , , . Bookmark the permalink.

3 Responses to A Quick & Easy Jumplink Method | WordPress.com 2018

  1. vsajewel says:

    Gutenberg has totally simplified the method for making jumplinks…Yay!

    Like

  2. Meritorious says:

    Might it not be jumping from one article to another article’s section due to the fact that I am previewing the article and it is not published yet?

    Atleast in preview it still opens the top of the supposed jumplinked URL when the link is clicked rather than jump straight to it, despite having fully repeated writting of the code mention in here.

    I remember from my programming class that in some keyboards the “example” symbols used for HTML coding actually look visually same, but there are two kinds of unicode versions for those, as one of them is not registered by HTML and one is,

    And the one that was not registered in some keyboards was the reason why HTML code did not work properly.

    Like

    • vsajewel says:

      That’s really interesting! You may be right. I don’t know much about coding but your idea sounds logical to me. Thanks so much for visiting and taking the time to shed some light on this!

      Like

Please leave any comments or questions here and thanks for visiting!

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