Advertisement
Theme Development

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

by

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!

Related Posts
  • Code
    Theme Development
    How to Pass PHP Data and Strings to JavaScript in WordPressPhp js 400
    It's good practice to put all your data in static strings in your PHP files. If you need to use some data in JavaScript later on, it's also good practice to put your data as data-* attributes in your HTML. But in some certain scenarios, you have no choice but to pass strings directly to your JavaScript code. If you are including a JavaScript library, and you've found yourself initializing a JavaScript object inside your header.php then assigning data to its properties, then this article is for you. This article will teach you on how to properly pass PHP data and static strings to your JavaScript library.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Setting Up the HeaderCreating wordpress theme from html 400
    So far in this series, you've learned how to create a basic theme from static HTML. You've done the following: Prepared your markup for WordPress Converted your HTML to PHP and split your file into template files Edited the stylesheet and uploaded your theme to WordPress Added a loop to your index file In this tutorial, you'll work on the header.php file that you created in Part 2.Read More…
  • Code
    Plugins
    Using HighCharts in WP-AdminHighcharts 400
    Charts are a great way to present data. They make data more digestible by making it visually appealing. In WordPress, there is no built-in method for getting posts and pages data in a graphical form. Although, there are certain plugins available which integrate Google Analytics with WordPress, but they are overkill if you want to get only a portion of that data. Also, nothing should keep you from learning new techniques and to dive straight into the subject is the best way to learn.Read More…
  • Code
    Theme Development
    How to Integrate Bootstrap Navbar Into WordPress ThemeBootstrapd 400
    Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and you already know about Bootstrap and use it in mock-ups for development. This raises the question: "How can you integrate Bootstrap components into a WordPress theme?"Read More…
  • Code
    Cheat Sheets
    The Complete Guide to Proper JavaScript Usage With WordPressJavascript 400
    I remember thinking "What the heck do we need JavaScript for, when we have Flash?" when I was fourteen. Although I still remember how I enjoyed coding stuff with ActionScript 2.0 back then, I saw how much one can achieve with JavaScript and fell in love with it. I'm not an expert on JavaScript (yet) but I can say I'm over and done with Flash for a long time. When it comes to WordPress, the biggest blogging platform and content management system worldwide, JavaScript is - of course - very useful for many things: content sliders, lightbox galleries, slick shopping carts, UI elements like tabs or accordions... you name it. But how exactly should we use JavaScript with WordPress? Returning or echoing a bunch of HTML script elements is one way to do it - and it's wrong. In this tutorial, we're going to see how to enqueue JavaScript files inside our pages and how to pass translatable data to the JavaScript code.Read More…