Link to Any Spot in a WordPress Post with Jump Links

A “jump link” in WordPress is when you link to a specific spot, or target, on a page. Clicking that link takes you directly to the place you’ve specified.

You might be familiar with this function in Microsoft Word, known as bookmarking.

Jump links (or bookmarks) allow you to create content where readers can instantly go to a spot on your page, just by clicking the linked text.

They are especially convenient for a mini table of contents at the top of any page, or to quickly get to sections when you have a lot of content on a single page.

• How to Create WordPress Jump Links
• Other Important Rules for Jump Links
• Linking to Specific Spots on Other Pages
• Linking to the Top of the Page
• Becoming a Target Master

How to Create WordPress Jump Links

Creating jump links is fairly easy, and can be done by going into the Text tab of the Classic WordPress editor.

Jump links consist of two parts:

1. The Link
2. The Target

When the Link is clicked, it will bring your visitors to the location on the page where the Target text exists.

The link is represented in code by href.

The target is represented in code by id.

The Link

The link code uses the following format:

<a href="#unique-name">Link Text</a>

You need to create a unique name for your jump link and place that in your coding. (See below for parameters on what is meant here by unique.)

You must always precede the unique name with a hashtag #.

Example:

The unique name for this jump link is: music-history.

The code would like like this:

<a href="#music-history">Link Text</a>

The visible link text can say whatever you like. Here we’ll use “Music History”, as it’s the header we’ll be linking it to.

<a href="#music-history">Music History</a>

 

The Target

The target (the spot where you’re jumping to) will need to take the following form:

<a id="unique-name">Target Text</a>

Or, you can do without the target text, and simply place the code in your editor.

<a id="unique-name"></a>

Example:

In the example above, I made my unique name “music-history,” and so I need to name my target exactly the same (hashtag # is not needed for the target).

<a id="music-history">Music History</a>

Or, if I’ve decided not to use target text, it would look like this:

<a id="music-history"></a>

Other Important Rules for Jump Links

Because this is code, even thought it’s basic, it is important to know a few finer points that apply here. Close doesn’t cut it… much like being off by only one number on a credit card… it must be exact.

ID (Unique Name) Parameters

1. No Spaces: The ID word cannot have spaces, but can have mixed caps.
   Examples:
   “Hello Friend” won’t work.
   “HelloFriend” or “hello-friend” will.
2. Must Start With a Letter: The ID is an alphanumeric character string, so it can contain letters and/or numbers, but it must start with a letter.
   Examples:
   “321hello” won’t work.
   “hello321” or “hello1” will.
3. Use a Keyword: This one is optional. It can be easier to write and remember keywords rather than code, but either works.
   Examples:
   “HelloFriend” or “hello” are easy to remember as a reference, whereas “hf1” or “he110fr1end999” aren’t.
   Any of these will work, but the first two will be easier to recall.

Placement

There may be times you’d prefer not to put the code on top of text; perhaps a spot on your site where a toolbar or other element might potentially cover up what you want visible when it’s jumped to.

The way to get around this is to put the “target” just ABOVE the spot you actually want your visitors to jump to.

For example, if I want to make sure my visitors can see my heading labeled “Music History”, and there’s another page element covering it up, I could put the target code ABOVE the heading I’m linking it to, like this:

Which results in this…

Other Code

Keep in mind while you are in the HTML/Text editor, you’re going to see more than just your jump link codes. You are going to see all of the HTML code, interspersed with all of your content text.  Focus on the code specific to jump links―to see that it is formatted & placed correctly―and try to tune out the rest.

Example:

Linking to Specific Spots on Other Pages

Once you set up these jump links and test them out, you will notice that when you jump to a target, the URL in your browser changes to reflect exactly where you are.

Example:

If your main page is mysite.com/music/, and you jump to your “Music History” target, your URL will now show as mysite.com/music/#music-history.

Because of this, you can also set up links between pages and go directly to the spot on the page that you want.

Example:

If you have posts and pages on your site about all your interests, and you wanted to link to the “Music History” section” of your “Music” page (mysite.com/music/), you would link directly to that spot: mysite.com/music/#music-history.

Linking to the Top of the Page

Perhaps you’ve been on a site before that had a link at the bottom of the page that said “Top” or “Go to the Top of the Page.”

You can also easily do that with the same type of code we’ve gone over here, making sure you are in the HTML/Text editor.

Put the following “target code” at the very top of your page:

<a id="top"></a>

And then wherever you  like, put the following link code, using the hashtag #:

<a href="#top">Go to the Top</a>

The same principles are at work here: you’ve got a link (even though it’s at the bottom) and you’ve got a target (even though it’s at the top).

Becoming a Target Master

And that’s all there is to it. You now have all the knowledge on jump links!

Making easily clickable targets in your posts and pages is more than a convenience for your readers. It can actually improve your bounce rates.

Why? Because if people HAVE to scroll through a long read when they just want to see a particular section, they can get frustrated and leave your site altogether.

In the end, it’s more important that your visitors get the exact content they are looking for (and from YOUR site), than reading every single word you’ve written.

 

 

Do you use jump links for longer posts or Table of Contents? Alternately, do you find them helpful as a reader? Let us know in the comments below.