The Proper use of Base HREF's
I am helping, off an on, a friend with a project that is powered by WordPress. One of his latest hijinks, involved named anchors.
Basically he was having trouble using them across varying sections and templates. He was creating absolute URI's and tacking on the anchor pointer, lets say #top
on that generated URI. The problem of course is that WP dynamically generates its content, which gives you all kinds of URI's.
So I sent him a recommendation, to just use relative anchoring, meaning just specifying #top
instead of:
http://my.greatsite.com/index.php?p=3#top
.
Doing this would allow him to overcome problems like when you have multiple paged posts, if you use <? get_permalink(); ?>#top
to produce the URI, then when you are on page two, and click the #top
link it would take you from
/index.php?p=3&page=2#top
to /index.php?p=3#top
since you created your named anchor link with get_permalink, which doesn't care about page=2.
The real problem was Base HREF's
When I received his response I was enlightened to what the real problem was. He was using Base HREF's and more importantly, they were being used incorrectly.
Now this is not a dig at my friend, he is a bright and talented designer. 98% of people who use Base HREF's use them incorrectly. Most of the time when you see them used, they are pointing to the site root, or the top level of a given site. So on every page of my site I would have this in the portion of my HTML:
The problem of course is that this is incorrect. From the W3C definition:
The BASE element allows authors to specify a document's base URI explicitly. When present, the BASE element must appear in the HEAD section of an HTML document, before any element that refers to an external source. The path information specified by the BASE element only affects URIs in the document where the element appears.
Basically this is saying that the Base HREF is the URI of the document you are currently on, not the entire site. The Base HREF is how you resolve relative URI's to the current page (document) you are on.
Now I am of the mind that you shouldn't use this on a site whose content is generated dynamically, but that is just me. Oh and if you leave out the Base HREF modern browsers will take the page you are on and make it the base, by default.
What if I want to use them with WP despite your sage advice?
I am offended... really. Well thanks to the Theme System built into WP, this can be accomplished by using some of the built in functions like get_permalink()
, bloginfo('siteurl')
, the_category(' ')
, some elbow grease, and inventive use of header.php.
I will leave it to you to figure out how to make this all work, since you know... I am against it and all. Don't want to help the enemy too much.
Enjoyed this article? Follow me on Twitter.