Wendy Cholbi

I’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 HTML view

At the top of your WordPress post box, there are two tabs, labeled Visual and HTML. 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.

If you click the HTML 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