Our last tutorial ended with a problem that we need to troubleshoot. Turns out the problem was that I didn’t save my changes to index.php and footer.php so it was an easy problem to troubleshoot. But if you saved all your files you probably had your custom theme working at the end of the last video.
Now our custom theme is very boring because it is blank. Don’t worry because I promise we’ll soon be adding our CSS to make our custom theme as sexy as our static site.
Here we add static content to our index.php file:
Why isn’t our CSS working?
Because we need to use a special WordPress function. It is called bloginfo() and more info on it can be found here.
To make our CSS work replace the current header.php code with this code
Now if you view the page you will see our beautiful CSS taking shape! The ‘stylesheet_url‘ parameter is what most people use when working with WordPress but I like to have my CSS and images (and other site assets) inside an ‘assets‘ folder. To do that I’m going to create an ‘assets‘ folder and create an ‘images‘ folder and a ‘css‘ folder inside the ‘assets‘ folder. I’ll then create a style.css file and drop that inside the ‘css‘ folder. I’ll then cut and paste my current css from the root of my theme to the style.css inside ‘assets/css/‘.
This is just my personal preference but I am also trying to show you that you have flexibility with WordPress. It is very important that you do not remove the style.css file from your theme root. It is a core file for a theme and therefore must not be removed.
Here is the header.php using my personal preference:
If you now test the site, it should work like it did before.
Links mentioned in screencast
Here’s a time-saving tip
Use the ST2 AdvancedNewFile plugin to quickly create folders and files.
Note: In the screencast I copied and pasted the CSS from style.css in the root to the style.css that resides inside assets/css. This was a mistake. I should have cut and paste it not copy and paste it.
Back to Main WordPress Page with list of tutorials on creating a WordPress custom theme from scratch.