On this tutorial, let’s speak in regards to the header.php file, a vital file for any WordPress theme. I will present you a header file instance and provides tips on what must go in it and what does not.
Introduction
It is vital so that you can know what precisely the header.php file ought to comprise in a WordPress theme.
However, we have now greater than a brand and menu on this file, we even have the head tag and plenty of different tags, like: hyperlink, script, meta and title.
In the midst of this text, we’ll create a demo header.php file, and we’ll attempt to focus on each component in that file.
Keep in mind that the header of your website is the content material which is proven on all of the pages of your website. For instance, the emblem and menu are proven on all of the pages of your website, and thus, they need to be included within the header.php file.
If a component is proven solely on a selected web page, then it’s best to attempt to keep away from together with it the header.php file.
The Pattern Code
On this part, we’ll construct a demo header.php file. Within the subsequent part, we’ll undergo the each piece of code to know what it does.
However earlier than we implement the header, let’s paste the next code on the prime of your wp-includes/features.php file. Keep in mind that you might want to modify the paths to your CSS and JavaScript information as wanted.
remove_action('wp_head', 'wp_generator');
operate enqueue_styles() {
/** REGISTER css/display.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/display.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
operate 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' );
Subsequent, let’s take a look on the pattern header.php file. You need to create this file at wp-content/themes/theme-name/header.php. After all, you might want to regulate the theme-name half with the precise title 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 material-Sort" content material="https://code.tutsplus.com/tutorials/<?php bloginfo("html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Suitable" content material="IE=edge,chrome=1">
<meta title="description" content material="Key phrases">
<meta title="writer" content material="Title">
<meta title="viewport" content material="width=device-width, initial-scale=1, maximum-scale=1">
<title><?php wp_title('«', true, 'proper'); ?> <?php bloginfo('title'); ?></title>
<hyperlink rel="shortcut icon" href="https://code.tutsplus.com/tutorials/<?php echo get_template_directory_uri(); ?>/path/favicon.ico" />
<hyperlink rel="pingback" href="https://code.tutsplus.com/tutorials/<?php bloginfo("pingback_url'); ?>" />
<hyperlink rel="alternate" kind="utility/rss+xml" title="https://code.tutsplus.com/tutorials/<?php bloginfo("title'); ?> RSS2 Feed" href="https://code.tutsplus.com/tutorials/<?php bloginfo("rss2_url'); ?>" />
<?php //comments_popup_script(); // off by default ?>
<type kind="textual content/css" media="display">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</type>
<!--=== WP_HEAD() ===-->
<?php wp_head(); ?>
</head>
<physique <?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 material">
<!-- finish header -->
Generally, the header,php file should embrace a few parts comparable to:
- doctype
-
<html>tag - meta tags
- head tags
- favicon, RSS and pingback
- title
- scripts and kinds added with the
wp_enqueue_scriptandwp_enqueue_stylefeatures
Within the subsequent part, we’ll perceive what we have carried out to date to construct our {custom} header.php file.
The features.php File in Element
Let’s start with the features.php file, we have added these strains within the file:
remove_action('wp_head', 'wp_generator');
operate enqueue_styles() {
/** REGISTER css/display.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/display.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
operate 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' );
Take away Meta Generator Tag
The next line removes the meta generator tag, as a result of It shows the WordPress model quantity. Now, it is not smart to show your WordPress model quantity publicly, which might make you weak to version-related assaults. Thus, we have eliminated it.
remove_action('wp_head', 'wp_generator');
Including Your CSS
operate enqueue_styles() {
/** REGISTER css/display.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/display.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
On this case, we have created the enqueue_styles operate so as to add hyperlink tags to the header.php file. The official WordPress documentation says that one of the best method so as to add stylesheets (.css) and scripts (.js) is with the wp_enqueue_script and wp_enqueue_style features. You possibly can be taught extra about this in our article, Learn how to Embrace JavaScript and CSS in Your WordPress Themes and Plugins.
Firstly, we created a operate referred to as enqueue_styles after which we have referred to as the add_action operate, which says to WordPress that it should name our operate when the wp_enqueue_scripts hook is triggered, which occurs throughout our name to wp_head() within the header.php file!
Inside our operate we have now the next strains:
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/display.css', array(), '1', 'all' ); wp_enqueue_style( 'screen-style' );
Firstly, we register our CSS after which add it to the WordPress queue.
We have used the wp_register_style operate to register our {custom} type, and this operate has the next arguments:
-
$deal with: a reputation you can select, one thing likemystyle,mediaqueriesand so forth. -
$src: the file path -
$deps: dependencies, the title of favor information that should be loaded earlier than this file -
$ver: the asset model -
$media: the media for which this stylesheet will likely be loaded
After which, we have referred to as the wp_enqueue_style operate and we cross the title of our type within the first argument of the wp_enqueue_style operate, so it is going to be added to the queue.
So as to add extra kinds, simply duplicate these two strains and modify the title, listing and the opposite parameters.
Including the Scripts
Subsequent, we’ll see the operate which provides our scripts.
operate 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' );
On this case too, the method is just about the identical, the one distinction is that we have used completely different features so as to add scripts.
So as to add scripts, we have used the wp_register_script and wp_enqueue_script features. The wp_register_script operate requires the next arguments:
-
$deal with: a reputation you can select, one thing like jquery, dojo, and so forth. -
$src: the file path
-
$deps: dependencies, the title of script information that want be loaded earlier than this file -
$ver: the asset model -
$in_footer: whether or not so as to add/enqueue the script earlier than</physique>as an alternative of within the<head>
After which, we have referred to as the wp_enqueue_script operate and we cross the title of our script within the first argument of the wp_enqueue_script operate, so it is going to be added to the queue.
So as to add extra scripts, simply duplicate these two strains and modify the title, listing and the opposite parameters.
Understanding the header.php File
The doctype
All pages ought to start with the doctype declaration as proven within 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(); ?>>
That is the foundation of an html doc. It is also vital to notice that we have used the language_attributes operate so as to add the required language attributes for the html tag.
The <meta> Tags
The meta tags are crucial as a result of they cross sure info to the browser to make sure the right rendering of your theme.
<meta http-equiv="X-UA-Suitable" content material="IE=edge,chrome=1">
The above line ensures that browsers will not use quirks mode, and it’s totally helpful as a result of this render mode can break the structure.
<meta http-equiv="Content material-Sort" content material="https://code.tutsplus.com/tutorials/<?php bloginfo("html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
The above line units the charset for the browser, avoiding unknown characters!
<meta title="description" content material="Key phrases"> <meta title="writer" content material="Title">
Within the above snippet, we have added a number of primary meta tags that may assist enhancing search engine optimisation of your web site. You possibly can add key phrases that describe your web site and kind your title or enterprise title.
<meta title="viewport" content material="width=device-width, initial-scale=1, maximum-scale=1">
The above tag removes and resets any default zoom of a cell machine like iPad and iPhone, if you’re engaged on a responsive structure.
The<hyperlink> Tags
<hyperlink rel="shortcut icon" href="https://code.tutsplus.com/tutorials/<?php echo get_template_directory_uri(); ?>/path/favicon.ico" />
The above snippet provides a favicon icon to your web page, giving a extra skilled contact to your web site.
<hyperlink rel="alternate" kind="utility/rss+xml" title="https://code.tutsplus.com/tutorials/<?php bloginfo("title'); ?> RSS2 Feed" href="https://code.tutsplus.com/tutorials/<?php bloginfo("rss2_url'); ?>" />
The above snippet provides a hyperlink to the RSS feed of your web site.
<hyperlink rel="pingback" href="https://code.tutsplus.com/tutorials/<?php bloginfo("pingback_url'); ?>" />
Lastly, you should use the above snippet so as to add a hyperlink of the pingback URL of your website.
The <title> Tag
<title><?php wp_title('«', true, 'proper'); ?> <?php bloginfo('title'); ?></title>
The title tag is essential as a result of it replaces the default title and it’s helpful to enhance your rank in search engines like google.
The wp_head() Perform
<?php wp_head(); ?>
This can be a crucial operate—you will need to name this operate! By means of this operate, WordPress provides code from plugins, different JavaScript libraries, and rather more.
The Header Part
Lastly, to your frequent header, which shows brand and the principle menu of your web site, you should use the div tag as proven within the following snippet.
<h1 id="header">
<!-- HERE GOES YOUR HEADER MARKUP, LIKE LOGO, MENU, SOCIAL ICONS AND MORE -->
</h1>
Conclusion
In order that’s how you should use the header.php file to organize the frequent header in your WordPress theme.
This submit has been up to date with contributions from Sajal Soni. Sajal belongs to India and he likes to spend time creating web sites primarily based on open supply frameworks.
