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.
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 after 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 <p id=”anchorlink”>some words</p>
That’s all there is to it. Now just publish your work and test out the link to make sure it works.
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.
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!
Scroll down a way to leave any comments or questions.