I have mentioned themes briefly before, but in light of some questions I have been fielding I have decided to dedicate some time to a proper tutorial.  Hopefully we can flesh this out a bit more fully, just remember the mantra: "We write the theme, We love the theme, We are the theme."

cjd_word_count();

Before I start, lets list a few of the other resources out there on Themes in WordPress:

1. Using Themes from the WordPress Codex.
2. Ryan's article the man, the legend.

I will add more to the aforementioned list as I find them.

Okay to make this tutorial more enjoyable we are going to create a WordPress enabled site that combines 4 column, 3 column, 2 column and 1 column layouts.  Yeah you like that don't you.. can you feel that, huh, can you feel it!  Ummm... well yeah, sorry about that.

Moving on, the finished product can be found running here over here, so at any time you can refer to a working model to see how it reacts.  I did not throw this together to dazzle anyone with the design, merely to show what can be done and how.

As you can see, the index page has 3 columns, category listings have 2 and when commenting, or viewing just one post you see 4 columns, and finally if you look at a month or year there is only one column.  Believe it or not this is incredibly easy to do.

Here are the template files that I am using to achieve this:

1. index.php - obvious isn't it?
2. single.php - this is used when viewing one post or commenting.
3. category.php - when you are in a category.
4. date.php - for the times you are browsing by month or year.
5. style.css - the main CSS file.

Now style.css (which it has to be named) is just straightforward CSS with the exception of this:

/*
Theme Name: Tutorial CSS
Theme URI: http://www.chrisjdavis.org/wp-hacks/
Description: I'll learn you good.
Version: 1.0
Author: Chris J. Davis
Author URI: http://www.chrisjdavis.org
*/

Which is inserted at the top of the file before your first CSS rule.

Okay this is how it works, I created index.php first and got it all set up the way I wanted it.  Next I created single.php - which is just a tweaked verison of index.php.  I simply added the fourth column you see on the far right and massaged the settings for the other div's.

In index.php the the divs have these values:

div id="Layer1" style="position:absolute; 
left:0px; top:48px; width: 76%" class="contnt"

div id="Layer2" style="position:absolute; 
left:24px; top:48px; width:160px;" class="sidebar"

div id="Layer3" style="position:absolute; 
left:78%; top:48px;" class="sidebar"

While in single.php we have this:

div id="Layer1" style="position:absolute; 
left:0px; top:48px; width: 60%" class="contnt"

div id="Layer2" style="position:absolute; 
left:24px; top:48px; width:160px;" class="sidebar"

div id="Layer3" style="position:absolute; 
left:60%; top:48px;" class="sidebar"

div id="Layer4" style="position:absolute; 
left:78%; top:48px;"

So as you can see I have changed the values of each div and added a 4th one.  Did you catch what we did here though?  We created our index file the way we normally would, and then used that codebase to create a situation specific template.  This is seriously easy people.  Now we save this file as single.php and move onto the last two files.  For sake of time lets just say what is done in these files.  Starting again with index.php I simply deleted both flanking div's for date.php and I deleted the left flanking div for category.php.  Other than that there was nothing else to it.

So now we have 4 PHP templates and a CSS file; the PHP templates are really only variations derived from index.php with elements added or removed, the CSS is straightforward other than the inclusion of the theme data needed by WordPress.  Now we just put all these files into a folder, lets call it tutorial, and upload it all to /wp-content/themes/.

Now we simply need to go into /wp-admin/themes.php and select your newly created theme as default.  WordPress does everything else for you.

You can see the different templates in action by clicking the following:

1. Main Template (index.php » )
2. Single Post/Comment Template (single.php » )
3. Month/Year Template (date.php » )
4. Category Template (category.php » )
5. Stylesheet (style.css »)

That is all there is too it really.  Now you can also get into page templates (templates for static pages) but that is outside the scope of this tutorial.  If you have any questions or concerns please leave a comment or email me and we will try to sort it out.  I hope that this helps certain individuals out there who are struggling with how to achieve certain effects with WordPress.