In this tutorial, let’s talk about the header.php file, an essential file for any WordPress theme. I’ll show you a header file example and give tips about what needs to go in it and what doesn’t.
Introduction
It’s important for you to know what exactly the header.php file should contain in a WordPress theme.
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.
In the course of this article, we’ll create a demo header.php file, and we’ll discuss each and every element in that file.
Remember that the header of your site is the content which is shown on all the pages of your site. For example, the logo and menu are shown on all the pages of your site, and thus, they should be included in the header.php file.
If an element is shown only on a specific page, then you should not include it the header.php file.
The Sample Code
In this section, we’ll build a demo header.php file. In the next section, we’ll go through each and every piece of code to understand what it does.
But before we implement the header, let’s paste the following code at the top of your wp-includes/functions.php file. Remember to modify the paths to your CSS and JavaScript files as needed.
remove_action('wp_head', 'wp_generator');
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_scripts() {
/** REGISTER HTML5 Shim **/
wp_register_script( 'html5-shim', 'https://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', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
Next, let’s have a look at the sample header.php file. You should create this file at wp-content/themes/theme-name/header.php. Of course, you need to adjust the theme-name part with the actual name of your theme.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Keywords">
<meta name="author" content="Name">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/path/favicon.ico" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
<?php //comments_popup_script(); // off by default ?>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<!--=== WP_HEAD() ===-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="rap">
<h1 id="header">
<!-- HERE GOES YOUR HEADER MARKUP, LIKE LOGO, MENU, SOCIAL ICONS AND MORE -->
</h1>
<div id="content">
<!-- end header -->
In general, the header.php file must include several elements, such as:
- doctype
-
<html>tag - meta tags
- head tags
- favicon, RSS, and pingback
- title
- scripts and styles added with the
wp_enqueue_scriptandwp_enqueue_stylefunctions
In the next section, we’ll understand what we’ve implemented so far to build our custom header.php file.
The functions.php File in Detail
Let’s begin with the functions.php file. We’ve added these lines in the file:
remove_action('wp_head', 'wp_generator');
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_scripts() {
/** REGISTER HTML5 Shim **/
wp_register_script( 'html5-shim', 'https://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', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
Remove Meta Generator Tag
The following line removes the meta generator tag because it displays the WordPress version number. It’s not wise to expose your WordPress version number publicly, which could make you vulnerable to version-related attacks. Thus, we’ve removed it.
remove_action('wp_head', 'wp_generator');
Adding Your CSS
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
In this case, we’ve created the enqueue_styles function to add link tags to the header.php file. The official WordPress documentation says that the best way to add stylesheets (.css) and scripts (.js) is with the 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.
Firstly, we created a function called enqueue_styles, and then we’ve called the add_action function, which says to WordPress that it must call our function when the wp_enqueue_scripts hook is triggered, which happens during our call to wp_head() in the header.php file.
Inside our function, we have the following lines:
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' ); wp_enqueue_style( 'screen-style' );
Firstly, we register our CSS and add it to the WordPress queue.
We’ve used the wp_register_style function to register our custom style, and this function has the following arguments:
-
$handle: a name that you can choose—something likemystyle,mediaqueries, etc. -
$src: the file path -
$deps: dependencies, the name of the style files that need to be loaded before this file -
$ver: the asset version -
$media: the media for which this stylesheet will be loaded
And then, we’ve called the wp_enqueue_style function, and we pass the name of our style in the first argument of the wp_enqueue_style function, so it will be added to the queue.
To add more styles, just duplicate these two lines and modify the name, directory, and the other parameters.
Adding the Scripts
Next, we’ll see the function which adds our scripts.
function enqueue_scripts() {
/** REGISTER HTML5 Shim **/
wp_register_script( 'html5-shim', 'https://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', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
In this case too, the process is pretty much the same—the only difference is that we’ve used different functions to add scripts.
To add scripts, we’ve used the wp_register_script and wp_enqueue_script functions. The wp_register_script function requires the following arguments:
-
$handle: a name that you can choose—something like jquery, dojo, etc. -
$src: the file path -
$deps: dependencies, the name of script files that need to be loaded before this file -
$ver: the asset version -
$in_footer: whether to add/enqueue the script before</body>instead of in the<head>
And then, we’ve called the wp_enqueue_script function, and we pass the name of our script in the first argument of the wp_enqueue_script function, so it will be added to the queue.
To add more scripts, just duplicate these two lines and modify the name, directory, and the other parameters.
Understanding the header.php File
The doctype
All pages should begin with the doctype declaration as shown in the following snippet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The <html> Tag
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
This is the root of an html document. It’s also important to note that we’ve used the language_attributes function to add the necessary language attributes for the html tag.
The <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">
The above line ensures that browsers won’t use quirks mode, and it’s very useful because this render mode can break the layout.
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
The above line sets the charset for the browser, avoiding unknown characters!
<meta name="description" content="Keywords"> <meta name="author" content="Name">
In the above snippet, we’ve added a few basic meta tags that can help improve the SEO of your website. 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">
The above tag removes and resets any default zoom of a mobile device like iPad and iPhone, if you are working on a responsive layout.
The<link> Tags
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/path/favicon.ico" />
The above snippet adds a favicon icon 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'); ?>" />
The above snippet adds a link to the RSS feed of your website.
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Finally, you can use the above snippet to add a link to the pingback URL of your site.
The <title> Tag
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
The title tag is very important because it replaces the default title, and it is useful to improve your rank in search engines.
The wp_head() Function
<?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.
The Header Section
Finally, for your common header, which displays the logo and the main menu of your website, you can use the div tag as shown in the following snippet.
<h1 id="header">
<!-- HERE GOES YOUR HEADER MARKUP, LIKE LOGO, MENU, SOCIAL ICONS AND MORE -->
</h1>
Conclusion
So that’s how you can use the header.php file to prepare the common header in your WordPress theme.
This post has been updated with contributions from Sajal Soni. Sajal belongs to India, and he loves to spend time creating websites based on open-source frameworks.