The header.php - What Needs to Go in It and What Doesn't

In this tutorial, let's talk about the header.php, an essential file for any WordPress theme. I'll show you a nice header file example and give tips about what needs to go in it and what doesn't.

Step 1: Introduction

The first thing that you need know about the header.php file is your function.

But, we have more than a logo and menu in this file, we also have the head tag and lots of other tags, like: link, script, meta and title.

I've written an example header.php file, I've tried to create a file as full as possible, but feel free to comment on this tutorial giving tips about the file.

Remember that your header is all content that is shown on all the pages of your site. For example, the logo and menu are shown on all the pages so... both will be added to the header.php

If an element is shown only on a specific page, you need to re-think if this element really must be inside your header.

Let's work and I hope that you like it!

Step 2: The Final Code

Here you can get the final code to use in your theme. Read the other steps to know exactly what each line does.

First, paste these lines at the top of your functions.php file: (Remember that you need to modify the paths to your CSS and JavaScript files)

define("THEME_DIR", get_template_directory_uri());
/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.css **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
	
// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Now inside your header.php add these lines: (Remember that you need to modify the paths to your CSS and JavaScript files)

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<!--=== META TAGS ===-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="description" content="Keywords">
	<meta name="author" content="Name">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!--=== LINK TAGS ===-->
	<link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/path/favicon.ico" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<!--=== TITLE ===-->	
	<title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?></title>
	
	<!--=== WP_HEAD() ===-->
	<?php wp_head(); ?>
	 
</head>
<body <?php body_class(); ?>>

<!-- HERE GOES YOUR HEADER MARKUP, LIKE LOGO, MENU, SOCIAL ICONS AND MORE -->

<!-- DON'T FORGET TO CLOSE THE BODY TAG ON footer.php FILE -->

A header "must" have some things, this template that I've made does the following (on the next steps I'll talk about each):

Doctypes
Conditionals to IE8, 7, 6
Meta Tags to ensure that your theme is rendered properly
Favicon, RSS and Pingback
Title
Following official WordPress guidelines, adding scripts and styles with wp_enqueue_script and wp_enqueue_style functions
Optimized with the use of constants and removing Meta Generator tag to assist with security
Clean and commented code

The steps below will talk about the code used and you'll learn why to use it.

Step 2: The functions.php File

Let's begin talking about the functions.php file, we added these lines in the file:

define("THEME_DIR", get_template_directory_uri());
/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
	
// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

The first line just creates a constant called THEME_DIR that stores the template directory, we create this constant to optimize the theme, if you look in our header.php file, we need the directory a few times and we use it in functions.php file also to print the theme path. If we call the get_template_directory_uri() all the time, we just create requests. Creating a constant and using it we save server processing, because we call the function once.

/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

This line removes the Meta Generator Tag, because this tag shows to anyone the WordPress version installed. This kind of information can allow to an invader know the bugs of your version and exploit them.

Adding Your CSS

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

Here, we created a function to add the link tags to header.php. The official WordPress guidelines say that the better way to add styles (.css) and scripts (.js) is with wp_enqueue_script and wp_enqueue_style functions. You can learn more about this in our article, How to Include JavaScript and CSS in Your WordPress Themes and Plugins.

First, we create a function called enqueue_styles and then we call the add_action function, this line says to WordPress that it must call our function when the 'wp_enqueue_scripts' event is triggered, which happens during our call to wp_head() in header.php!

Inside our function we have the following lines:

	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );

First, we register our stylesheet and then add it to WordPress' queue.

We use the function wp_register_style to register a style, this function requests the following:

#1 Param: A name that you can choose, something like mystyle, mediaqueries...
#2 Param: The file path, note that we use the THEME_DIR constant here.
#3 Param: Here you type the dependencies, the name of style files that need to be loaded before this file.
#4 Param: The version.
#5 Param: The media attribute for the link tag.

And then, we call the wp_enqueue_style function and we pass as a parameter the name of our style that will be added.

To add more styles to your file, just duplicate these two lines and modify the name, directory and the other parameters.

Adding the Scripts

Now we'll see the function that adds our scripts.

// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Here the process is the same, the difference here is that we use other functions to add scripts.

To add scripts we use the wp_register_script and wp_enqueue_script functions. The wp_register_script function requires the following:

#1 Param: A name that you can choose, something like jquery, dojo, etc.
#2 Param: The file directory, note that we use the THEME_DIR constant here.
#3 Param: Here you type the dependencies, the name of script files that need be loaded before this file.
#4 Param: The version.
#5 Param: Here you say if this script will be added in the wp_head() (usually in header.php) or the wp_footer() (usually in footer.php) function calls. If you pass false, it will be loaded on wp_head(). If you pass true, will be loaded on wp_footer()

And then, we call the wp_enqueue_script function and we pass as a parameter the name of our script that will be added.

To add more scripts to your file, just duplicate these two lines and modify the names, directory and the other parameters.

Step 3: The header.php

First, I'll list here the links to the libraries that you can use on this template, I already uses jQuery and the HTML5 Shim in this template but you can add others.

jQuery – library to add nice effects to your theme, I think you probably already know this library, and it's actually already included in WordPress by default
Modernizr – this library allows you to know exactly the features supported by the user's browser
HTML5 Shim – this library allows browsers that don't have native support for HTML5 markup to start supporting it
Respond.js – allows browsers that don't have native support for CSS3 Media Queries to start supporting it

You can download these libraries and update the paths in your header.php file.

Doctype

In this template we just use the default HTML5 doctype:

<!doctype html>

`<html>` Tag

<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->

In this part, I used a few IE conditionals to add a class according to the IE version or don't add nothing if the browser isn't IE 8 or lower (Firefox, IE9, Chrome and others).

This is really useful because you can create a rule inside your CSS file to affect an object if the browser is IE 7 doing the following:

/* RUNS ON ALL BROWSERS */
#mymenu { 
	width: 400px;
}
/* RUNS ONLY ON IE7 */
.ie7 #mymenu {
	width: 200px;
}

But you can also create a separate CSS file and link it inside the conditionals area, we'll talk about it in the steps below. The choice is yours.

`<meta>` Tags

The meta tags are very important because they pass certain information to the browser to ensure the correct rendering of your theme.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

This line ensures that browsers won't use Quirks Mode, very useful because this render mode can break the layout.

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

This line tells the charset to browser, avoiding unknown characters!

<meta name="description" content="Keywords">
<meta name="author" content="Name">

Just basic meta tags that can help the SEO of your theme. You can add keywords that describe your website and type your name or business' name.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This tag removes/resets any default zoom of a mobile device like iPad and iPhone, very useful if you are working on a responsive layout.

`<link>` Tags

<link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/path/favicon.ico" />

This adds a favicon to your page, giving a more professional touch to your website.

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />

A link to the RSS Feed of your website.

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

A link for the Pingback URL of your site.

`<title>` Tag

<title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?></title>

The title tag is very important because it replaces the default title and is useful to improve your rank in search engines.

`wp_head()`

<?php wp_head(); ?>

This is a very important function, you MUST call this function! Through this function, WordPress adds code from plugins, other JavaScript libraries, and much more.

Conclusion

And it's done! I really hope that you enjoyed this article and please, feel free to comment about the template and give your code snippet to improve it!

HIGHLIGHTS OF THE DAY

The header.php - What Needs to Go in It and What Doesn't

Step 1: Introduction

Step 2: The Final Code

Step 2: The functions.php File

Adding Your CSS

Adding the Scripts

Step 3: The header.php

Doctype

`<html>` Tag

`<meta>` Tags

`<link>` Tags

`<title>` Tag

`wp_head()`

Conclusion

Comments

Related Articles

The header.php - What Needs to Go in It and What Doesn't

Step 1: Introduction

Step 2: The Final Code

Step 2: The functions.php File

Adding Your CSS

Adding the Scripts

Step 3: The header.php

Doctype

<html> Tag

<meta> Tags

<link> Tags

<title> Tag

wp_head()

Conclusion

Comments

Related Articles

`<html>` Tag

`<meta>` Tags

`<link>` Tags

`<title>` Tag

`wp_head()`