Adding Jump Links to WordPress Posts/Pages

by Tony Gamble

I was asked today about what seemed like a simple function, creating jump links on a Post or Page in WordPress. I knew it wasn’t something that is built into a default WordPress install, but I figured someone must have built a tiny plugin for it, right? Well apparently not. Not anything that was point-and-click simplistic enough to do exactly that and only that.

Table of Contents Plus - WordPress Plugin

Table of Contents Plus automatically sets up a list of jump links based on your heading tags.

There is a handy plugin that automatically creates a table of contents based on the heading-formatted text you use (that’s those H1 and H2 tags you see in HTML). Table of Contents Plus has plenty of advanced options, including selecting which Heading levels trigger a jumpable entry. It can even generate a complete sitemap of all of the pages on your site with a simple shortcode. But what if you want to just quickly add a jump link to your Page or Post without installing another plugin?

Manually setting up an anchor target position in your document does require you to employ a little HTML, but don’t fret. It’s super simple and will have you feeling like a l33t hacker when you’re done. First, switch your Page or Post editor from Visual mode to Text. Already you might see some HTML sprinkled throughout. Now find the text you want to anchor to. It might already be wrapped in a HTML tag like <h1> or <h2>. If not, you can wrap it in a <span> tag. You begin with the opening <span> and then at the end of your text selection, close with a </span> tag (note the slash). To these wrapping tags, add a unique ID. So for example, the heading title of my fourth paragraph could be:

<h1 id=“case-studies”>Case Studies</h1>

I can now create a link to this from any anchor tag on the page. To set this part up, I don’t even need to be in the plain Text editor anymore. I can switch back to the Visual tab, select the text or image I want to link from and use the WYSIWYG editor’s Insert/Edit Link icon. The link I will use is a hashtag followed by my title’s ID which I had set:

<a href=“#case-studies”>Jump to Case Studies</a>

Now when users click on the text “Jump to Case Studies”, they will automatically be scrolled to have the title “Case Studies” appear at the top of the browser window.

You can even target an invisible spot on the page by simply inserting an opening and closing <span> tag anywhere on the page, wrapping nothing:

<span id=“#case-studies”></span>

As long as that tag has been set with an ID matching a jump link, it will work just fine. And that’s all there is to it! You now know some useful HTML.

If you are publishing lengthy posts regularly or documents which could benefit from a formatted table of contents, then I definitely recommend the Table of Contents Plus plugin. But if you just need a quick jump link without weighing down your site with yet another plugin, a little bit of simple code in your editor gets the job done.

Newsletter Signup

Subscribe to our Monthly Newsletter

* indicates required

Email Format


×
×

jester-logo(613) 667-1616
(647) 477-4335
info@jestercreative.com

Request a Free Estimate

Have a project in mind? We'd love to hear about it. Please provide us with a few details and we'll get in touch with you shortly.

Yeah, we know, we ask a lot of questions, but we really do appreciate you providing us as much information as you can. This will help us to work with you to find the best solutions possible for your project and ensure that we're helping you meet your objectives within your timeline and budget. Thanks and we will be in touch shortly!

Your Name*

Your Email*

What services are you interested in?*
Video ProductionWeb Site DesignMarketing ServicesTrainingOther

If Other, please specify:

Briefly describe your project :*

What is your timeframe for completion?*

What is your estimated price range?*

Please type the text below into the text field:
captcha

*required field

×
Coming Soon!

This fresh new feature is still under development.

Return to this page soon to find out more!

×
Sign Up for KickStart Services

Online application for KickStart services







×