**Because of all the code in this post, if you are using an RSS reader I suggest loading the actual post in your browser. It’ll be much easier to read.
This is part 2 of the WordPress Theme Design post.
If you read part one you’re probably half asleep by now. “I know about PHP’s syntax, and I know how to add in template tags and I know about the loop, now let me make a friggin theme,” you might be thinking. Well, today’s your lucky day!
Theme Files
WordPress themes are split up between several PHP files, and a CSS file, and everything is in a dedicated folder for the theme. The PHP files that are in most themes are:
- header.php - The header of the blog, this covers where the HTML header is, your logo, maybe a navigation menu, etc. Sometimes the sidebar will be loaded by this file as well by using the get_sidebar() template tag, other times it is loaded in the footer file
- footer.php - This is usually where you will toss your statistics code, copyright information, and maybe a few more navigation links.
- sidebar.php - This is where your sidebar goes.
- index.php - The main theme file. This is usually used for the main page of the blog, and sometimes the archives and category pages (I use it for that here on Nusuni Dot Com).
- single.php - For a single post, like if you click on a permalink.
- category.php - For when you view a category.
- search.php - Search page.
- 404.php - For 404 errors, when WordPress can’t find a specified page.
There are many more files you can use, but those are the main ones.
The CSS File
The CSS file is where your theme’s name, author, url, etc is all defined. In addition, this is also the file where you should put all of your CSS code. The file must always be named style.css. The text used to define the meta info for the theme looks a bit like this:
/* Theme Name: NusuniTheme
URL: http://www.nusuni.com/
Description: The Nusuni.com WordPress Theme
Author: Jeremy Steele
URL: http://www.nusuni.com/
Version: 1.0*/
That is actually an exact copy of it from the theme I use here. Basically WordPress will read in the data (make sure the labels like Theme Name: and URL: are written exactly as in the example), then use that information in the “Presentation” section of the admin panel, as well as use it when it actually loads the theme.
The rest of the CSS file can be whatever.
The Header
Alright, let’s say you just want to do a really basic header. Well, here’s a really basic header.php file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<div id="wrap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="content">
<!-- end header -->If you read part 1 most of that stuff shouldn’t be too difficult to understand. There are a lot of template tags in use here.
language_attributes() will print out the XML language info. bloginfo() is how you can get certain info about your blog, like the site URL, the name, slogan, etc. The first time it is used here it fetches the html_type and charset information. Then nice thing about bloginfo() is whenever it is used you know what information it is getting. WordPress template tags and their arguments are very human-friendly.
The rest of the header gets the stylesheet, puts the blog name as the text logo, and sets up the content wrapper. Pretty easy, right?
Ah yes, I forgot to mention wp_head(). Well, let’s say you use a plugin that automatically makes your meta tags, or it requires a certain CSS style to display something. That is what wp_head does, it prints out that extra stuff.
The Content
This is where The Loop comes in. In case you already forgot, The Loop is where your theme will print out any posts that need to be displayed. This is always put in the files for actually displaying posts, like index.php, category.php, or single.php. Here is the entire loop section of the index.php file of the Classic theme:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date('','<h2>','</h2>'); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>
</div>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
It looks more complicated than it is. The first line sets up The Loop. The next one prints out the the date (if there are multiple posts on the same day, it will only show the date the first time it is called and it wont show it again until it gets to posts written another day). The rest of the stuff in the actual while loop prints out the post, content, etc. All of those functions can be found on the wonderful Template Tags help page for reference.
The little _e() function is a WordPress function that translates the argument passed to it into the currently selected language. That way “Edit This Post” will be written in Spanish if you have Spanish set as the current language.
comments_template() simply loads in the comments.php file for your theme, if you made one. You can make one to help separate your theme out even more. Basically comments.php says how the comment form and all comments should be printed out.
Then the while loop ends, and the else statement begins (just in case no posts were available for display), then finally the if statement ends and The Loop is done and over with.
Not too difficult, and most of the chunks of code are well-documented Template Tags.
The Sidebar
Whenever you make a sidebar for WordPress always, and I mean always, wrap it all in an unordered list (and customize that via CSS). Most Template Tags print out in a way that assumes you are using lists to organize your sidebar - plus it just makes more sense to do things that way. For this tutorial I won’t be getting into the nitty-gritty details (like Widgets). To save space I won’t print out a whole example sidebar here (that’d be madness!), instead I’ll list bits and pieces of it:
Let’s say you want to list all pages. Well, that’d be as simple as this:
<ul>
<?php wp_list_pages('title_li=Pages:'); ?>
</ul>If you were to use that as your Sidebar WordPress would look at the template tag wp_list_pages and…
- Create a list item
- Add the label (title_li)
- Create another ul
- Add each page to that ul
- And close everything off
To style it even more you could do something like this:
<?php wp_list_pages('title_li=<h2>Pages:</h2>'); ?>Which will wrap the label in header tags.
A good thing to remember is if the Template Tag you want to use has the “title_li” option, it will almost always create it’s own list item. If it doesn’t then you must manually create the list item, the label, and another ul. For example, here is wp_get_archives(), which doesn’t handle all of that on its own:
<ul>
<li><h2>Archives:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
</ul>Of course those only apply for tags that print out data as lists (like categories, archives, etc). Other tags like wp_loginout() simply print out a link or some text.
Well, I think pretty much covers the Sidebar.
The Footer
The footer usually closes off any body wrappers opened in the header, prints Copyright data, and closes off the body and html tags:
<!-- begin footer -->
</div>
<?php get_sidebar(); ?>
<p class="credit"><!--<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> <cite>Powered by <a href='http://wordpress.org/'><strong>WordPress</strong></a></cite></p>
</div>
<?php wp_footer(); ?>
</body>
</html>The footer may contain some tags, like get_num_queries() (which prints out the number of database queries performed), and maybe it’ll display the load timer. wp_footer() is the same thing as wp_head(), it prints out any extra junk required by plugins.
How Do I Connect All Of These?
One thing to remember is WordPress decides which files to load depending on what page the user is looking at. If they are loading a category page, it looks for category.php, If they are loading a single-post permalink, it loads single.php. If the file WordPress is looking for doesn’t exist, it loads the index.php file. In fact, if you really wanted to you could use index.php for everything.
The rest of the files (the ones that don’t have The Loop, like the header.php file) are loaded manually. This can be achieved by putting the get_header() and get_footer() tags at the beginning and end of the files. The sidebar can be loaded with get_sidebar(), and it will almost always be loaded in the header.php or footer.php file.
The other miscellaneous theme files, like comments.php, must also be loaded manually, with slightly different tags of course.
That’s It!
It is incredibly hard to really “teach” someone how to make a WordPress theme. 99% of what is required to make your HTML/CSS them into a WordPress-compatible theme is simply inserting a few tags. Your theme will probably only use 20 or so template tags per page (I think the theme I use is around that number).
The best way to learn is to experiment and look at other themes. That general idea is true with anything in life. If you want to learn how to bake a cake, experiment and look at other cakes. If you want to do web design, experiment and look at popular web sites.
The main part of the theme, The Loop, is probably one of the more confusing parts. To be honest I never really took the time to learn about it until I had to, before I just copied the existing loop from other themes. Don’t make the same mistake - it really isn’t that complicated.
I hope you’ve learned something from part 1 and part 2 of this post, because I sure as heck know I’ve learnt a few little tricks while writing it. If there is any WordPress theme-related stuff you need help with, just leave a comment or contact me.
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?
September 17th, 2007 at 5:51 pm
[…] Day 8: WordPress Theme Design Part 2 - Coding […]
September 17th, 2007 at 5:52 pm
[…] 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 […]