J.me

How to create WordPress template part 2

Now is the part 2. If you haven’t read the part 1 yet, go here to read it. If in the part 1 we have make the graphics we need to build the template, now it is the time to play with CSS and HTML. But first, before we going further, we must first understand the WordPress template hirearchy. The WordPress template, in the very minimum, need at least two files, style.css and index.php. We can however have more files that recognized by WordPress to deliver different look on different requested page. But now, we create the standar template, at least we have header.php, footer.php, sidebar.php, index.php, comments.php, functions.php and style.css.

We first start with style.css. The first thing we did is write the details of the template, on the comment header of style.css. See here for more information.

Here is my style.css details.

/*
Theme Name: Simple Golden Black
Theme URI: http://wordpress.org
Description: A simple template with elegant look.
Author: Jeffri Hong
Author URI: http://jeffri.me
Version: 1.0
Tags: two columns, fixed width, elegant, simple
*/

This is pretty self explanatory, isn’t it? 🙂 This details will show in the themes selector on your WordPress admin page. Now let’s give some default properties.

body
{
font-family: arial;
font-size: 12px;
margin: 0;
padding: 0;
background: #c6bb93;
color: #310;
}

div
{
margin: 0;
padding: 0;
}

a
{
text-decoration: none;
color: #430;
}

a:hover
{
text-decoration: underline;
color: #650;
}

h1, h2, h3, h4, h5, h6
{
margin: 0;
padding: 0;
}

Here we just give some properties on body and make sure that all div and header (h1, h2, …) have 0 margin and padding. We also give some properties for anchor (link) for normal one and hover one. That’s it.

Okay, let’s leave the style.css for a moment and move to header.php. Here is the header.php.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=<?php bloginfo(‘charset’); ?>” />
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats please –>
<style type=”text/css” media=”screen”>
@import url( <?php bloginfo(‘stylesheet_url’); ?> );
</style>
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php wp_head(); ?>

</head>

<body>
<div id=”header”>
<div id=”header-content”>
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h4><?php bloginfo(‘description’); ?></h4>
</div>
<div id=”header-menu”>
<ul id=”head-menu-list”>
<?php wp_list_pages(‘title_li=’); ?>
</ul>
</div>
</div>

The head tag is actually copied from other WordPress template, we don’t need to care about it for now. The interesting part is in the body tag. You can see that I use div tag instead of classic table for layout. The header-content will contain the blog title and description while the header-menu contain the pages list. This won’t reproduce the output we want yet, it still need an assist from CSS. 🙂 Also, you can see that we call some WordPress function here. The bloginfo and wp_list_pages, see the links for more information. The body tag didn’t closed here, it will be closed on footer.php.

So now, let’s get going to the footer.php. It will contain this.

<div id=”footer”>
<div id=”footer-content”>
<h4>&copy; Copyright <?php echo date(“Y”); ?> <?php bloginfo(‘name’); ?>. Powered by <a href=”http://wordpress.org/”>WordPress</a> and template by <a href=”http://jeffri.me”>Jeffri</a>.</h4>
</div>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/foot-right.png” alt=”foot right bg” style=”float: left;” />
</div>
<?php wp_footer(); ?>

</body>
</html>

It is still nothing new here. Just another layout for footer with div. On the footer-content we will have copyright information. Notice there is img tag there. It is used as delimiter between the footer-content which have bright background and the footer dark background. This img tag is floating left as you can see.

Header and footer are ready now, next, we going to index.php.

<?php
get_header();
?>

<div id=”center”></div>

<?php
get_footer();
?>

OK, leave it like this first. You see we call get_header and get_footer function, this is the same as include the header.php and footer.php. We also have one div here. It will used later. Now, it is the time to play with the CSS and doing the positioning for header and footer.

We start from header.

h1
{
font-size: 50px;
line-height: 70px;
}

#header
{
background: #000 url(images/head-bg.png) repeat-x;
width: 100%;
height: 150px;
overflow: hidden;
}

#header-content
{
margin: 7px 2%;
}

#header-content h1 a
{
color: #ddd;
}

#header-content h1 a:hover
{
color: #aaa;
text-decoration: none;
}

#header-content h4
{
color: #cb9;
font-size: 14px;
line-height: 14px;
}

#header-menu
{
float: right;
background: url(images/head-menu-side.png) no-repeat top left;
padding: 0 0 0 51px;
margin: 8px 2%;
}

#head-menu-list
{
padding: 0;
margin: 0;
}

#head-menu-list li
{
list-style-type: none;
float: left;
padding: 0 25px 0 10px;
background: url(images/head-menu-bg.png) repeat-x;
height: 35px;
line-height: 35px;
}

#head-menu-list li a
{
color: #000;
font-size: 21px;
font-weight: bold;
}

Okay, a little explanation about this. If you see the header.php html, we have one parent div (header) with another two div (header-content and header-menu). The header-content will be placed on top left. But the header-menu will be placed on bottom right. We start with the parent div, we give black background with black background image (see the previous part to know what images we refer to here), and it is repeated horizontally. The width is 100% so this div will fill all of available width of your browser. The height is 150px, same as the background image height.

The header-content have margin of 7px on top and bottom, and 2% for left and right. Along with h1 (the blog title with line-height 70px) and h4 (the blog description with line-height 14px), so far we have filled 98px for the header-content. So the rest 52px (150 – 98) will be used for header-menu. This way, we calculate the remaining height to positioning header-menu to bottom. 🙂 It is probably not the best way, but it is also not a bad way, because our target now is Internet Explorer 6 or higher. I don’t want to care of another crappy old browser. 😛

Now we positioning the header-menu. We first float it to right, then choose the best margin for it. For the background, we use the delimiter image with no repeat, and to show the image, we add the left padding to 52px. We didn’t use different img tag for this as we do on footer, because we have the space for this image already. lol 🙂 Okay, the next is to positioning the list to horizontal. It is a bit tricky.

Before that, we give 0 padding and margin to the ul (head-menu-list) first. Then to the li, we give float left, this way, it will be listing horizontally. We also give some padding there (left and right only), and use the light background. For height, we make it same as line-height to make it center vertically. That’s it. Header done, it will now looks like below.

Now, the footer. Here we go.

#footer
{
background: #000 url(images/foot-base-bg.png) repeat-x;
width: 100%;
height: 45px;
clear: both;
}

#footer-content
{
background: url(images/foot-bg.png);
height: 45px;
width: 70%;
float: left;
margin-left: 2%;
padding: 0 20px;
}

#footer-content h4
{
font-size: 12px;
line-height: 45px;
}

Hmm…. The footer here is the parent div of footer-content, and we give it 100% width, same as header you see above. The height is 45px, same as the background image height. The background is the dark one, while the footer-content will have bright background. We also give clear: both to make sure it clear all floating element.

The footer-content is floating left, same as the image delimiter you see on the HTML. The height is also 45px, width on 70% also some margin and padding to make sure it shows fine. 🙂 For the h4, I only change the font size and line height to make sure it centered vertically. Now it should looks like this.

Not bad. That is enough today. Next day, we will start creating the sidebar and the content. 🙂 See ya!

1 comments | Leave a comment

  1. sandrine March 12, 2009 08:11

    I like your analysis and mannner of speaking, thank you for this interesting ticcket, it s always nice to visit this beautiful blog 🙂

Leave a comment