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.