WordPress Magic – the HTML Anchor Tag

I thought that I may as well write this post about using the HTML Anchor tag inside of WordPress posts. I can only imagine how many other WordPress newbies are needlessly racking their brains over this. This article is based upon a forum post which can be found here.

Before you spend any time reading this very long article, the minimum requirements to use an Anchor tag are some advanced experience creating and coding posts in WordPress, a little knowledge in HTML, and the time to test your posts.

The HTML Anchor Tag In The Wild

For those of you who have any experience with HTML anchor tags, you know there are special hypertext links that direct end-users to a specific point on a web page. (Here’s an example.) You can set the HTML anchor tag somewhere on your web page with the following code:

<a name="anchor_here"></a>

To link to that HTML anchor tag, you’ll type something like this:

<a href="#anchor_here">example</a>

Using a Hashtag in Your Code

Now that we understand how an HTML anchor tag works, let’s dig a little deeper. Did you notice the hashtag or “#” within that link tag above? The hashtag tells your web browser that you’re linking an HTML anchor tag on your web page.

Now let’s build a link to an anchor tag. So how do you accomplish that? Simple. Just place the direct location or web address before the hashtag and the name of your anchor tag. (See the example below.)

<a href="http://www.yoursite.com/page/index.html#anchor_here"></a>

Please note that if you are linking to an anchor tag within the same page, your link will look like this:

<a href="#anchor_here"></a>

You’ll notice the direct location is missing. Adding one would be redundant. Thankfully most web browsers are smart enough to know that you’re directing the user to an anchor tag on the same page.

Using the Slash to Fix an HTML Anchor Tag

Now our link tells the end-user’s web browser to not only go to a specific web page “http://www.yoursite.com/page/index.html“, but thanks to the hashtag and anchor text,  “#anchor_here“, the browser will be directed to that specific spot.

Let’s say you want to create anchors in a really long WordPress post. It uses HTML in the code, so no problem, right? WRONG! Yes, you can use HTML tags in your WordPress posts, but anchor links in a WordPress post don’t get intrepid correctly in most web browsers.

Now how do we work around this problem? My research has determined that we need to use a slash (“/“) before the pound symbol in our link. Here’s an example:

 <a href="http://www.myblog.com/my_long_post/#1st">linky</a>

I don’t have a particularly good explanation as to why we need a slash in the anchor link. (Other than the lack of a 3 or 4 letter extension at the end of your web address ~ i.e.: .html, .htm, etc.) But without the slash, your web browser will act like the post or the anchor never existed. (In WordPress version 5.8.3, WordPress will automatically add the slash to your anchor link after you click it.)

Web Browser Issues

Now here’s another issue to contend with. I was really hoping in this modern era of the internet, all web browsers would interpret code in the same way, but alas, that’s still not the case. Here are some example screenshots with the following link, Leonardo Da Vinci. Oh, and here’s the snippet of code for the link to the anchor tag in my WordPress:

<li>We learned why most people can't draw like <a title="Yes, You Too Can Draw! Ch 1 – Perception and Seeing" href="http://chrishilbig.com/yes-you-too-can-draw-ch-1-perception-and-seeing/#Leo">Leonardo Da Vinci</a>.</li>

Here’s the snippet of code for the HTML anchor tag itself in Chapter 1 of Yes, You Too Can Draw!:

Today is the first in a series of baby-steps. Prepare stumble over yourself...
<a name="Leo"></a>
&nbsp;

Here are screenshots of the end result in different web browsers:

How to Insert the HTML Anchor Tag in WordPress 5.8.3

In the original version of this article, content in posts was united inside one block. As of writing, WordPress uses a relatively new editor that divides posts into multiple blocks, usually based upon header tags. (i.e. ~ P, H2, H3, etc) This latest editor has its pros and cons.

Thankfully, dropping in a new HTML anchor tag is pretty easy. 

Step 1 is to hover your cursor between blocks. When a small blue square, with a plus, appears, you’ll roll over it. When you roll over the square, it’ll turn black and you’ll click it.

In Step 2, you’ll see a panel appear. Click in the Custom HTML button

Step 3, you’ll see a new text box to insert your HTML anchor tag. In the next step, you’ll set up your link.

Step 4 you’ll create a link to your HTML anchor tag. This link can be created in any WordPress post or the same post that you set up your anchor tag. Start by highlighting what you want to use as a link. (Usually text or an image.) That will bring up a new panel. Within that panel, you’ll click the Link button. (Or you can use the keystroke Command/Control K)

Step 5 will have you type in or search for a link within a new panel. When you type in your web address, you’ll attach a hashtag a.k.a. #, and then the name of your anchor. Remember, the name of your HTML anchor tag is case-sensitive. To finish, you will click on the Submit button to set your new link.

Unfortunately, if you do a search for a specific post, you will need to re-edit your link to include your hashtag and anchor name. You can re-edit the link in the same fashion as creating a new link. Highlight the link and click on the link button within the panel that appears.

Updated Jan 25, 2022