In our quest to take a WordPress theme from start to finish (Photoshop to Functional Theme), we have reached what most people would call the end of their journey.  We’ve taken our Photoshop file, made the necessary slices and converted it to an .html file. If we wanted this page to remain a static web document, we’d stop here, head into the base camp, and drink our hot cocoa.  But we’re not done quite yet, because we need this page to be able to handle the dynamic content that WordPress delivers.  Before we make our ascent, however, we need to know what it is we’re dealing with.

Theme Structure

WordPress themes have three files (usually four) at minimum that are required in order to be considered a true WordPress theme: header.php, index.php, sidebar.php [optional] and footer.php.  There are many more files that you can include (404.php, single.php, page.php; the list goes on) but those core files are what defines WordPress themes and how they are segmented out.

The best way to take our .html file and segment it into the various files we need is to use comments:

<!—Header—>

…header stuff is here…

<!—End Header—>

<!—Main Content—>

…main content goes here (this will be your index.php if you’ve been designing with blog postings in mind)…

<!—End Main Content—>

<!—Sidebar—>

…your sidebar contains badges, widgets, recent posts, comments, etc…

<!—End Sidebar—>

<!—Footer—>

…the footer contains a boilerplate, navigation, and design/copyright information…

<!—End Footer—>

What we’ve basically done is taken our .html file from this:

to this:

Then, just cut and paste those sections into their respective files:

Finally, back on the .html page, replace the code that you just cut/pasted with these commands, respectively:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

These are WordPress specific commands that pull in the contents of header.php, sidebar.php, and footer.php into one page that is generated when you look at the wordpress theme in a browser.  Save the remaining code as index.php, and you keep your .html file handy as a reference to check the design as you are going along.

We’re not nearly done, but we’ve laid the foundation for a killer WordPress theme by splitting up the files.  When WordPress accesses the databases via one of the .php pages (index.php by default) it pulls in the header, sidebar, and footer as one page.  This way, you can just include those <?php commands to call the header whenever you want, instead of having to repeat code in every page.

I want to go into each of these files in more depth to give tips, tricks, and techniques for making sure the WordPress theme is the best it can be, so the next post will be focusing on header.php and footer.php.  After that sidebar.php, then an in-depth look at the various other files (index, single, page, and archives) to make sure they work right with our created theme.  Finally, we’ll look into comment styling and see ways we can make our comments look awesome (and match our theme!)