I just stumbled across this post by Chris on using the <base> tag to target hosted assets on CodePen.

Got me thinking that you could use the same technique with WordPress themes to target assets in a cleaner manner.

At the moment, I would write something like this:

  <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'template_url' ); ?>/style.css">

This is because the stylesheet is buried deep down in the theme folder, relative to the top level of the server.

However, adding

  <base href="<?php bloginfo( 'template_url' ); ?>/">

at the top of my <head> section means I can write my stylesheet link thus

  <link rel="stylesheet" type="text/css" href="style.css">

And this will also work for any other assets - images, scripts etc.

The best bit is, this markup doesn't change even when the webpage is rendered and you view source.

A great find! Props to Chris and Adem

2,010 6 18