Anchor yourself with easy jump links

Anchor and chain linksI’ve previously explained how WordPress is an internal linking powerhouse, but even the super-easy and super-powerful WordPress link dialog box doesn’t contain a built-in way to add jump links.

Jump links, also known as anchor links, are links that take you to a specific part of a page, instead of the default top location.

I personally prefer the term jump links because it captures the idea that these links let readers “jump” to various parts of a page (and also because technically all links use the HTML anchor tag…so every link is an anchor link).

So…what if you want to link to something other than the top of the page?

Good news: Yes you can!

News that might be not-quite-so-good: You have to do a little bit of manual fiddling to get it to work, including (gasp) adding a tiny piece of HTML code to your page.

Why use jump links in the first place?

Links should be useful. And sometimes that means linking within the content of a page.

F’rinstance, here are some situations that might call for jump links:

  • A long post or page with a table of contents at the top. Each item in the table of contents links to a subhead lower down on the page.
  • The handy “return to top” link at the bottom of a page.
  • At the top of a sales page, you can include a link saying “Want to go straight to the price?”
  • Footnotes.[1]

Let’s say, for example, that you have a long page, and you want to let readers jump straight to Part 1, Part 2, or Part 3 of the page from a table of contents at the top. Here’s what you need to do:

Step 1. Figure out where the jump will start and end

At the top of your page, you’ll have some text that you want to turn into clickable links to sections of your page. Maybe a list, like this:

Part 1: Thesis

Part 2: Antithesis

Part 3: Synthesis

And then lower down in the body of your page, you’ll have subheads, using Header 3 style, that match those table-of-contents listings.

Let’s link up the table-of-contents entry “Part 1: Thesis” with its subhead. To do that, we’ll start with the subhead itself.

Step 2. Locate the end point of the jump in Text view

Visual tab and Text tab
The Visual and Text tabs on the WordPress post box

At the top of your WordPress post box, there are two tabs, labeled Visual and Text. Most of us do our writing entirely in Visual view, which is fine for most purposes. This is one of the few times you’ll need to take a peek into the HTML code of your page, shown in the Text view.

If you click the Text tab, you’ll see that the text of your post is still there, interspersed with HTML tags. What you want to do is find the subhead where you’ll be pointing your jump link. If you’ve used the WordPress visual editor to give this subhead a Header 3 style, it will be wrapped in the appropriate HTML tags like this:

<h3>Part 1: Thesis</h3>

Step 3. Add an id attribute to your HTML

Now that you’ve located the HTML tags that enclose your subhead, you need to add one small piece of code to the first tag, so that this:

<h3>Part 1: Thesis</h3>

becomes this:

<h3 id="thesis">Part 1: Thesis</h3>

Pay attention to the spacing: Leave a space before the “id” but make sure there’s no space between the closing quotation mark and the greater-than symbol. And remember, you’re not deleting any characters, only adding.

You get to choose the text between the quotation marks — it will become part of your link URL, so use only letters and numbers, and no spaces inside the quotation marks.

You can add the id=”linkname” attribute to any HTML tag, not just <h3>. Subheads are easy to find and it makes sense to use them, but you’re not limited to them for jump link purposes.

Step 4. Switch back to Visual view and make sure it looks OK

Now click the Visual tab again and make sure the subhead — and everything after it — looks all right. “All right” in this case means “visually indistinguishable from before you added the id=”linkname” attribute.” In the Visual tab, your subhead should look unchanged.

Step 5. Add a link at the origin point

Now that you’ve prepared the end point of your jump link, you can use the built-in WordPress link dialog box to add your link in the usual way: Highlight the text you want to turn into a clickable link (in this case, the table-of-contents entry corresponding to the subhead) and click the link icon in your editing toolbar.

Now, instead of putting a full URL here, simply type the number sign (#) followed by the word you placed between the quotation marks in your id=”linkname” attribute, like this:

Optionally fill in a title, then click the blue “Add Link” button to save the link. Your table-of-contents entry should now show up as a blue, underlined link.

Step 6: Test the link

Once you’ve added the link, I suggest previewing the page to make sure your jump link works as intended. In the Preview tab, click the link and see if you jump down (or up) the page to your desired end point.

If it works, you are good to go.

If it doesn’t (if you click the link and nothing happens, for instance, or if you are taken to your home page instead of the same-page end point you expected), first double-check your HTML change.

It’s also possible that your theme or one of your plugins is rewriting your link URLs. The solution is to use the full URL of the page plus the “#linkname”, instead of just “#linkname” in the URL field, like this:

The tricky part here is that you are linking to the same page you’re currently editing, and if that page is unpublished, it won’t show up in the list of “existing content,” so you’ll have to manually type the complete and correct URL, make sure it ends with a forward slash, and append the “#linkname” text.

Now you can easily create tables of contents, footnotes, and intra-page jump links. Jump away!

1. ^ See how that little superscript “1” took you right down here to the bottom of the post? Neat, huh? The thing to remember with footnotes is that you always want to provide your readers an easy way to jump back up to exactly where they came from, or you’ll lose them. That’s why the little “^” symbol at the beginning of this footnote is another jump link that goes right back up to the footnoted text. If it’s good enough for Wikipedia, it’s good enough for me!

Image adapted from dorron on Flickr, used under a Creative Commons ShareAlike License

13 Comments

  1. Thanks for this, Wendy! That was super clear, as always. Not that I have an immediate need for that info, but I have a feeling that need will show up one day, and I love knowing that I’ll know when to find the info when that happens.
    If ever I wanted to add a jump link to the middle of a page, but from a different page, I guess I’d do the same thing, simply using the full URL as shown in step 6. Is that right?

    By the way, I’m really happy I could turn a friend of mine into a new fan of yours last week. Yay for sharing the Wendy goodness! 🙂

    • Yes, you’re exactly right, Josiane. You can add links to points within a page from another page. If you’re doing that, steps 2, 3 and 4 happen on the destination page, and steps 5 and 6 happen on the page you’re linking from.

      Thanks for spreading the Word of Wendy! It means a lot to me that you’d vouch for me. 🙂

      • Oh, it’s a pleasure, my dear!
        And thanks for the additional precisions. As usual when you explain techy stuff, everything’s perfectly clear!

    • Thanks, Darcy! Soon you’ll be seeing uses for jump links everywhere (I speak from experience…!).

  2. Thanks Wendy!

    As always, such useful stuff you post. And while, I’m not too skittish about a little bit of HTML once in while, you make this so approachable.

    Take care!!

    • Thanks, CJ! And to think that I worried about overexplaining. “Approachable” is just what I was going for!

  3. Thank you. I have actually looked this up before and made use of it but your explanation is SO MUCH CLEARER. And I totally agree that “jump links” is a much better name. I don’t want an anchor; I want a jump. geez.

  4. Thanks a lot for this, i was always wondering how this was done, and was actually thinking it was not possible in WordPress as this is not an integrated part of the link options.

    I will for sure try this out, actually i found your post by Googling various word combinations to find exactly what you are describing here, i thought this feature was called “internal bookmarks” (as word uses the term bookmark for this), but Jump links is of course obvious when i read this post.

  5. So glad to have found this post! Tried it out, but am challenged by the bolded text on the end points on this page > the end points are Word Works, Hybrid Works, and Image Works:

    http://karyneisler.com/karyn-eisler_publications_author_artist_sociologist/

    The first end point looks like this in html:

    Word Works.

    Where exactly would I put this:

    id=”Word”

    ?

    I tried it in different places, but each time it throws the centering off …

    Any help would be greatly appreciated :-)))

    Thank-you!

    • Hi Karyn,

      Here’s what I see at that endpoint when I look at the HTML for your page:

      <h3 style="text-align:center;">Word Works<span style="color:#ffffff;"><br />
      .</span></h3>

      The id=Word attribute needs to go inside the h3 tag, along with the style attribute, like this:

      <h3 id="Word" style="text-align:center;">Word Works<span style="color:#ffffff;"><br />
      .</span></h3>

      Try that and see if it works — I’d love to know. It shouldn’t throw off the centering. It’s also possible that WordPress.com could be altering or limiting the code on your page (fingers crossed that that’s not the case).

      • Hi Wendy,

        Just discovered your response now 🙂 In the meantime, I have found a way to make it work, which is great. The only hick-up is that when I open that page to edit or add anything, the jump-link coding disappears, so I have to re-enter it for each of the three jump links each time, which is a drag. Any idea why that might be?

        Thanks,

        K.

  6. Thanks Wendy, I needed this info just now, and remembered that you wrote about it recently! So thanks again for this helpful post 🙂

Comments are closed.