Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Theme Images Directory1:57 with Zac Gordon
Learn how to setup an images directory for your theme and how to link to files within that folder from your stylesheet.
For project files please refer to the first video: The HTML Template
WordPress Codex Reference
You can read more about the bloginfo() function on the WordPress Codex.
[Zac Gordon] When making a WordPress theme, we store all of the images used in the theme inside of a directory
in the main theme folder.
For this project we're name the folder Images.
However, it is possible to name your folder whatever you like or even include sub-folders within that main Images folder.
When we link to our images from within our theme templates, we can use the blog info function
with the template directory parameter.
For example, to link to a logo.png graphic, we would write out the following code.
This will output the following.
Note that if your building a child theme, the template directory parameter links to the parent theme folder.
When linking to theme images with a child theme, you should replace the template directory parameter
with the style sheet directory parameter like this.
When we link to our images from our styles sheet, we can use relative links based on the image location to the style.css file
or our custom style file's location.
For example, if we're linking from our style.css to an image in our Images folder, we would do it like this.
The same applies for linking to other assets from our CSS like web fonts.
In our project we're linking to web fonts in our CSS, but we don't actually require any images in the theme itself.
All of our images are going to be uploaded from within WordPress.
You need to sign up for Treehouse in order to download course files.Sign up