Home » How to Create WordPress Page Anchor Jump Links

How to Create WordPress Page Anchor Jump Links

Jump links are a great tool to make your article more readable and create better user experiences. Those are links that you click on, and they scroll all the way down or up to the specific spot of the article that you needed. This is to ease both the users and your editing or reading process and save the time to jump to the desired part instead of scrolling down through a long text. There are many ways to use page jump links. This article will review what jump links are, their pros and cons, and give you step-by-step instructions on how to create WordPress page jump links to specific spots.



What are Jump Links?

Jump links are specific links you add to any part of your article so that when your website visitor clicks on them, they direct him to one particular spot of your article. So basically, help your users to transfer from one location of the article to another one.

For example, you are talking about cars and mention five different models. Create a jump link for them to make it easy for your visitor to find the model they want. And if a visitor clicks on Ferrari word, which is a jump link, that link will direct them to the part of the article you wrote about Ferarri.
So the primary function of jump links and explanation of what they are is an example given above; they just direct anyone to the specific part they want to read about.


There are many ways to use WordPress page jump links; for instance, you can use them for the table of contents, so when users click on a subheading, they’ll automatically get to the specific subheading. Or, as in the example given above, you can use them in the article itself to direct viewers to the part they might be more interested in. Also, you can create page jump links to the Top or the other way around.

The main reason to use page jump links is that it shows your viewer that you value their time. When you create a jump link, your viewer, reader, or client can choose what part they need to know or read and click only on that subheading or subject. To learn more about something they desire. Sometimes it can be hard and time-consuming to find the part you need in the extensive article with no jump links. And many users do not wish to waste so much time to find the necessary part; often, they skim read or just skip the article and try to find something more specific and compact.

wordpress-page-jump-links.jpg

What is an Anchor Link?

So we got to know what page anchor links are and why you would need them, and now the most significant part is WordPress page jump/anchor links, and after we comprehend this part, we will finally review the step-by-step instruction for creating those.


WordPress page jump/anchor basically is the same thing as ordinary jump links cause they perform the same function. Although there are many ways in which you can create those in WordPress, such as with Classic text editor, Gutenberg blocks, or with the plugin, which adds advanced functionality and tools to your editor. Down below, we will review and answer how to make page jumps on WordPress.


How to Create Anchor Links with Classic Editor?

To create page jumps with Classic Editor, you will need to write specific codes, do not worry. Those are easy to remember and write from scratch. 

Above on the right side of the editor where you have written your article, you can see a tab labeled “HTML” sometimes; it can be labeled just “Text.” Click on that tab to switch the format of the article and be able to write the necessary code. 

Your link code supposed to have this form <a href=”#name”>Your Link Text</a> 

Now a step-by-step guide for you:

  1. Create a name for your jump link.
  2. Place the name “#name” here instead of the name letters.

Your target has to have this form: <a name=”name”></a> or <a name=”name”>Target Text</a>

  • Between ><, e.g. type >un1< or target text >Jump to the end of the post<

That’s pretty much it; also, make sure that you are using unique IDs for each jump link. 


How to Create WordPress Jump Links with Gutenberg?

If your format of editing, writing, and structuring your article is not a classic WordPress editor but is Gutenberg blocks, do not worry. Just create a separate block and click on a “+” sign, then type in the search line “Custom Html” to insert anchor HTML. Then the right thing will pop up; click on that, and done, now you can write your custom HTML. 

You can do the same thing by highlighting the necessary part of the text, or heading, for example, in the table of contents, then clicking on “Advanced” and selecting “HTML Anchor.” 

Steps:

  • In the empty field, type the name 
how-to-create-jump-links-on-wordpress.jpg

Make sure to keep in mind the name of your anchor link. 

  • Go to the part of the article you want the anchor link to direct users to
  • Select the text blocks 
  • Click on the link button
  • Use this format #create-anchor-link (create anchor link)
  • Type # then type the name of an anchor link you have created earlier 
  • Click on Save Draft

Done; if you complete these few simple steps, you will create an anchor link in Gutenberg Block.

Check out this video instruction.


How to Create Page Jump Links with the Plugin?

Luckily for you, WordPress also offers the TinyMCE Advanced plugin. This will allow you to create page jump links easier, the previous two methods. Basically, this plugin provides advanced Editor Tools. 

Also, this plugin ads Classic Editor block in your Gutenberg blocks editor. The main features of this plugin are:

  • Classic Paragraph block for Gutenberg editor 
  • Ability to set Font Family and Font Sizes
  • Supports converting of most default blocks to classic paragraphs

Besides, the notable advantage of this plugin is that it does not store/restore user-related data anywhere, is not connected to third-party websites, and does not use cookies. So your website’s user privacy is secure. 

Here is useful step-by-step video instruction.


How to Create Jump Links to the Top

One of the most popular forms of jump links, especially in Wikipedia, directs you to the Top of the article, and here is how to create them. Type <a name=”top”></a> and insert it somewhere in the Top wherever you would like, you can do it even in the heading. Then somewhere in the middle or at the end of the article, type text, go to the top and insert the code <a href=”#top”>Go to the Top </a> 

The easier way to do this, is with Gutenberg, using the same principle as with the table of contents.

pros-and-cons-template.jpg

Pros and Cons of Jump Links / Anchor links

Before we jump to a WordPress part, let’s quickly review some pros and cons of those links. 

Pros:

  • Creates a better user experience by allowing everyone to find what they need several times faster than they would do that without jump links. 
  • Help visitors/users find what they need multiple times faster because it shows users that you value their time.  
  • You can share direct links to different sections of the article, which can be particularly helpful when sharing your article on social media. Maybe you need to share only one section of it. 

As with everything else, those links have some downsides. And those downsides are quite severe, and they make you think about whether jump links are worth it or not. 

Cons:

  • They decrease the average time spent per user on your website. 
  • It decreases your ad revenue. Because when a user skips through content, potential chances for ad clicks decrease as well. 

Before creating anchor links, carefully think about what is a priority for you at this point in time. Take into consideration at what point of development is your website/blog, and will jump links benefit you, or will they possibly cause more harm. 

I will recommend not making them for small websites because it is important how much average time users will spend on your website. However, for big websites who already earned their reputation, I will recommend them to use anchor links in order to make the user experience better. And drive more traffic, increasing shares of specific sections of the article. 


Summary

This article covered nearly every part and possible method of creating the jump links, including WordPress editor, Gutenberg blocks, jump links to the Top, and even a plugin to create jump links with a link to video instruction.

So I hope this article was helpful for you.
If you have any further questions or feedback, please do not hesitate to write them down in the comments section.

Check out our WordPress tutorials on our Youtube channel! You can find us on Facebook! We are also on Twitter!

Harley

Leave a Comment

Your email address will not be published.

Don՛t Miss Out...

FoxLMS Plugin Now Available!

Easily create, manage, and sell courses on WordPress with the new FoxLMS plugin.

Use the coupon code below and get 20% discount

DISCOUNT20

This will close in 0 seconds

Scroll to Top