WordPress allows you to add hyperlinks with utmost ease within the click of one button. However, it doesn’t yet have a way to create jump links from within the dialog box.
Jump links, also known as anchor links, are links within an article that take you to a specific part of a page, instead of the default location at the top.
Jump links allow readers to “jump” through the article. It lets the reader go to various locations within the article itself. Thus, making it a great asset in tutorials and how to articles.
You can try it out below:
Why create jump links in your article?
Links are created so that the readers find it useful. So you need to create jump links if you want your readers to go straight to the important parts.
- If your page has a lot of names or topics, you can create jump links to allow your visitors to go straight to the info of the topic they’re interested in.
- If it’s a tutorial or a how-to article, you may want the readers to go to specific steps or paragraphs according to their need.
- To add a “Return to Top” at the end of a page.
- Write Footnotes.
So let’s say you’re writing something, a tutorial maybe, and you want your readers to be able to jump to a specific part of the page, rather than the top. Or you may want them to JUMP TO THE TOP OF THE PAGE, or the bottom or middle.
The good thing is it is possible.
Just a little bit of bad thing is that you’ll have to get into the text editor and do a bit of manual playing. You’ll also have to add a small bit of HTML code into your text editor.
So, here’s what you need to do:
1. Identify Where the Jump Will Start and End
There are two parts in a page jump – target text and the link.
When the link is clicked, it will bring your visitors to the place in the page where the target text exists. You’ll have some text at the top of the page, that you may want to use to create jump links.
For example, let’s say you have some topics like these.
Then you’ll have subheadings on your page, using, say, Header 3 style, that matches with the topics.
Locate the end point or the target text, i.e. the subheadings on the text editor.
It will probably look like this:
2. Add an id Attribute to your HTML
Once you’ve located the target text to create the jump link, you’ll need to add some code to the tag. The code we’re adding here is the id attribute. Add the code in the heading tag such that this:
<h3 id=”introduction”>1: Introduction</h3>
Pay attention to the spaces. Leave a space before the “id” but there shouldn’t be any space between the closing quotation mark and the > symbol. Remember, you’re only adding characters.
The text inside the quotation marks is the identification for the link to use. You are free to use any word or letters that you like. Just make sure there are no spaces since that can cause problems in older browsers. Also, be sure to use a unique ID for each target that you create.
3. Go Back to Visual View to See If It Looks OK
Although you added the id attribute, the subheading on your visual view should look just as it did before. With no visible changes. So, switch back to visual view to make sure you added the code alright.
4. Add a Link in the Origin
You’ve prepared your target text to create jump links. Now you can use the built-in WordPress link dialog box to add your link like you usually do. Highlight the text you want to turn into a clickable link, here, the subheading title at the top. Click the insert link icon in your editing toolbar.
Now, instead of entering a URL, simply type the number sign, let’s not call it hashtag for now, (#) followed by the word you placed between the quotation marks in your id attribute. Like this:
Add in a title if you want to, and add the link. The text should now be a blue color like links usually are.
5. Test the Link
So, that is it. You can now successfully create jump links in your article. Was it difficult? Absolutely not. Jump links are so cool and fun. Plus they also keep your readers engaged. So go on and use this feature to your blogs and articles.
Do you like to create jump links? Are they useful to your website? Let us know in the comments below.