Brass Blogs: Web Design & Development

I’m going to pretend that my (three year old!) tutorial on creating WordPress themes doesn’t exist anymore. As I mentioned in the intro to this series, a lot of it still holds true, but enough has changed that it’s probably better to just start from scratch. And so I am.

First, you should know a few things that will be indispensable. One such thing is the WordPress Codex – almost everything you need to know is in this bible for WordPress. It’s always the first place I look when I have a question on anything, and 8 times out of 10, I find the answer within it’s pages.

The second most indispensable item is the WordPress forums. I answer more than I ask over there (if you wanna find me, my handle is “doodlebee“), and I search more than I do anything else, I think So to say I can usually find my answers without even asking a question is a good thing.

And the final good piece of information – most everything you need to know you already have. Yep – the “default” theme that comes with every single installation of WordPress has almost every file and every piece of code you need to pull off what you need to do. I view the “default” theme as an example site – a place you can fall back on and learn from.

So let’s begin.

The File Requirements
In every theme, there are five files you simply must have. If you do not have them then your theme will show up as “broken” in your “Themes” area. (EDIT: okay, I lied. If #1 isn’t in your theme files, it’ll show up as broken. But still, you really should have these basic files in your theme.) These files are as follows:

1. style.css
2. header.php
3. index.php
4. sidebar.php
5. footer.php

For my own personal enjoyment, my “required files” consist of the above, but I also include the following files:

1. functions.php
2. 404.php
3. comments.php
4. search.php
5. single.php

And depending on the complexity of the theme, I may add in some others – but we’ll get to that later (if we need to).

Understanding Template Hierarchies
You should also understand the Template Hierarchy. It’s pretty simple, really. Basically, WordPress does a search for whatever you’re looking for on order from most specific to least. (Yeah, that was really clear, wasn’t it? LOL) What I mean is, if you click a sidebar link to see a category, WordPress will then use the category-ID.php file to display that section (the ID being the ID of the category, so if the ID were “3″, then it would look for “category-3.php”). If you don’t have a category-3.php file, then it will use “category.php.” No category.php file? then it falls back to “index.php.”

Sort of like “Finding Nemo,” but instead of all drains leading to the ocean, you can say “all template files lead to index.php” (Corny, I know.)

So to answer your question – YES you can have each page on your site display a different look, just by understanding this hierarchy. That being said – believe me when I say there are much better ways to pull it off.

Understanding The Loop
You’ll hear reference to “The Loop” quite a lot. For those of you “out of the loop” – i.e. anyone who doesn’t typically do back-end programming, in PHP or otherwise – a loop is what pops into mind (for me, I actually imagine a big, pink hula-hoop) – but probably not exactly in the way you think of it.

There are several methods of creating Loops in PHP – but THE LOOP (as used in WordPress) uses an “if/while” statement. Your basic Loop looks like so:

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<p>what you want to display in each individual circumstance</p>
<?php endwhile; endif; ?>

So if you had 3 posts in your blog, and you plugged the above into your theme files (I’ll get into where later – this is just an illustrative example), then for every post, it would output “what you want to display in each individual circumstance”. So if you literally copied the above into your theme files, when you activate the theme, you would see the following on your blog index page:

what you want to display in each individual circumstance

what you want to display in each individual circumstance

what you want to display in each individual circumstance

If you had 5 posts, you’d see five lines, and so on.

The Loop is very important – there are so many ways to interact with it, and bend it to your will, it’s not even funny. The reason it does what it does is…

1. if(have_posts()) : If you have any posts that are published
2. while(have_posts()) : while there are published posts
3. the_post(); then display the following.
4. endwhile; end the “while there are posts” when there’s no more to pull from the database
5. endif; end the Loop.

Knowing what each section does is really helpful, because you can mess with the Loop a bit (like adding an opening div right after if(have_posts()) : will cause the <div> tag to only appear once, thus making a containing element around the Loop) to pull off the things you need. Yes: queries too, so you can pull in specific content and have it bend to your will. but that’s more advanced, so we’ll – again – get into that a little later on.

Aside from some kind of knowledge of CSS and HTML, that’s really the basics that you need to understand to commence with beginning your own themeing fun. To tell the truth, when I first started working with WordPress, I had a basic understanding of PHP, and when I first started working with the Loop, I had no idea what it was. (It really doesn’t take long to figure it out!) Just be prepared to make mistakes and screw things up – it’s the best way to learn!

Up next: Themes 101