How to add jump links in WordPress?
I recently found myself in need of asking how to add jump links in wordpress, when making a featured theme post. With over 100 themes showcased on a single page, organized by categories (Blogging, Business, E-commerce, Magazine, Porfolio), I wanted to make the navigation easier by adding a clickable Table of Contents. Pretty much when you clicked an item in the table of contents, it would jump down the page to where that category was. While it is more useful for longer posts, you can see it in action below:
It was pretty easy to make this and only required a small id tag to be added.
Step 1: Add id to heading tag
If we wanted to add a jump link to the heading above, all we would do is change our original <h1> heading from:
<h1>Step 1: Add id to heading tag</h1>
<h1 id=”Step1″>Step 1: Add id to heading tag</h1>
The id name can be anything, but in our case I chose “Step1” because that seemed fairly intuitive. And this would all be done within the text mode, rather than the visual mode.
Step 2: Add link to menu item above
In our table of contents above, we are simply going to add the jump link as “#id” in place of the URL.
Step 3: Test
After we’ve added jump links to the rest of our table of contents, all we have to do is test it to make sure that it works.
For some themes, you may run into an issue with adding #id to your table of contents. Depending on how your theme is structured, it may need the full URL to be added, which can be seen below:
The format is www.domainname.com/post-name/#id. In our case our domain name is wpforall.com, our post name is “add-jump-links-wordpress” and our id was Step1.
Another problem is that the link is case sensitive. Having an id of Step1 is different from the id step1. So be sure to double check to make sure that this is consistent.
If you run into any problems, or find any other uses for jump links, let us know!