When creating a WordPress theme, I noticed broken images on certain pages. I am used to linking images from /images/ or /wp-content/uploads, but the images were not showing up for some reason. With a quick online search, I found that it had to do with absolute and relative paths. I usually don’t have to put the absolute path on an image or link. WordPress has a tag called ‘siteurl’. All I had to do is add <?php bloginfo(‘siteurl’); ?> to the beginning of each link/image that was broken to make it an absolute path instead of a relative path. This was a really simple solution. It also helps when using a theme on different site names.
Lets say you want a /home link to itsmetommy.com. You would write the code <a href=”http://itsmetommy.com”>Home</a> right? But what if your theme gets placed on a different site name like http://www.studionashvegas.com? The home link would still point to http://itsmetommy.com, which would be a problem.
That is where <?php bloginfo(‘siteurl’); ?> comes in.
<?php bloginfo(‘siteurl’); ?> points to the current URL of the site.
<a href=”<?php bloginfo(‘siteurl’); ?>/about”>About</a>
Points to http://www.itsmetommy.com/about
<img src="<?php bloginfo(‘siteurl’); ?>/wp-content/uploads/About-Medium.jpg">
Points to http://www.itsmetommy.com/wp-content/uploads/About-Medium.jpg