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.
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!
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:
- Create the URL
- Attach the URL to the words that you want to function as the link.
- 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:
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.
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:
Here’s the title I made into a link:
Here’s where you’re taken when you use the link:
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.
Gutenberg has totally simplified the method for making jumplinks…Yay!
LikeLike
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.
LikeLike
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!
LikeLike