Coding the Header of WordPress Theme

In our previous tutorial we built a very basic blank WordePress theme from scratch. Building Blocks of WordPress Theme.

Today we’re going to design and code the header.php of our theme and then call that header from our index.php.

What’s a header.php?

header.php is basically a file that will define the Header of our theme. It usually contains the doc type , style sheets and other header information. You can also add your logo and navigation to this theme. It’s perfectly fine to use predefined header.php of some theme framework such as Starker and edit it according to your needs.

We’ll define our top navigation and logo in our header.php . It’s really is a personal choice and you can just keep your header.php to basic header info if you want to or rename your header.php to anything you want.

What you need to keep in mind is that you must include wp_head() function in this file regardless of the name of the file.

Step 1

Create a new file in your favorite code editor and save it as header.php.

DOCTYPE

we begin with a DOCTYPE declaration and for our theme we will use simple HTML5 doctype.

Which DOCTYPE should you choose? Well it’s one again a personal choice. HTML5 Doctype will render pages in standards mode and that’s what we want.

<!DOCTYPE html>

Step 2

No we begin our html tag and add a wordpress function that will set html language attributes.

<html <?php language_attributes(); ?>>

As you can see language_attributes is a wordpress function that will set our lang and dir attribute and for the default english installations it will render the code below.

<html lang="en-US" dir="ltr" >

If you have no plans to release your theme to the world, you can just add the code above directly into your header.php instead of using the language_attributes function and reduce the workload on your php interpreter.

Step 3

Next comes the meta tag and this time we’ll set the charset attribute that will define the character set of our document.

<meta charset="<?php bloginfo( 'charset' ); ?>" />

You can also set it to utf-8 directly and avoid another php function.

Step 4

Now we need to add title tag to our document. The <title> tag basically defines the title in the browser toolbar and favorites. Properly defined title tag is a must for your pages to rank well in search engines.

WordPress has a built in function for titles called wp_title. By default it outputs blank for home page. There are many ways we can optimize the title tag but it’s something we’ll explain in another tutorial. For the purpose of this tutorial we’ll use the code below to define our title tag.

<?php bloginfo('name'); ?> <?php wp_title('|',true,'');?>;

The code above will print blog name on home page.

Step 5

Now we’ll define profile, add style-sheet and pingback url using rel tag.

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

Step 6

Last but not least we need to add WordPress function wp_head() to close our head tag. This function is a must as it is required by plugins. Add the code below to close your header tag.

<?php wp_head();?>
</head>

Put it all together.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' );?>"/>
<title><?php bloginfo('name'); ?> <?php wp_title('|',true,'');?></title>
<link rel="profile" href="http://gmpg.org/xfn/11"/>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<?php wp_head();?>
</head>

and that’s your header tag.

Now we’ll add our top navigation and <h1> tag that we’ll replace later on with a logo.

Adding Navigation

There are many ways to add navigation in wordpress. WordPress 3 introduced a new function called wp_nav_menu and that’s what we’ll use today. You’ll learn more about navigation in our future tutorials.

Create a new file in your theme directory and save it as functions.php. Add the code below to register your menu in functions.php.

<?php
function register_our_menu(){
register_nav_menus(
array(
'primary-menu'=>__('Top Menu'))
);
}
add_action( 'init', 'register_our_menu' );
?>

The code above registered one custom menu. Now we need to edit our header.php to display our custom menu.

Add the code below anywhere in the theme to display your custom menu.

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

The code above will fall back to wp_list_pages until you define your own custom menu. By default wp_list_pages doesn’t display Home link so we need to add another function to our functions.php.

Add the code below to your functions.php

<?php
function add_home_link($args){
	$args['show_home'] = true;
	return $args;
}
add_filter('wp_page_menu_args','add_home_link');
?>

Voila!

Now we need to create a basic HTML structure of our theme. Add the code below to your header.php just below the </head> tag.

<body>
<div id="container">
<div id="masthead">

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

<div id="logo">

</div><!--end logo-->

As you can see we have simple basic structure for our header. We have a container div and a masthead div that will act as container of our header then we have php code to display our custom menu. We also have div with an id of logo for our logo.

Logo:

Logo in our theme will appear below the top navigation. We will design our logo in future tutorials but for now we’ll add the link with our site title in <h1> tag. Add the code below inside your div with the id of logo.

	<h1 id="site_title">
		<a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>" rel="home"><?php bloginfo( 'name' ); ?> </a>
	</h1>

That’s it. Below is the code for our header.php.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' );?>"/>
<title><?php bloginfo('name'); ?> <?php wp_title('|',true,'');?></title>
<link rel="profile" href="http://gmpg.org/xfn/11"/>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head();?>
</head>
<body>
<div id="container">
<div id="masthead">

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

<div id="logo">
	<h1 id="site_title">
		<a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>" rel="home"><?php bloginfo( 'name' ); ?> </a>
	</h1>

</div><!--end logo-->

</div><!--end masthead-->

The output should like below.

That’s it for the day. We’ll code the WordPress loop in our next tutorial.

WPSmart – WordPress Tips, Tutorials and Themes