Screencast: Part 5: Using Functions for a Custom WordPress Theme

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:

[prettify]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.



[/prettify]

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

[prettify]




Simple WordPress

header

[/prettify]

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:

[prettify]




Simple WordPress

header

[/prettify]

If you now test the site, it should work like it did before.

Links mentioned in screencast

ERD of WordPress
bloginfo()

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.

Finished Files

custom-wordpress-theme-step-05-finished

Back to Main WordPress Page with list of tutorials on creating a WordPress custom theme from scratch.

One Reply to “Screencast: Part 5: Using Functions for a Custom WordPress Theme”

  1. Someone sent me an email with this ” Thanks for the response! the (‘stylesheet_url’) was working perfectly. The issue I had was with the (‘template_url’). However, after rewinding the video about 20 times, I found that I had to also include the filepate /assets/css/style.css somehow on the video it ZOOOMS through that part and only caught it by pausing it every few secs. lol but it works perfectly now! I was able to get it all set up with mamp and all, I felt so accomplished haha. I’m on video number 7 now :)” – I’m including the comment in case it will help others that have the same problem.

Leave a Reply

Your email address will not be published. Required fields are marked *