Hello, I'm mitch canter.

I’m a director of engineering

Living In nashville, tn.

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.