It’s been about a week since my last update to this series due to me being incredibly busy with paying work, but never fear…Part 3 is here.

In Creating Your Own WordPress Theme Part 2 we finished up with a very basic theme with no styling. It works, but it’s ugly. Today we’re going to pick up right where we left off and get most of the layout, minus any graphics, done.

Open style.css so we add in some of the basics including font, font-size, h1, etc. Here’s what I’ve done so far…

body, html {
margin: 0;
padding: 0;
color: #000;
background: #fff;
font: 10pt verdana, arial, sans-serif;
}

small {
font-size: 9pt;
}

Next let’s setup the page. I want the page to be centered on the screen with a fixed width of 960 pixels.

#page {
width: 960px;
margin: 0 auto;
padding: 0;
}

What this is telling the browser to do is make the width of the page 960 pixels, no margin top or bottom, center the page in the browser (that’s what auto is for), and no padding. If you’re not familiar with CSS, then use this tutorial to learn more about it. It’s what I did.

Ok, the header is a bit more complicated, although not much because I want to separate the header into two distinct sections next to each other, one for the logo, and the other for the search form. So here’s the css…

/* header */

#searchform #s {
width: 250px;
}

As you can see, the left side is 400 pixels wide and the right is 560 pixels. This should give us plenty of room to put a decent sized search input. Let’s change up our header.php file to reflect what we’ve done.

< div id="header" >
< div id="header-l" >
< div class="title" >< a href="< ?php bloginfo('home'); ? >" title="WordPress Mania - Crazy About WordPress" >< ?php bloginfo('name');? >< /a >< /div >
< div class="description" >< ?php bloginfo('description'); ? >< /div >
< /div >
< div id="header-r" >
< div id="search" >< ?php include(TEMPLATEPATH . '/searchform.php'); ? >< /div >
< /div >
< /div >

And the header is done. Let’s go ahead and add some navigation below the header for pages. Here’s the css:

/* Navigation */

#navbar a:hover {
color: #c00;
text-decoration: none;
}

And now add the following at the bottom of header.php

< div id="navbar" >
< ul >
< li class="< ?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ? >current_page_item< ?php } else { ? >page_item< ?php } ? >">< a href="<?php echo get_settings('home'); ?>" >Home< /a >< /li >
< ?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ? >
< /ul >
< /div >

Now to wrap up Part 3, we’re going to make two separate columns in the main body for content and sidebar and toss in the footer for good measure. So here’s the rest of the css for this lesson.

/* content */

.navigation {
margin: 0 0 30px 0;
padding: 0;
}

You can see we have a content area that will be on the left that is 580 pixels wide, a sidebar on the right that is 360 pixels, and the footer at the bottom that aligns the text to the center of the page.

Well, that’s it for this part, next time we’ll do more with the content area, sidebars, and if we have time, the comments. Until then…