WordPress Theme Design Part 1 - The Boring Stuff

Yesterday I wrote about general blog design. Today we’ll discuss something a bit more specific - WordPress theme design. This is a two part post, this post is mostly the boring stuff and the next one will have actual examples and such.

Throughout this tutorial I will probably constantly say “WordPress functions.” By that I mean Template Tags. I apologize for that ahead of time - I’m simply a coder… everything is bits and bytes to me… Hah, tags? Yucky name.

PHP

WordPress themes are created with a scripting language called PHP. Now, some people out there say “the way you create WordPress themes is with template tags - not PHP” but it is, in fact, PHP code. PHP lets you develop web applications. But don’t let that scare you away, today we will only get into the basics of it - and that is all you need to create beautiful WordPress themes.

File Extension - All PHP files should end with .php. Go through and check the existing WordPress themes in the /wp-content/themes directory. Most of the files are .php, and there is always one .css file (we will get into that later).

PHP Blocks - Blocks of PHP code are wrapped in tags called the start and end tags. Depending on your server’s setup you can use a wide range of start/end tags - but the generally accepted way is by doing something like this:

<?php php code ?>

The first bit tells the parser that PHP code is inserted in here, and the last part tells it the PHP code is ending. You can do multiple blocks like this throughout your PHP file.

Syntax - Unless otherwise noted all lines end with a semicolon ( ; ).

Data Types - For the purpose of this tutorial I won’t get into this too much. All you should know is that whenever you pass an argument to a template tag (see below) it has to be wrapped in either a single or double quote (data wrapped in those is called a string).

Calling A Function/Template Tag - 99% of the what you must do to create a WordPress theme is simply calling functions (aka: Template Tags). In a nutshell this means you are telling PHP to run code that exists in the WordPress system somewhere. You can call a function by doing something like “the_title();”. That will tell WordPress to give you the title of a post. The stuff that goes in-between the ( and ) are called arguments - data that is passed to the function. WordPress arguments use a custom style (not PHPs way of doing it), as you will see later in this tutorial.

Error Handling - If something is not working right go back and check your syntax (Does it have a semicolon? Are the parenthesis closed? Are the caps the same as the actual function (PHP is mostly case sensitive, bla() is not the same as Bla()), check the WordPress theme development help files, then go around and ask for help.

The Template Tags

WordPress’ theme capabilities are so powerful thanks to something called template tags. These are nothing more than PHP functions. Basically you create your theme with HTML/CSS, then use template tags to fill in all of the missing content. Here’s an example of a template tag without arguments:

<?php the_title(); ?>

Here is one with an argument:

<?php bloginfo('description'); ?>

Some WordPress functions require arguments, some don’t, while others may have optional arguments. Optional arguments are used to customize how certain things work. For example, if you want to print out all of the categories for your blog you might use a function like this:

<?php wp_list_categories('orderby=name&hierarchical=0') ?>

Absolutely none of those arguments are required - they are merely used to tell WordPress to display the categories in alphabetical order (orderby=name), and to not show them in a hierarchical fashion (so subcategories will display on the same level as regular ones). Notice how all of that is wrapped in a single quote, that is Wordpress’ way of doing arguments.

You can view all template tags for WordPress here. The documentation is very detailed and very helpful.

The Loop

The loop is the meat of your WordPress theme. This is where it loops through any entries it has to display. Usually the beginning of it looks a bit like this:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

The first line is an if statement, it checks to see if there are posts available. If there are, it runs the second line. Basically for the stuff inside the if statement to run the arguments of the if statement must literally be true. If have_posts() returns false the else statement is run (see below), and if it returns true the next line is run (and so on, until it hits an else or endif statement).

The second line is the actual loop, basically it says “while there are posts available, load in the a post and do the following”. Just like with the if statement, the stuff inside the parentheses must literally be true for the while statement to run. Both of these things are called conditional statements, since something must be true for them to run. Conditionals don’t require semicolons after them (the second line has one at the end of it because the_post() is on the same line, which isn’t a conditional statement).

Inside this while loop is where you print out the post’s title, timestamp, content, comments, etc. Anything that relies on each individual post is put here. We will discuss how to do all that in part 2.

The next part of the loop is the endwhile statement:

<?php endwhile; ?>

That says to end the while loop. Notice how it has a semicolon, that is because endwhile in itself isn’t a conditional statement, it is simply part of one. The same goes for endif below.

The next part of it is for the “just in case scenario”. Let’s say you load a category page and there are zero posts available. This next part of The Loop is what handles that:

<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

The first line is the else statement, which will run if the if statement (the “if (have_posts())” one) isn’t true. The next few lines are what will print out just in case no posts are available (this will also be discussed in part 2)

And finally, we must close everything off, by ending the if/else statement:

<?php endif; ?>

The loop isn’t too complicated. In fact, PHP itself isn’t hard to learn at all, if you can grasp the concept of conditionals (if/else, while loops, etc) then you already know how to program bits and pieces of most programming languages out there.

In reality there is no real reason to know all the stuff about the loop’s syntax (when to put a semicolon, when not to, etc) unless you plan on doing some real theme customizations. But it is still useful to at least understand why certain things are the way they are.

Uhh, How Do I Print Text?

Most WordPress template tags will automatically print out data. But just in case one you are using doesn’t, you can print out text using PHP’s echo or print functions:

<?php echo "Hello World!";
print "Goodbye Cruel World!";
print(get_bloginfo('description'));
?>

The first two print out the text in the quotes. The third one will print out your blog’s description/slogan. Please note you can use echo or print with or without parentheses (they technically aren’t functions… they are more like statements).

The cool thing about PHP is the text will be printed on the webpage exactly where the code appears. So if you make DIV in HTML and have a PHP print statement in-between the start/end tag for the DIV the text will be printed right in the element.

That’s It

Well, this is the end of part #1 of WordPress Theme Design. I wasn’t joking when I said this was mostly boring stuff. Part 2 will cover how to actually make the theme, it will connect all of this boring stuff with your cool HTML/CSS theme.

Stay tuned for even more Back To The Basics posts.

Please subscribe, or else I will cry. Do you really want to make a programmer cry?