WordPress

Creating a WordPress Theme (Part 3): Header

In the Part 3 of our series, we’re going to start (finally) with the development of our WordPress theme. As I’ll not be able to show everything in one article, I’ll show only the header development today. We’re going to use the Default theme as our starting point and change it according to our needs.

Remember to download the final design created in Part 1, because we’re going to use the Photoshop file to extract the header background, the menu background and the social media icons.

Files

In order to start our theme’s development we’re going to copy the Default theme folder (wp-content/default) to a new folder we’re going to call wp-content/mytheme. The next step is to remove the files we’re not going to use. Delete the following files:

  • comments-popup.php
  • kubrick.pot
  • rtl.css

You can delete all files inside the images folder too, because we’re not going to use any image from the Default theme. Access your blog’s Dashboard and go to Appearance > Themes. Activate the theme you’ll be working on (still named WordPress Default 1.6) checking the theme’s folder. Go to your blog’s address and you’ll see something like this:

Theme before our changes

Theme before our changes

Finishing up with the files in this first part, copy the file 960.css from 960 Grid System. You should copy it to our theme’s main folder (wp-content/mytheme).

Updating the PHP

Now that we started with our theme, let’s open the header.php file and make some changes.

You can use your preferred editor. I’ve been using NetBeans for some time now. If you prefer something simple, I suggest Notepad++.

Inside <head> Tag

First let’s change what’s inside the <head></head> tags.

  1. In the first lines of the file we’ll change the package information according to our theme: change “@subpackage Default_Theme” to “@subpackage MyTheme_Theme”.
  2. Next, remove the additional styles definition of the sidebar of the Default theme because we’re not going to use it. So, remove:
    
    <style type="text/css" media="screen">
    
    <?php
    // Checks to see whether it needs a sidebar or not
    if ( empty($withcomments) && !is_single() ) {
    ?>
    	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    <?php } ?>
    
    </style>
    
    
  3. Now we’ll include the 960.css style sheet. Add it before our style.css in case we need to change any property used by 960.css.

Inside <body> Tag

We’re going to continue our changes in the PHP file by updating the <body> content. First, we’ll add the blog title, then the social media icons and to finish this part we’ll create the menu.

Blog Title

  1. Remove the <div id=”page”>. We’re not going to use this DIV.
  2. Add the “container_12″ class to <div id=”header” role=”banner”>. It means that this DIV will have a 960 px width and will be divided in 12 columns. The class comes from the 960.css.
  3. Add the “grid_8″ class to <div id=”headerimg”>. It means that this DIV will have 8 columns. This class is also from 960.css.
  4. Inside H1 tag, where the title is located, add “text-shadow” class to the A tag. Add the same class to the DIV containing the blog description.

We used here the WordPress bloginfo() function. This function is used to retrieve several information about the blog, like the title and description

Social Media Icons

  1. After <div id=”headerimg”> is closed, still inside the <div id=”header”>, add the code related to the social media icons:
        <div id="socialmedia" class="grid_4">
            <a href="http://twitter.com/oscardias" title="<?php _e('Follow me on Twitter!', 'mytheme'); ?>">
                <img class="box-shadow" src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter.png" alt="<?php _e('Follow me', 'mytheme'); ?>" /></a>
            <a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e("Subscribe to my RSS Feed", "mytheme");?>">
                <img class="box-shadow" src="<?php bloginfo('stylesheet_directory'); ?>/images/rss.png" alt="RSS" /></a>
            <a href="mailto:oscar@oscardias.com" title="<?php _e('Subscribe via E-mail', 'mytheme'); ?>">
                <img class="box-shadow" src="<?php bloginfo('stylesheet_directory'); ?>/images/mail.png" alt="<?php _e('Email', 'mytheme'); ?>" /></a>
            <a href="http://www.softerize.com/" title="<?php _e('Check out my company - Softerize', 'mytheme'); ?>">
                <img class="box-shadow" src="<?php bloginfo('stylesheet_directory'); ?>/images/softerize.png" alt="Softerize" /></a>
        </div>
    
  2. Before the menu, let’s add <div class=”clear”></div>. As the 960.css uses floats to define columns, we need this “clear” in order to start the next line properly.

As you can see, we used the “grid_4” class, which means we’re using 4 columns. Adding the 8 columns used before, we have the 12 columns from the container_12 (of course).

It’s necessary to extract the icons from the Photoshop file. If you don’t want to do that, just download the images here: twitter.png,rss.pngmail.png and softerize.png. Of course you can use any image you want, with the size of 48px by 48px. Copy these files in the wp-content/mytheme/images folder.

We used the bloginfo() function again, but this time we got the RSS feed URL for our blog. The other function used in this code is _e(). It is used by WordPress to translate our theme. We can include a .mo file with the translation to any language and WordPress will take care of selecting the correct text for each language. I’ll show that in the future.

Menu

  1. Let’s add the following for our meun:
        <div id="menuleft" class="grid_1"></div>
        <div id="menu" class="grid_10">
            <ul class="text-shadow">
                <li class="page_item first_page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home', 'mytheme'); ?>"><?php _e('Home', 'mytheme'); ?></a></li>
                <?php wp_list_pages('sort_column=post_title&title_li=');?>
    
            </ul>
            <?php get_search_form(); ?>
        </div>
        <div id="menuright" class="grid_1"></div>
    
  2. Remove the <hr /> in the end of the file.

We’ve added here 3 DIVs. The first for the left empty space, then the menu itself and the last one for the right empty space. We used here the is_home() function, that checks if the current page is the home page, and the get_search_form() function, which adds the search form. As we don’t have a searchform.php file we’re going to create a new file with that name. The content of the file is quite small:

<div id="search">
	<form id="searchform" action="<?php bloginfo('url'); ?>" method="get">
		<input type="text" id="searchinput" name="s" class="searchinput" value="<?php _e('search'); ?>" onfocus="if (this.value == '<?php _e('search'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('search'); ?>';}" />
		<input type="submit" id="searchsubmit" class="button" value="" />
	</form>
</div>

The final code of the header.php file is this:

<?php
/**
 * @package WordPress
 * @subpackage MyTheme_Theme
 */
?>
<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/960.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<div id="header" role="banner" class="container_12">
    <div id="headerimg" class="grid_8">
        <h1><a href="<?php echo get_option('home'); ?>/" class="text-shadow"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>
    </div>
    <div id="socialmedia" class="grid_4">
        <a href="http://twitter.com/oscardias" title="<?php _e('Follow me on Twitter!', 'mytheme'); ?>">
            <img class="box-shadow" src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter.png" alt="<?php _e('Follow me', 'mytheme'); ?>" /></a>
        <a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e("Subscribe to my RSS Feed", "mytheme");?>">
            <img class="box-shadow" src="<?php bloginfo('stylesheet_directory'); ?>/images/rss.png" alt="RSS" /></a>
        <a href="mailto:oscar@oscardias.com" title="<?php _e('Subscribe via E-mail', 'mytheme'); ?>">
            <img class="box-shadow" src="<?php bloginfo('stylesheet_directory'); ?>/images/mail.png" alt="<?php _e('Email', 'mytheme'); ?>" /></a>
        <a href="http://www.softerize.com/" title="<?php _e('Ckeck out my company - Softerize', 'mytheme'); ?>">
            <img class="box-shadow" src="<?php bloginfo('stylesheet_directory'); ?>/images/softerize.png" alt="Softerize" /></a>
    </div>
    <div class="clear"></div>
    <div id="menuleft" class="grid_1"></div>
    <div id="menu" class="grid_10">
        <ul class="text-shadow">
            <li class="page_item first_page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home', 'mytheme'); ?>"><?php _e('Home', 'mytheme'); ?></a></li>
            <?php wp_list_pages('sort_column=post_title&title_li=');?>

        </ul>
        <?php get_search_form(); ?>
    </div>
    <div id="menuright" class="grid_1"></div>
</div>

This is how our theme looks before we start working on the style.css:

Header with PHP but without CSS

Header with PHP but without CSS

In the next section I’ll show our style sheet.

Style Definition in the CSS

Open style.css file from out theme. First thing you’ll see is a comment with the information about the theme. That’s the information used by WordPress to show your theme in the Dashboard. So let’s update it:

/*
Theme Name: MyTheme
Theme URI: http://oscardias.com/
Description: WordPress theme created in Oscar's Personal Blog.
Version: 0.1
Author: Oscar Dias
Author URI: http://oscarias.com/
Tags: green, fixed width, two columns, widgets
Text Domain: mytheme

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

*/

After that comment you can remove everything in the file. We’re going to include our own styles next, starting with the styles that are relative to the entire theme:

  1. First let’s style the body tag. For our font we’ll use Verdana, size 10px, black color and left aligned. Let’s clear the margins and paddings. To finish it up, let’s use the dark green from our design as the background.
    body {
        font-size: 62.5%; /* Resets 1em to 10px */
        font-family: Verdana, Arial, Sans-Serif;
        background: #002c00;
        color: #000;
        text-align: left;
        margin: 0;
        padding: 0;
    }
    
  2. Now the links. We’ll use green color and underline. The color will be brighter for hovered links.
    a {
        color:#008800;
        text-decoration:underline;
    }
    a:hover {
        color:#00bb00;
    }
    
  3. Next we’ll style the headers. Let’s define different sizes for each level. Besides we’ll also define the spacing for the H1 that is used for the title.
    h1, h2, h3, h4 {
        font-family: Verdana, Arial, Sans-Serif;
        font-weight: bold;
    }
    h1 {
        font-size: 3.2em;
        text-align: left;
        padding-top: 70px;
        margin: 0;
    }
    h1, h1 a, h1 a:hover, h1 a:visited {
        text-decoration: none;
        color: #ff0;
    }
    h2 {
        font-size: 2.4em;
        margin: 10px 0 5px 0;
    }
    h2, h2 a, h2 a:visited {
        color: #000;
        text-decoration: none;
    }
    h2 a:hover{
        color:#00bb00;
    }
    
  4. To finish the global styles, we’ll define the SMALL and HR tags.
    small {
        font-size: 1.2em;
        font-style: italic;
        color: #666;
    }
    hr {
        border:1px solid #008800;
        padding:0;
        margin:20px 0;
    }
    

Now we’re going to create the specific header styles.

  1. Our header will use the image extracted from our design.
    #header {
        background: #002c00 url('images/headerbg.jpg') no-repeat bottom center;
        padding: 0;
    }
    
  2. For our title and description we’ll use a 210px height so our menu will be forced down.
    #headerimg {
        margin:0;
        height: 210px;
    }
    #headerimg .description {
        font-size: 1.8em;
        text-align: left;
        text-decoration: none;
        color: #ff0;
    }
    
  3. The next step is to create the social media style.
    #socialmedia {
        margin-top: 50px;
        height: 100px;
        text-align: right;
    }
    #socialmedia img {
        margin: 33px 15px auto 0;
        height: 48px;
        width: 48px;
        border: 0;
    }
    
  4. For our menu we’ll use another image extracted from our design. It will be used in the background. We’ll also use the border-radius property from CSS3. Notice that we’re overwriting the margin with 8px. In the 960.css it was defined as 10px.
    #menuleft, #menuright {
        height: 58px;
    }
    #menu {
        background: transparent url('images/menubg.png') repeat-x bottom center;
        border: 2px solid #008800;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        height: 54px;
        margin: 0 8px;
        padding: 0;
    }
    
  5. As we continue with the menu, we’ll go to the buttons. Let’s get another image from our design.
    #menu ul {
        list-style: none;
        margin:0;
        padding:0;
    }
    #menu ul li {
        float:left;
        margin:0;
        border-right: 2px solid #008800;
    }
    #menu a, #menu a:visited {
        font-size: 2.4em;
        font-weight: bold;
        height: 34px;
        text-decoration: none;
        margin:10px;
        color:#00c000;
        float:left;
    }
    #menu .page_item {
        background: transparent url('images/btnbg.png') repeat-x bottom;
    }
    #menu .page_item:hover {
        background: transparent url('images/btnbg.png') repeat-x top;
    }
    #menu .current_page_item {
        background: transparent url('images/btnbg.png') repeat-x top;
    }
    #menu ul li.current_page_item a {
        color:#0f0;
    }
    #menu .first_page_item {
        -moz-border-radius-topleft: 10px;
        -webkit-border-top-left-radius: 10px;
        -moz-border-radius-bottomleft: 10px;
        -webkit-border-bottom-left-radius: 10px;
    }
    
  6. Now we’re going to finish our menu styling our search form. We’ll change it a little, if compared with our design, because we’ll add a magnifier icon next to it. Copy the image herei.
    #search {
        float:right;
        margin: 10px 10px;
    }
    form#searchform {
        position: relative;
    }
    .searchinput {
        border: 1px solid #008800;
        padding: 5px;
        width: 200px;
    }
    .button {
        position: absolute;
        top: 3px;
        left: 185px;
        background: url(images/mag.gif) no-repeat;
        height: 20px;
        width: 20px;
        border: 0;
        cursor: pointer;
    }
    

So, that’s it. We finished the header of our theme. It should be looking like this:

Our theme with the header finished

Our theme with the header finished

Conclusion

In this article we started our theme development. We included the menu and the social media icons inside our header.php. Besides, we’ve started styling out theme so it looks like what we want. A great reference for the PHP functions we’ve used is the WordPress Codex, wehre you can find documentation about the WordPress system.

Click here (78.5 Kb) and download our theme as it is right now.

In the next post we’ll continue the development of our theme. We’ll go to the index.php and define more styles. If there is enough time we’ll also do the sidebar. Please leave your comments! Thanks for the visit.

Other Posts from the Series
Creating a WordPress Theme (Part 1): Photoshop
Creating a WordPress Theme (Part 2): Introduction