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 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
<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:
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.