Blogging Tips

File Paths in Your WordPress CSS and Theme Files

The directory of your WordPress theme probably looks a lot like this:

This is where all the files for your theme live, and this is where you will come to make edits. Notice the images folder in there. If your theme makes use of any images for it’s design (it probably does), they will be in this folder.

What can be a little confusing is just how to reference the images in this folder, in terms of their file paths. If you are editing the CSS file for this theme, you can reference the images this way:

#header {
  background: url(images/header-bg.png);
}

This is a relative file path and in this case it means “relative to the location of style.css”.

What gets confusing is if you start doing some editing of the other files in your theme. Let’s say you want to change something in the layout of your sidebar, so you are editing sidebar.php. You might think, since this file is in the exact same directory as style.css, that you can reference an image in that same images folder with the same relative file path:

<img src="images/sidebar-header.png" alt="sidebar header" />


But you will quickly find out that you can't! The problem is that "sidebar.php" isn't actually the file that is being rendered in the browser. The sidebar file is just being included by other files, ultimately backing up all the way to the index.php in your root blog directory.
That means that relative file paths for images in your blogs PHP files need to be relative to the location of that root index.php file. So this is how you might include an image in that sidebar.php file:

<img src="/wp-content/themes/default/images/sidebar-header.png" alt="Sidebar Header" />

The “/” at the beginning of the file path says “go back to the root directory and start there”. You may have seen relative file paths that begin with “../” or “../../” – those mean “go back one directory and start there” or “go back two directories and start there”. These can be very helpful as well. But these are more dangerous in WordPress. The problem is you never really know how many directories deep you might be with the way the WordPress can generate URLs. Your image needs to be referenced correctly whether your are looking at:

Root level:

http://www.bloggingtips.com/

4 levels deep:

http://www.bloggingtips.com/2007/12/18/5-warning-signs-you-are-a-blogaholic/

Another way to reference your images that is sure to work is just to use full absolute file paths. You can use absolute file paths if you want… but it’s not as smart. Let’s say you want to move your theme to another blog or you change the name of the folder of your theme. Everything is broken Plus it’s less efficient for the server.

Written by Chris Coyier from CSS-Tricks
Posted on December 21st, 2007 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

4 Responses to “File Paths in Your WordPress CSS and Theme Files”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

m-alo says:

December 21, 2007 at 3:40 pm

Seems to me the simplest way to reference the images would be to use the built-in wordpress functions like so:
<img src="/images/pic.gif" alt="" />
m-alo says:

December 21, 2007 at 3:44 pm

Sorry, the php code didn’t make it through:
<img src="/images/pic.gif" alt="" />
m-alo says:

December 21, 2007 at 3:46 pm

Damn, well
bloginfo(‘template_directory’)
enclosed in php brackets, was what i tried to put in there. Sorry for the many posts…
Chris Coyier says:

December 21, 2007 at 4:37 pm

Yep, that’s an every better dynamic way of doing it.