Creating custom header wordpress theme will enrich your WordPress theme’s look and feel. In the previous article, we set up our WordPress theme development environment, Now in this article, we are going one step ahead to create a custom header in WordPress theme. Here we will work with Header Image, Menus and other parts of WordPress theme header in order to customize our WordPress theme.
After the installation of your theme that you have created in the previous article on top of underscores starter theme, open your WordPress site in a browser. You should see the broken site with no styling, When you complete this article you will see your WordPress theme’s header part is fully customized as shown in below video,
Files used in Creating custom header wordpress theme:
In the customization of WordPress theme header, we are going to use several files listed below,
- header.php
- functions.php
- custom-header.php
- navigation.js
- customizer.js
- style.css
Before creating a custom header in WordPress theme Let me first explain what each file do. Above is the list of files which we are going to use in this article.
1. header.php:
header.php is used to show the main header of WordPress theme. This file contains the code for displaying header image, Site title, Site tagline and menus.
2. functions.php:
This file contains your theme’s definition and functions, functions.php acts like a plugin. This file is used to change the default behaviour of WordPress, Here you can define your own functions. For more information, please visit WordPress codex link Functions File Explained.
3. custom-header.php :
custom-header was introduced in version 2.1 in order to add the theme header image in the top section of WordPress.In this file, you can set the default header text colour and default header image, with some extra functionality, visit WordPress codexcustom headerfor more information.
4. navigation.js:
This file takes care of navigation control of menus and hiding showing the menus depending upon screen size.
5. customizer.js:
When you customise theme from the backend, all the asynchronous changes handle by this file.
6. style.css:
This file contains the styles for our WordPress theme.
Creating custom header wordpress:
Open header.php file you should see the following code, now let me directly jump to the important part where we are going to work, on line number 27 (in below code) you see the header tag.
In this article, we will work in header tag only.
1. Header.php:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package My_Theme
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'my-theme' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'my-theme' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="content" class="site-content">
Explanation:
Header tag starts with site-header class.The header tag is divided into two tags, DIV tag having classsite-branding and nav tag having class as main-navigation, Div tag contains a code which takes care of displaying Blog Name and Tag Line and Nav tag contains a code which is responsible for displaying menus.
Let’s see functions used in above code,
1. if( is_front_page() && is_home() ) :This condition checks the current page is homepage or any other page If the current page is homepage then use H1to show the blog name else uses P tag to show the blog name.
2.esc_url( home_url( '/' ) ): This function is used to fetch site URL.
3.get_bloginfo( 'description', 'display' ): Gives the description of the Site or in more simple words Site Tagline.
4.wp_nav_menu(): This function displays a navigation menu, for more information visit this link.
Now below is the screenshot of the header of our WordPress theme, in order to match the below Design we need to do some modification in header.php as well as in style.css along with some Javascript.
In order to minimize the CSS work, I am using herebootstrap,to show the icons I always prefer font-awesomeAnd lastly instead of writing plain javascript I am going to use Jquery.
Adding bootstrap.min.css, font-awesome.min.css and Jquery.min.js to WordPress site:
First, download both the CSS files (i.e bootstrap.min.css and font-awesome.min.css) and place wherever you want but inside your theme folder. I personally like to use layout folder to store CSS files. While including Jquery make sure you are including it before rest of the javascript files which use jquery.
Now in functions.php find a function named as,your_themename_scripts() Inside that function you have to write below lines.
functions.php:
// including bootstrap.min.css
wp_enqueue_style('bootstrap.min', get_template_directory_uri() . '/layouts/bootstrap.min.css');
// including font-awesome.min.css
wp_enqueue_style('font-awesome.min', get_template_directory_uri() . '/layouts/font-awesome.min.css');
// including jquery.
wp_enqueue_script( 'jquery.min', get_template_directory_uri() . '/js/jquery.min.js');
//rest of the javascript files
----
----
----
In the above code, the wp_enqueue_style() function will ensure that all the library files are included only once.
Working with Header images:
In order to work with header images, make sure you have specified a proper width of header image in the custom-header.php file.
To do that find function called,my_theme_custom_header_setup() In this function, you can specify the height width and default image of the custom header.
So keep the width according to your Theme design, I will keep it as 1000.
Now let’s create a custom header in WordPresss theme. So to do that open header.php file and delete the code inside header tag, paste the below code.
The below code will put the custom header image as a background to our header. The site title is aligned to the left side and Navigation menus are aligned to the right side. And our theme’s tagline is placed in the center of the header.
header.php:
<!-- Header Image -->
<?php
if ( get_header_image() == '' ) : ?>
<div class="site-branding">
<?php else : ?>
<div class="site-branding" style="background:url(<?php header_image(); ?>) center / cover;">
<?php
endif;
?>
<div id="title-navigation" class="row title-navigation container">
<!-- Site title -->
<div class="site-title-box col-md-4">
<p class="site-title">
<?php
if ( is_front_page() && is_home() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<?php else : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<?php
endif;
?>
<i class="fa fa-bars menu-toggle" aria-controls="primary-menu" id="menu-toggle" aria-expanded="false"></i>
</p>
</div>
<!-- Navigation Menu -->
<div class="col-md-8">
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
<!-- Site tag line -->
<?php
if ( get_header_image() == '' ) : ?>
<div class="site-branding-inner" style="padding-top: 0rem;padding-bottom: 0rem;">
<?php else : ?>
<div class="site-branding-inner" style="padding-top: 20rem;padding-bottom: 6rem;">
<?php
endif;
?>
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif;
?>
</div><!-- .site-branding -->
Now we have to give style to all these Elements in style.css file. Open the style.css file and you will find Table of content. Please don’t edit the CSS under Normalize section until and unless you know what you are doing. Now create aHeader section just above the Navigation section and paste the below code,
style.css:
.header-image img{
display: block;
margin: 0 auto;
}
.header-background-image {
background: no-repeat center;
background-size: cover!important;
-moz-background-size: cover!important;
-webkit-background-size: cover!important;
}
.header-background-image .title-box {
background: #333;
background: hsla(0, 0%, 0%, .7);
}
.site-branding {
background: #ff6347;
width: 100%;
}
.title-navigation{
width: 100%;
background:transparent;
z-index: 9999;
padding: 10px;
}
.site-title {
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
line-height: normal;
text-decoration: none;
color: #fff;
text-align: center;
}
.site-description {
font-weight: 100;
font-size: 30px;
}
.site-title a:visited,
.site-title a:hover{
text-decoration: none;
color: #fff;
}
.site-description {
color: #fff;
text-align: center;
}
/* Header responsive */@media screen and (max-width: 600px) {
.site-branding { padding: 0; }
.title-box {
max-width: 100%;
margin: 0;
padding: 4rem;
border: none;
}
}
Working with Header Menus:
By usingwp_nav_menu() we get the Menus as I have explained earlier.Now all we have to do is apply some CSS to our menus.
To give styles to menus findNavigation section, Inside Navigation section, find subsection called as Menus. Now delete all the styles which are starting from .main-navigation and paste the below code in order to match my design. But if you want to it by yourself, you can go ahead to write some styles.
style.css:
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/.main-navigation {
position: relative;
float: right;
display: block;
clear: both;
text-transform: uppercase;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
padding: 0em 0.5em;
float: left;
position: relative;
}
.main-navigation a {
display: block;
font-size: 13px;
text-decoration: none;
line-height: 1em;
padding: 1em 0em;
color: white;
color: hsl(0, 0%, 100%);
}
.main-navigation ul ul {
position: absolute;
left: 0;
z-index: 99999;
display: none;
float: left;
padding: 5px;
margin: -5px 0 0 0px;
background: rgba(0, 0, 0, 0.47);
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
width: 150px;
}
.main-navigation ul ul li a{
padding: 0.5rem;
}
.main-navigation li:hover > a {
color: #fff;
text-decoration: none;
}
.main-navigation a::before{
background: #fff;
height: 2px;
content:"";
opacity: 0;
position: absolute;
left: 5px;
right: 5px;
height: 2px;
bottom: 5%;
-moz-transition: all .2s;
-o-transition: all .2s;
-webkit-transition: all .2s;
transition: all .2s;
background: #fff;
box-sizing: border-box;
}
.main-navigation a:hover::before{
opacity: 1;
}
.main-navigation ul ul a:hover{
border:0px;
color: #404040;
background: #fff;
}
.main-navigation ul ul a:hover {
color: #404040;
}
.main-navigation ul ul a:hover::before{
opacity: 0;
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation .current_page_parent .current_page_item > a{
background: #fff;
color: #404040;
}
/* Small menu. */#menu-toggle{
display: none;
}
.main-navigation.toggled ul {
display: none;
}
@media screen and (max-width: 991px) {
.site-title-box{
width: 100%;
}
.main-navigation {
float: left;
width: 100%;
}
#primary-menu{
display: none;
z-index: 999;
position: absolute;
width: 100%;
}
.menu-toggle i{
font-size: 40px;
}
#menu-toggle{
display: block;
}
.menu-toggle {
display: block;
float: right;
padding: 0 1em;
font-weight: normal;
text-decoration: none;
color: white;
cursor: pointer;
background: transparent
}
.main-navigation.toggled .nav-menu {
border-top: 1px solid;
border-top-color: #fff;
}
.main-navigation ul {
padding-left: 0;
background: #000;
z-index: 999;
}
.main-navigation a {
color: #fff;
}
.main-navigation a:hover::before{
opacity: 0;
}
.main-navigation li {
float: none;
}
.main-navigation ul {
padding: 1em 1em;
}
.main-navigation ul ul{
padding-left: 1em;
}
.main-navigation li a{
padding: 0.5em 0.5em;
}
.main-navigation ul ul,
.main-navigation ul ul ul {
position: relative;
top: inherit;
left: 0;
display: block;
float: none;
background: rgba(0, 0, 0, 0.40);
}
.main-navigation ul a:hover{
border:0px;
color: #404040;
background: #fff;
}
.main-navigation ul ul a { width: 100%; }
.main-navigation .current_page_ancestor { background: inherit; }
.main-navigation .current_page_parent .current_page_item > a {
color: #000000;
background: #fff;
}
.title-navigation{
padding: 20px;
background-attachment: inherit;
position: inherit;
width: 100%;
}
}
Accessing menus on smaller screens:
Now we have completed our CSS parts of the header, Now let’s add some jquery in order to access our menus on the smaller screen. Open navigation.js which is located inside /js folder of your theme and delete the entire code and paste the below code.
The below code is used to show and hide the menus on the smaller screens.
navigation.js:
( function($) {
$(window).resize(checkWidth);
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 991) {
$("#primary-menu").show();
}else{
$("#primary-menu").hide();
}
}
$("#menu-toggle").click(function(){
$("#primary-menu").slideToggle();
});
} )(jQuery);
Managing customization from back-end customizer:
Till now we worked on front end customization, What if a user tries to customize your site from theme customizer, Well for that you can write some code to manage back-end customization. In order to do that opencustomizer.js, which is located in /js folder.
Find this line,wp.customize( 'header_textcolor', function( value ) { in customizer.js and replace that block of code with below code.
customizer.js:
// Header text color.
wp.customize( 'header_textcolor', function( value ) {
value.bind( function( to ) {
if ( 'blank' === to ) {
$( '.site-title a, .site-description' ).css( {
'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
} else {
$( '.site-title a, .site-description' ).css( {
'clip': 'auto',
'position': 'relative'
} );
$( '.site-title a, .site-description' ).css( {
'color': to
} );
}
} );
} );
I hope everyone could able to build the Custom header in WordPress Theme without any hurdles. If you have any queries or suggestions, please do let me know in the comment section below.
great man thanx alot
😀