studionashvegas | design and social media

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!)

This is the 2nd part in a series on turning a design done in Photoshop into a WordPress theme.  I’m documenting taking a client’s theme from concept to functional site, showing a brief overview of the steps that I take.

When last we met, I had just put the final touches on the WordPress design for “Pray With Africa”.  With the design completed, it was now time to take that design and (using a combination of Dreamweaver and Photoshop) turn it into a fully functional WordPress theme.

Before we begin, I know that using the slice tool you can take a .PSD file (very easily) and turn it into a site without needing Dreamweaver.  This method does give you the option of exporting CSS / HTML tables with images that do the trick pretty well.  However, if you plan on using pure CSS to center the page, you may want to rethink and switch your slices to “images only”.  Using the pre-rendered CSS puts everything into an “absolute” position, which doesn’t allow for even centering on any width monitor.

That being said, and having already switched my CSS slices to “images only” in my Photoshop settings, I pulled up the previously created file:

Now, in Dreamweaver, I set up my document space.  That requires three things:

1) Creating a new index.html file – this will be sliced into the corresponding .php files later, but for now, I want to work on it as a whole.

2) Creating a blank .css file.  This will be named “style.css”, as per standards, and will house the styles for the entire theme.

3) Attach (and copy into the directory) the “reset.css” file.  This clears a lot of the browser-specific styling out of the document, and allows me to start with a blank canvas.  For more information on “CSS Reset”, visit Eric Meyer’s site where he documents the need for / use of a CSS Reset.

The first div I create is a #wrapper div container. I set the width to 960 (because I’ve used a spinoff of the 960 grid system to design my mockup) and set the margins to “auto”.  This pushes the div horizontally into the center of the page, and allows me to center the theme no matter what screen resolution someone is using (my themes are all optimized for 1024×768 and larger).

After that, I begin taking the image from the top down and pulling pictures (either through slicing or cropping) from Photoshop into Dreamweaver.  I started with the header:

Notice there’s no logo?  We’ll get to that in a second.  This image will become the background for it’s own div (a #header div).  Inside that div, I’ll position the logo and link it to <?php bloginfo(‘url’); ?>, a template tag that will automatically insert the URL of the blog (even if it’s not on the root of the site).

Continuing on, I’ve divided my navigation (which I’m using images for to get a really nice hover effect) into slices in Photoshop:

Saving them (and their respective hover images) into the image folder, I then create an unordered list to display them.  This puts them in a nice vertical line, but since I need them to display horizontally, there’s a few things left to do.

In the CSS code, I add:

.nav li {
    float: left;
}

which causes the items to float next to each other in a horizontal line (if you’re not using the CSS Reset, you’ll also have to put:

.nav li {
    float: left;
   list-style: none;
}

to get the bullets removed.

So, basically, by taking the parts of the Photoshop file and slicing/cropping them in Photoshop, I end up with a web comp that is very close to the mockup.  You can see a web comp (non-working) here:

http://www.studionashvegas.com/test/pwa

Tomorrow I’ll start switching the .html file over to .php files that are separated by their function (index, header, sidebar, footer).

A lot of people ask me what process I use to design themes for WordPress, and my answer to that question is the same answer I give to people who ask my design process “in general”: I start with a Photoshop mockup and take it into HTML via Dreamweaver.  The only difference is that I (quite literally) drop WordPress code in at the last minute, and separate a SINGLE .html file into .php files (header.php, sidebar.php, footer.php, and index.php).

So, to shed some insight into my process (and the process of creating a WordPress theme in general), I’m going to let you in on the creation of a theme for one of my current clients, Pray With Africa:

Pray With Africa is sending out a missions team to different cities in Africa in the next few weeks.  They wanted a site that could be easily updated, have a blog element, and could be a place for pictures to be funneled in.

Of course, I chose WordPress (and not just because of my affinity for it).  It’s super easy to blog with, has the ability to bring in Flickr galleries, and can be combined with Windows Live Writer to do posts offline while they are in the remote areas.  Live Writer can then push the posts out all at once when they have access again.

So I set to work on a design.  Here’s what I came up with:

Pretty straightforward, nothing too fancy, and just the right amount of grunge and clean to make it interesting. 

So, that’s where I am right now.  I’ll be documenting my progress as I turn this wireframe mockup into a WordPress theme.  The next part will be the different parts to a theme and where those parts lie in the comp pictured above.

[Note: this project is due tomorrow for the client, so don’t expect it to be documented right away.  Client first, then education ]