WordPress twenty seventeen different header images in different pages

spam blockers

Came across the challenge of having to customise the WordPress Twentyseventeen theme to cater for header images that match content of specific pages, let’s say, for example that one has a WP site with portraits of different animals in various pages of the site, whilst twenty seventeen theme allows you to upload a serie of header images that can be randomly rotated on the pages as the are loaded by the end user it does not specifically allow to have the same system dedicated to each pages. The following example remedies this.

After digging a bit and following some other posts on the web, here are the steps required to enable this feat.

Note that you must be able to edit the PHP files and thus be proficient in editing PHP and be familiar with WP inner workings…

First edit the wp-content/themes/twentyseventeen/header.php

(make a backup first!):

...

<div id="page" class="site">
 <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

<header id="masthead" class="site-header" role="banner">

<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

 <?php if ( has_nav_menu( 'top' ) ) : ?>
 <div class="navigation-top">
 <div class="wrap">
 <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
 </div><!-- .wrap -->
 </div><!-- .navigation-top -->
 <?php endif; ?>
</header><!-- #masthead -->

...

Remove or comment out the orange line and replace with the following code.

...

<div id="page" class="site">
 <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

<header id="masthead" class="site-header" role="banner">

<?php
// start simply copy header-image.php to header-dog.php and mod the file accordingly
if(is_page("dog-paintings-and-dog-portraits")) {

get_template_part( 'template-parts/header/header', 'dog' );

}
else{

get_template_part( 'template-parts/header/header', 'image' );

}
// end mod
 ?>

<?php if ( has_nav_menu( 'top' ) ) : ?>
 <div class="navigation-top">
 <div class="wrap">
 <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
 </div><!-- .wrap -->
 </div><!-- .navigation-top -->
 <?php endif; ?>

...

in the example above the page is called

dog-paintings-and-dog-portraits

The header file called is called header-dog.php under the wp-content/themes/twentyseventeen/template-parts/header/ folder (which is a copy of the header-image.php and edited to deal with the other images)

if there are more than one page, simply add more conditionals ifs for each individual pages and copy header-image.php to match like above.

More to come as I write the code…