By default, our wordpress themes will pull the file header.php and place it at the top of all of our pages.
This is a basic WordPress template structure:
<?php get_header(); ?>
<div class="container">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>
Now, for my portfolio page – for example – I may want the header to be different. This requires 2 steps:
Create a header-portfolio.php file where the word “portfolio” can be replaced with whatever we want, but the naming structure of “header-{any-name-we-want}.php” must be kept.
Our portfolio header may look a little like this:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class="container">
<h1>Hello, I am the portfolio header</h1>
<p><?php bloginfo('description'); ?></p>
<!-- Navigation Menu -->
<?php
if (has_nav_menu('primary')) {
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'main-navigation',
'menu_class' => 'menu',
'depth' => 2,
));
}
?>
</div>
</header>Site note: In this example, I’m using a menu, which requires adding in the functions.php file. This step is not necessary if the new header doesn’t have a menu.
function register_custom_menus() {
register_nav_menus(
array(
'primary' => __('Primary Menu', 'textdomain'),
)
);
}
add_action('after_setup_theme', 'register_custom_menus');
Now, we must create a page-portfolio.php file where the word “portfolio” can be replaced with whatever we want, but the naming structure “page-{any-name-we-want}.php”. must be kept.
The comment at the top of the page is extremely important and not optional*
<?php /* Template Name: Portfolio Page */ ?>
Here's what the php could look like:
<?php get_header('portfolio'); ?>
<div class="container">
<h1>This is the Portfolio Page</h1>
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>The result should be that now our page will load the custom header (if we select “Portfolio Page” as the template!) . The same rule applies to the footer, where we’d have footer-portfolio.php and <?php get_footer(portfolio); ?> on our code!