Create Different Header for Different Pages in WordPress

I am Creating a series of Post about How to Develop your Own WordPress Theme and this article is also part of that.Sometimes You wants different header for your WordPress Page(e.g Archive/Author/Custom Page),so in this post I will tell you How to use Different Header on Different Pages of WordPress.

Use Different Header For Different Pages

Now,Lets come to the point of creating different headers.You have just follow some simple steps.

Step 1: Create a header-{slug}.php file.
You must replace the {slug} with a custom name.Below code must be on your header-{slug}.php file.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
    </head>
    

    <!--Your Custom Header Content Starts Here -->


You can add your custom Header contents on the header-{slug}.php file after<head/>.
I have already talked about how to create custom Archive page and Custom post types.
So if you want to include your custom header in your custom archive page,then add the following code on your archive-{slug}.php file.

<?php

get_header('{slug}');

?>

So your Custom Archive page archive-{slug}.php file will looks like:

<?php
/*
Template Name: Custom Post type Archive
Description: MyCodingTricks tutorial for creating own Archive page for custom post type
*/
?>
<?php get_header("{slug}"); ?>
  
    <div id="main-content" class="main-content">
  
    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">
  
            <header class="archive-header">
                <h1 class="archive-title">
                    <?php post_type_archive_title(); ?>
                </h1>
            </header><!-- .archive-header -->
              
                          
        </div><!-- #content -->
    </div><!-- #primary -->
</div><!-- #main-content -->
  
<?php
get_sidebar();
get_footer();
?>

As we have talked about the process of Creating Different Header,so Now, Lets come to an Example.
In the Below example i am creating a Header for About Me Page.You should notice that My About Me page slug is about-me,so i am creating a header-about-me.php file and its content will look like:

<!DOCTYPE html>
<!doctype html>
	<!--[if !IE]>
	<html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 7 ]>
	<html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 8 ]>
	<html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 9 ]>
	<html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
	<!--[if gt IE 9]><!-->
<html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

<title><?php wp_title(); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<!--[if IE]><?php if ( of_get_option( 'custom_favicon' ) ) { ?><link rel="shortcut icon" href="<?php echo of_get_option( 'custom_favicon' ); ?>" /><?php } ?><![endif]-->

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<div id="about-page" class="hfeed site">

	<div id="content" class="site-content">
		<div class="container main-content-area">
			<div class="row">
				<div class="main-content-inner">

And now i have to edit my page.php file to include the custom header.And it will look like:

<?php
if(is_page('about-me')){
get_header("about-me");
}else{
get_header();
}
 ?>
 <!-- My About me Content Goes here -->

You will notice that i had used a condition tag if(is_page('about-me')){ and i had used about-me name in this because my About me page slug is about-me.
Since, i had used about-me at get_header("about-me"); so WordPress will search for header-about-me.php.

[moptin id="3098"]

Do You have any Question? (Related to this Article) Ask me in the Comment section or in the WordPress Forum.Do you have any better Idea? Please share with us.

P.S => If you like this tutorial then please Share it with your friends because Sharing is Caring.

Resources

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *