studionashvegas | design and social media

This post is part of the “Creating a WordPress Theme from a .PSD” series for designers to use for theme development. The other posts can be found here:

• Part 1 – Background / Introduction
• Part 2 – From .PSD to .HTML
• Part 3 – WordPress Structure
• Part 4 – The Header (header.php)
• Part 5 – The Footer (footer.php)

We’ve taken a look at one of the key files in the WordPress universe, the header, which kicks off everything else in a WordPress theme (including CSS, RSS, and all the other meta goodness). Now, going from beginning to end, we’ll explore the footer of a standard WordPress Theme. To be honest, a footer really only needs to have three elements:

1. the <?php wp_footer(); ?>
2. a </body> tag
3. an </html> tag

The first of those, the php function, serves the same purpose that <?php wp_header(); ?> does in the header – it serves as a hook for plugins and other WordPress functions that need to prophigate themselves in the footer. Think of it this way: if you were to install the Google Analytics plugin, how do you think it knows where to put the Analytic code? Answer: that php tag.

However, aside from those three lines, you can put anything else you want to show up under the sidebar and content. A lot of people add a second navigation to their footer (sometimes including other less-important site pages such as the privacy policy and legal information). The theme designer’s tagline/information can be found there too. And why not show your love to WordPress by including a statement saying that you are “Proudly Powered by WordPress”.

Widgets go great in a “footer-bar”. A great way to display them is to have three columns floated next to each other with widgetized data in them (a la Blogging Sueblimely and Lorelle). This looks very clean and provides a quick way to showcase a lot of information in relatively short space.

Of course, there are fun footers too.  It’s your theme – do what you want with it!

Starting with the design concept, we took our WordPress theme from a .psd file to an .html file. Then we started laying the groundwork by commenting and slicing apart the .html file we created into the various .php files.

So, what do those various .php files really do?  And what should go in each one?  That’s where will shift our focus as we take a look at the beginning of any good WordPress theme, the header.php.

The header, by nature, will be the first file you call in your WordPress theme.  Typically, it will contain one or more of the following elements:

• Doctype Information
• Meta (Charset, Title, Description, Keywords)
• RSS Information (Feed/Comments Feed)
• CSS Stylesheets
• Javascript Calls/Functions
• The WordPress Header Call

The Doctype information should have been automatically included when you started your new Dreamweaver file back in step 2, so that’s pretty self explanatory.

When it comes to your meta information, you want to make sure a few things are covered.  As good practice for SEO, make sure your title has good keywords (You can use <?php bloginfo(‘name’); ?> if you want – just make sure that your blog name has those keywords included).  The codex also explains how you can set different

Your description is next.  If you want to use the description you declared inside of WordPress, use <?php bloginfo(‘description’); ?>.  Once again, make sure you make great use of those keywords!

And finally, your keywords (yes, I know I’ve talked about keywords quite a bit – can you sense a trend?) should only be the keywords that best describe your site.  Only use a few of them, and don’t pad the ones in you know won’t describe your content – Google doesn’t like that.

Your RSS Feeds are next.  Yes, I said feeds, but if you only have one, that’s fine. At least call your WordPress feed in the header:

<link rel=“alternate” type=“application/rss+xml” title=“<?php wp_bloginfo(‘name’); ?>” href=“<?php wp_bloginfo(‘rss2_url’); ?>” />

The relevance of the link, the type (RSS+XML), the title, and the URL.  This puts that nice little RSS icon in your Firefox toolbar also (but don’t forget to actually link to it in your blog!)

Next you should link to your CSS stylesheets.  This should be taken care of inside of Dreamweaver, but if you want to release the theme for the public, you can use “<?php wp_bloginfo(‘url’); ?>/wp-content/themes/THEMENAME/style.css”.  In fact, use this anyway – it’s a great way to get it right no matter what! (are you seeing a trend in not hardcoding your theme links?  Makes it easy to port to other sites.)

Any JavaScript you need to use can go after the CSS stylesheets.  But then again, if you’re using JavaScript, you know that already.

Finally, have <?wp head(); ?> right before your </head> tag.  It’s called a “hook”, and it does just what it sounds like: lets functions and plug-ins that are called in the header do their thing.  A lot of plug-ins use this, so make sure it’s there.

Now, here’s where the gray area comes into play. You’ve ended your head tag and started your body tag.  Should you include anything else in your header?  Well, ask yourself this question: are there elements (such as the navigation, logo, and other such items) that you want to be able to show on every page?  If the answer is yes (and it pretty much always is with those elements) then go ahead and put them in.  Usually you want to stop the header RIGHT BEFORE your content div starts. 

Sounds like a lot of elements, but having a great theme means taking care of all of the geeky stuff beforehand.  That all taken care of, you can let the rest of your theme really shine out.

Next time we’ll talk about the footer.php, the possibility of “footer widgets”, and what other goodness you should include.

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

First of all, thanks to Daniel Johnson, Jr for providing a link to the “Fail Whale” origin story.  Read the article, and go support the REAL artist behind the Fail Whale! That being said, when it comes to the original screenshot…

I think it could be spiced up a bit:

And I got to thinking: How funny would it be to have a captioning / photoshop contest to kinda poke fun at Twitter for all its misgivings.

So, here’s the deal.  I’m going to post a high-res version of the twitter maintenance screen below.  The top text is Helvetica Bold, and the bottom text is Helvetica (Arial will also work).  You can edit the words, the captions, the picture itself – anything you want.  The winner will receive their design on an American Apparel shirt free of charge from me, and I will sell their t-shirt in my store. (I’m not going to rip off the original artist by selling her design, so I’m going to respect that wish by not offering it in my store.  If you like the Fail Whale, go support her!).

(By the way, If anyone out there wants to donate some other prizes to the contest, by all means send me an email or use the contact form.)

Post your entries as a link in the comments.  The contest will be open for two weeks (if i’m in the hospital with the baby when it’s done, then I’ll extend the deadline), then we’ll have voting for the same amount of time.  You can only enter twice, and your entries will be subject to verification.

Here’s the file.  Good luck!

EDIT: here’s a link to the file – people said my lightbox was interfering with them downloading it:

http://www.studionashvegas.com/wp-content/uploads/2008/07/failwhale1.jpg

And I know disqus doesn’t allow images – so if you can’t host it on flickr or photobucket, just email it to me and I’ll put it in the thread.