WordPress Magic – the Anchor


Wordpress magic headerI thought I may as well write this post. I can only imagine how many other WordPress newbies are needlessly racking their brains over this. This article is based on the forum posts which can be found here. For those of you who have any experience with anchors, you know they are special hypertext links that direct the end user to a specific point in a web page. (Here’s an example.) Under normal circumstances, with strictly HTML code, you’ll set the anchor somewhere on your web page with the following code:

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

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

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

If you have an extremely long web page, you now have a convenient link for the reader to click or tap on to skip to a particular place on that page. You’ll notice the pound symbol or “#“. The pound symbol tells your web browser that you’re linking a specific place or anchor on your web page. Now let’s say you’re working on a web page, but want to link to a specific spot on another page. So how do you accomplish that? Simple. Just place the direct location or web address before the pound symbol.

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

Now our links 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 pound symbol and anchor text  (“#anchor_here“), the browser will be directed to that specific spot. Now let’s say you want to create anchors in a really long WordPress post. It uses HTML, 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 just because. But without the slash, your web browser will open the post as if the anchor never existed. 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’s some example screen shots with the following link, Leonardo Da Vinci. Oh, and here’s the snippet of code for the link to the anchor in my WordPress post:

<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 anchor 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>

How Come I Still Draw Like a 3 Year Old?

Here are screen shots of the end result in different web browsers:

I thought FireFox 17.0.1 on Mac 10.6.8 would had been the gold-standard. I guess not.
I thought FireFox 17.0.1 on Mac 10.6.8 would had been the gold-standard. I guess not.
Good ol' Safari 5.1.7 on Mac
Good ol’ Safari 5.1.7 on Mac 10.6.8
Google Chrome version 23.0.1271.101 on Mac 10.6.8 does a pretty good job.
Google Chrome version 23.0.1271.101 on Mac 10.6.8 does a pretty good job.

I’d like to recognize the fact that the majority of web surfers are either on a Windows machine or using a mobile browser. The screen shots were taken from a site being ran under MAMP, which limits local tests to my local operating system. But the point is to make you, the web developer aware of the differences between browsers. To quote G.I. Joe, “Knowing’s half the battle.”