WordPress, featured images and headers

Set Featured Image 

 

 

 

 

 

 

 

 

 

I’ve just been working through the excellent:

WordPress 3: Building Child Themes with Morten Rand-Hendriksen

on lynda.com

Morten uses the Twenty Twelve as a parent to develop child themes

I have applied some of his tips to produce a custom header

Here is an overview:

 

A page template ‘notitle-fullpage.php’ has been created so that it loads ‘header-nt.php’

header-nt.php uses a page’s featured image as the header if it has one

so if a page is assigned the template ‘notitle-fullpage’ and has a featured image then this image will be used in the header

 

Here is the code for notitle-fullpage.php

<?php
/*

Template Name: No Title Full Page Template

*/

get_header('nt'); ?>

<div id="primary">
<div id="content" role="main">

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>

</div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

 

The code for header-nt.php

<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7 | IE 8]>
<html <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page">
<header id="masthead" role="banner">
<?php

if ( has_post_thumbnail()) {
echo '<figure class = "featured-image-banner">';
the_post_thumbnail('large');
echo '</figure>';

} else {

// Puts the image header first
$header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif;
} ?>

<hgroup>
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
</hgroup>

<nav id="site-navigation" role="navigation">
<h3><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<div><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

</header><!-- #masthead -->
<p> this is header-nt</p>
<div id="main">

 

Lines 36-41 check to see if the page has a featured image

The featured image is wrapped in the style ‘featured-image-banner’ which can be styled

Leave a Reply