Anchors

Note: If you are viewing this page from the front end, right click on “edit page” above and “open link in new tab”. This will allow you to read the instructions below as well as see it in the editor in the corresponding tab.

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 – <— BTW, that’s clickable!

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 landing point of the jump in HTML view

At the top of your WordPress post box, there are two tabs, labeled Visual and HTML.

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>

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.

Linking within the same page:

Now, instead of putting a full URL here, simply type the number sign (#) followed by the word you placed between the quotation marks in yourid=”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.

 

Linking from another page:

The solution is to use the full URL of the page plus the “#linkname”, instead of just “#linkname” in the URL field, like this:

 

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.

Part 1: Thesis

If you look at the above subhead, I’ve added the id as mentioned . Just click the TEXT box to see the html.