How To Build A WordPress CMS Theme – Part 4: Coding The Header
Whew, we’ve made it to the good stuff! It’s now time to code a real website! If you’re just joining us in this series, I really recommend you start at the beginning, otherwise you might get lost. Here’s where we’ve been so far:
The theme we’ll be coding is based off the Sophie Bifield Cake Company website created by George Elias. You can take a look at the live site to see the pages and functions we’ll be coding.
Before we get start, I recommend setting up a XAMPP version for WordPress, to make it easier to code. There are plenty of tutorials on the web, so I’ll let you use Google to find them. Ready? Let’s go!
Chapter 14: Theme Identification
Before we get to the coding, let’s get the theme identification out of the way first. For all of my WordPress theme, I start with a set of core files and coded that I created, to make it easier so I don’t have to repeat so much stuff. I really recommend you do so as well, and you’re welcome to download the exact same set of files I use here.
Move the theme folder into the correct directory in the WordPress set of files. It should go under wp-content/themes. Let’s give the theme a relevant name. I’m naming mine sophie.
Open up the style.css file and replace the top information with the name of the theme, your name and website, like so:
/*
Theme Name: Sophie Bifield Cake Company
Description: This theme was coded for Georgie Elias by Amber Weinberg.
Author: Amber Weinberg
Author URI: http://www.AmberWeinberg.com/
*/Now, inside of the main theme folder, open up screenshot.png in your editor of choice, and replace it with a 300×225 screenshot of the Sophie Bifield site.
After all that’s done, go into your WordPress admin, click on Appearance > Themes and select the theme. Doesn’t it look nice and fancy there? Of course, if you try to view the actual site, there’s nothing there…yet!
Chapter 15: Coding The Header
I normally recommend coding the entire site with the WordPress functions outright, but for the purpose of this tutorial, we were given regular HTML files. That’s ok, as we can simply replace the necessary code with the right functions to make it dynamic.
First, download the images folder and the CSS and replace the ones in the theme (be careful not to remove the theme information from the CSS), so we’ll have all of our images and styles ready.
Now it’s time for the header. Here’s the regular header HTML from the site:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="google-site-verification" content="9dSE4flAkG6VEde4021UIAg8VggGA9EH7u5vNw8WaPs" /> <meta name="keywords" content="Ottawa Cake, Weddings Ottawa, Ottawa Weddings, Ottawa Wedding Cake, Wedding Cake in Ottawa, Elegant Weddings Ontario, Custom Cakes Ottawa, Eastern Ontario Cakes, Bonnie Gordon Graduate"> <title>Sophie Bifield Cake Company</title> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="wrap"> <div id="header"> <p id="logo"> <a href="index.html" title="Return to the homepage"> <img src="images/logo.png" alt="Sophie Bifield Cake Company Logo" width="210" height="128" /> </a> </p> <ul> <li><a href="about.html">about us</a></li> <li><a href="gallery.html">the gallery</a></li> <li><a href="order.html">pricing</a></li> <li><a href="menu.html">our menu</a></li> <li><a href="press.html">media & press</a></li> <li><a href="contact.html">contact us</a></li> </ul> </div><!-- END Header -->
Pretty simple stuff to work with, so let’s dive in. Open up header.php in the theme folder. You should see something like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/> <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"> <?php wp_nav_menu( array('menu' => 'Main', 'container' => false, )); ?> </div>
It’s actually already pretty close! Remember, the wp_header() hook is needed in case we install plugins. The body_class() function we see on the body tag, adds some nifty classes we’ll need later on to target specific types of pages.
There’s nothing we need to add to the theme’s
tags besides the client’s Google verification tag:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="google-site-verification" content="9dSE4flAkG6VEde4021UIAg8VggGA9EH7u5vNw8WaPs" /> <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> </head>
The header section is where we’ll get to finally use some of those nifty functions we learned! Here’s the HTML for it:
<div id="header"> <p id="logo"> <a href="index.html" title="Return to the homepage"> <img src="images/logo.png" alt="Sophie Bifield Cake Company Logo" width="210" height="128" /> </a> </p> <ul> <li><a href="about.html">about us</a></li> <li><a href="gallery.html">the gallery</a></li> <li><a href="order.html">pricing</a></li> <li><a href="menu.html">our menu</a></li> <li><a href="press.html">media & press</a></li> <li><a href="contact.html">contact us</a></li> </ul> </div><!-- END Header -->
We’ll start by fixing the logo. Because the theme folder is several folders deep and usually needs to be moved several times during it’s life, we shouldn’t rely on relative paths, otherwise we’ll end up having to change it every time we move it (Which for me is at least three times: local, my test server, then the client’s server, and sometimes then the client’s client’s server!).
Luckily, if you recall, the bloginfo function is a big help here. No matter how many times we move the site, it will update the paths correctly for us. So let’s change the link and the image path of the logo:
<p id="logo"> <a href="<?php bloginfo('siteurl');?>" title="Return to the homepage"> <img src="<?php bloginfo('template_url');?>/images/logo.png" alt="Sophie Bifield Cake Company Logo" width="210" height="128" /> </a> </p>
Can you see the difference between the link and the image bloginfo functions? For the link, we simply wanted it to always link to the homepage, therefor I used ‘siteurl’. However, the images folder resides in the theme folder, not in the top directory, therefor we needed to use ‘template_url’. These two functions are so helpful, you’ll start to curse yourself when you realize you can’t use them in the WYSIWYG and custom fields (dangit!)
Now on to the navigation, which is even easier! Here’s the HTML:
<ul> <li><a href="about.html">about us</a></li> <li><a href="gallery.html">the gallery</a></li> <li><a href="order.html">pricing</a></li> <li><a href="menu.html">our menu</a></li> <li><a href="press.html">media & press</a></li> <li><a href="contact.html">contact us</a></li> </ul>
All we simply need to do is replace it with the function:
<?php wp_nav_menu( array('menu' => 'Main', 'container' => false, )); ?>
Now, your entire header.php file should look like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="google-site-verification" content="9dSE4flAkG6VEde4021UIAg8VggGA9EH7u5vNw8WaPs" /> <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/> <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"> <p id="logo"> <a href="<?php bloginfo('siteurl');?>" title="Return to the homepage"> <img src="<?php bloginfo('template_url');?>/images/logo.png" alt="Sophie Bifield Cake Company Logo" width="210" height="128" /> </a> </p> <?php wp_nav_menu( array('menu' => 'Main', 'container' => false, )); ?> </div><!-- END Header -->
From there, go into your WordPress Pages section and create all of the pages contained in the nav on the original site.
After that, simple navigation to Appearance > Menus, create a menu named “Main” and add your nav items. The nav is now done!
And for the real surprise, check your work and see what it looks like, it should look something like this:
How simple was that? This is why I love WordPress so much 
You can follow along with the site’s progress and see a working demo of it in WordPress here. (Note that as we get farther along in the series, it may look more complete that the current tutorial)
Upcoming
Next time we’ll get into the homepage. Until then, do you have any questions on today’s lesson?
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
Thanks for Part 4 of this great tutorials. I always wanted to see how you build a WordPress CMS Theme.
Great Work and Greeting from Austria!
Thanks Markus!
I love this tutorial! It’s easy to use and advanced at the same time! Thank you!!! You’re pretty awesome!
Thanks Will!
Hey Amber I haven’t had a chance to do your tutorials yet, but am looking forward to it. Keep up the good work
thanks! please let me know what you think
Hi Amber, I did all your tutorials and know I understood all things you explained in here, and I’m looking forward for the next tutorials…
Keep it up
This is great stuff Amber! I’ve recently been experiencing the pitfalls of using ‘bloated’ themes as a basis for new ones. Your approach is quicker and it’s ‘better work’ in lots of ways.
Think you could run this series for a few more episodes ;o) I’d be really interested to see your approach for a PSD to WordPress theme creation – would that be a ‘coding the entire site with the WordPress functions outright’ method – or any intermediate stages?
Thanks for you inspiration!
Peter
Hi Peter!
Thanks for your compliments
For actually doing a theme from scratch, I do it exactly like this, except I actually code in the functions as I go, versus doing all of the HTML/CSS first and then adding them in. Makes it much easier to combine those two steps into one.
My pleasure! I’ve come over from ‘the dark side’ – DotNetNuke, but I’m really enthused by WordPress. DNN has its pluses in that eage page can be laid out differently by the client just by shuffling containers around in a wysiwyg-ish gui (shuffling them around a layout of ‘panes’ designed in the template – left col, right col, wide left col, footer etc – as complex as you like). For me one of the WP challenges is giving the client (owner) flexibility in page layout without them getting into a mess of html/css. Gradually getting more of a handle on that, looking forward to understanding more of your if/else approach in a single template.
Just running through your tutorial and found that the header div above has an id=”header”. But in your super-hijinksified theme you are using the tag instead of in the tutorial.
Simple to fix with a id on the header :
Just a heads up for anyone who doesn’t see the menu in all it’s glory!
Tags have disappeared – damn! What I am saying is put an id=”header in the header tag.