How to Add Anchor Text to Your WordPress Content

Have you ever been reading online, and you click on a link, and it takes you to a lower part of the page? It’s awesome for skipping ahead to get to the part you want to read, instead of having to read other content that you already know. (This is really common on FAQ and sales pages.)

It’s really easy to add, but it involves using a little bit of geeked out coding. Nothing too hard. I’m going to walk you through it right here.

How to Add Anchor Text Inside a WordPress Post

So I am typing here, and I want to add a link so that when someone clicks on the link, it takes them to another part of this same page- not some other page on my website. In this case, maybe you want to take them to a sign-up form so they can get access to this really thing you are telling them about in your post.

Here is what you do:

1. Type your all of your content.
2. Determine where you them to go when they click.
3. Scroll down to that part of the page and put your cursor a few lines above what you want them to see when they click on the link.
4. Click on the “text” tab (you’re currently working in the “visual” tab.
5. Add this code behind the scenes, just before the text you want them to see: <a name=”typeanythingyouwanthere”> This is where you can have a heading. </a>
6. Save while you are still on this tab (whether it’s a draft or it’s published).
7. Click back to the “visual” tab.
8. Go back to the top (or wherever it was on your page) and highlight the portion you want them to click on to take them there.
9. Click on the “link” symbol (it looks like a funky paperclip). When the dialog box opens, type in #typeanythingyouwanthere and then click the enter/return button in that box.
10. Be sure that whatever you typed in Step 5 between the quotation marks is exactly what you type beside the hashtag symbol in Step 8.
11. Save your draft (or publish).
12. Click on “view post” and then test the link to make sure it works.

Showing Up Too Close to the Highlighted Area?

This is a common issue. Often, when it jumps to the part you want them to see, it will cut off the header or the text that you had selected and that you put the <a> </a> around.

There are a few work arounds for this:

1. Put the <a name=”whateveryoudecide”></a> a few lines before where you want them to go.
2. Add in some other geeked out code, like &nsbp; or <p></p> on the text tab. This will add in some blank spaces between the text on your site.

The easiest way is to probably to add in the behind the scenes code <a name=”whateveryourdecide”></a> several lines earlier than what you want them to see. Sometimes WordPress likes to think it’s helping you by cleaning up extra code, and it will delete the &nbsp; or the <p></p> codes that you add on the text tab, and then you have the same problem.

How to Implement Option #2, Should You Go That Route

If your particular combination of plug-ins and spacing for the theme makes people not see the exact part you wanted, then you may have to add in more geeked out code.

When you go around to the “text” tab, I put the code BEFORE the text I want them to see:

<a name=”testinganchortext”></a>

&nbsp;

&nbsp;

&nbsp;

This is what I want them to see when they click

I want them to start seeing the text. If you put the code just around the words, it will go just past that part and show them what comes next.

If you scroll back up, and click on the link that says “clicks on the link,” you can see it take you down to this part of the page, and you can see the text itself, instead of starting just before it.

You will know you’ve done it right, when on the “visual” tab, you see a tiny little gray box that has the smallest of anchors inside it. 🙂

This is where I want to take them when they click on the other part.