In this third part of the Creating Your Custom Theme tutorials we are going to concentrate on creating the header.php file that is needed in your custom theme.  This post is a follow on from “Creating Your Theme Stylesheet“.

The first thing that you need to do is to create a blank file, either in your text editor, or like me in a web editor such as Dreamweaver.  Now save this file as header.php in your themes folder.  The code below is what I always use in my header.php file and below I will explain what this does.

Lines 1 -5 are the standard HTML header lines that are located in most HTML files that are created these days.  It is only after this that things start to become a little differnet.  Line 6 sets the title of your pages.  In this case it is the name of your blog that you set in the settings pages, followed by the title of the page, which is set from the post/page panel.  You may want to change these round so the page title displays first, thats up to you.

Lines 7 and 8 are setting the character set and also simply providing some feedback to WordPress about the generator of the site.  These are not essential.  However line 9 is very important as this sets the link to your themes stylesheet and without it your site will look very differenet.

The next three lines (lines 10 -12) link your sites feeds.  WordPress generates three different feeds for your blog.  These are rss2, rss and an atom feed.  What these lines of code do is link the feed to this page so that when you click on the feed link (in the address bar in Firefox and in the toolbar in IE7) you are asked which feed to load.  These are important too.

Finally there are two lines of code one which is needed for pingbacks to work and the other that is simply to assist search engines in finding your archives as including the code that is on line 14 will mean that you archives (monthly) are listed in the head section of the site.

After this code all you need to do is close the head tag () and then you can start coding your page.  Here we are going to make a simple site were we have a header section, including the name of the blog, a content area for the posts and pages to go, a sidebar to include things like archive and category links and then a footer section.  Underneath the header section we are also going to include a page navigation menu which will make use of the wp_list_pages() function in WordPress.

When using the wp_list_pages() function we need to decide exactly what we want to display in terms of pages.  In this case I want a list of the top level pages (i.e. no sub pages), without a title and I want to able to change the order of the pages using the page order within the WordPress write panel.  To do this I would beed to include the following code:

It is also important that list pages function is enclosed in a <ul> tag.  If this is not done then your page will not vaildate and also Internet Explorer will display you page list incorrectly.  So that is it for your header.php file.  You can save this and then upload it to your server ready for use when the rest of the theme files are created.  Why not watch the video below which demonstrated the explanation above.

Get the latest Flash Player to see this player.