Genesis Entry Title Banner

genesis-entry-title-banner.php

<?php

/**
 * This section of code will remove the entry title header from 
 * the entry itself and place it just below the header with a solid
 * background of a different color to give it a stand out effect.
 */
add_action( 'genesis_after_header', 'gs_do_entry_title' );
function gs_do_entry_title()
{
	$title = new RE_Entry_Title_Banner();
	$html = $title->do_title();
	echo $html;
}

/**
 * Change the entry titles into a full width banner just under the 
 * header.
 * 
 * The title that gets displayed changes depending on the type of "page"
 * being display.  
 * 
 * By default:
 * 
 *   - An archive page for a taxonomy or category will have the category for
 *     the title.
 *
 *   - An author archive will have the authors name.
 *
 *   - Pages and Posts will have the Page or Post title.
 *
 * If you have Advanced Custom Fields with the Entry Title you have much
 * more control over the contents of the entry title.
 * 
 * You can do the following on a Per Post / Page / CPT basis:
 *
 *    - Change the header text to anything you want
 *     
 *    - Add a subheader if you want
 *
 *    - Use an image as the background
 *
 *    - Add a custom CSS wrapper so you can make style changes on a
 *      per post basis, things like changing colors, font size, whatever.
 */
class RE_Entry_Title_Banner
{
	public $modify_entry_title = false;			// Do we want to modify the entry-title?
	public $customize_headlines = false;		// Create customized headlines
	public $headline;							// The headline
	public $subheadline;						// Subhead line if any
	public $use_image = false;					// Do we want to use an image?
	public $image;								// The image url if we are going to use it
	public $css_class = 'entry-title';			// CSS class for the header

	/* 
	 * Set the default title and get ACF values if they are set
	 */
	public function __construct()
	{
		$this->headline = get_the_title();
		$this->get_acf_values();
	}

	/*
	 * Snarf up all ACF fields if they have been set
	 */
	private function get_acf_values()
	{
		// See what entry title we'll be using
		$this->modify_entry_title = get_field( 'modify_entry_title' );
		if ( get_field( 'customize_headlines' ) ) {
			$this->get_acf_headlines();				
		}

		// See if an image has been specified
		$this->get_acf_image();

 		// See if a CSS class has been defined
		$this->get_acf_css_class();

	}

	// If the customize headlines have been set we'll use it
	public function get_acf_headlines() 
	{
		$headline = get_field( 'custom_headline' );
		if ( $headline != '' ) {
			$this->headline = $headline;
		}

		$sub = get_field( 'subheadline' );
		if ( $sub != '' ) {
			$this->subheadline = $sub;
		}
	}

	// Get the image if we are going to be using it
	public function get_acf_image()
	{
		$this->use_image = get_field('use_image');
		if ( $this->use_image ) {
			$this->image = get_field('image');
			if ( $this->image != null ) {
				$this->css_class .= " image";
			}
		}
	}

	/**
	 * Get an additional css class if it has been provided, if
	 * so then set the css_class field.
	 */
	public function get_acf_css_class() 
	{
		$css = get_field( 'css_class' );
		if ( $css !== '' ) {
			$this->css_class .= ' ' . $css;
		}
	}

	/**
	 * Now run through all the logic we need to determine what we'd like 
	 * to use for the entry title.
	 */
	public function do_title() {
  		
  		// Don't do anything unusual
		if ( $this->modify_entry_title === 'nothing' ||
			is_home() ||
			is_front_page() ) {

			return;
		}

		// If we are just removing, we've done our job time to leave
		if ( $this->modify_entry_title == 'remove' ) {
			gs_remove_entry_title();
			return;
		}

	    /* 
  	     * If this is a single post or a page we want to take the 
   	     * title of the post / page for our banner.
   	     *
 	     * If we are viewing a category or archive of some type, we
	     * want to take the title from that archive.
	     *
 	     * I really need to create a unique 404 page.
  	     */
	    if ( $this->customize_headlines ) {

	    	/* 
	    	 * If we are using a customized headline then we don't want to
	    	 * use the following logic.
	    	 */

	    } else if ( is_single() || is_page() ) {

	    	if ( ! is_page_template ( 'grid-archive.php') ) {
	    		gs_remove_entry_title();
	    	}
	    	$this->css_class .= ' single';

	    } else if ( is_author() ) {

	    	$this->headline = get_the_author();
	    	$this->css_class .= ' author';

	    } else if ( is_category() || is_archive() ) {

	    	$this->css_class .= ' archive';

	    	$cats = get_the_category();
	    	$cat = $cats[0];
	    	$this->headline = $cat->name;

	    } else if ( is_search() ) {

	    	$this->css_class .= ' search';
	    	$this->headline = get_search_query();

	    } else if ( is_404() ) {

	    	$this->headline = "Ooops! I don't know what your looking for...";
	    	$this->css_class .= ' c404';
	    } 

	    if ( $this->subheadline !== '' ) {
	    	$subheadline = $this->subheadline;
	    }
	    return $this->toHtml( );
	}

	/**
	 * Generate the entry title banner for this header
	 */
	public function toHtml()
	{

		$html = sprintf( "<header class='%s'>\n", $this->css_class);
		if ( $this->use_image && $this->image !== '' ) {

			$html .= "<div class='image-wrapper'>";
			$html .= "<img class='entry-title-image' src='" . $this->image . "' />";
			$html .= "</div>";
		} 

		if ( $this->headline !== '' ) {

			$html .= "<h1>" . $this->headline . "</h1>";
		}

		if ( $this->subheadline !== null ) {

			$html .= "<h2>" . $this->subheadline . "</h2>";

		} 

		$html .= "\n";
		$html .= "</header>\n";
		return $html;
	}
}

genesis-entry-title-banner.scss

/**
 * This file has all the styling used by the entry-title-banners
 * If you are not using them you can remove this from style.scss
 */
@mixin title-darkener($start-color:#f7f7f7, $howmuch:15%) {
	$end-color: darken( $start-color, $howmuch );
   	@include radial-gradient( $start-color, $end-color );
	border-bottom: 1px solid darken( $start-color, $howmuch / 2 );
}

@mixin title-background($start-color:#f7f7f7, $end-color:#d2d2d2) {
   	@include radial-gradient( $start-color, $end-color );
	border-bottom: 1px solid darken( $end-color, 80% );
}

/**
 * Move the entry title just under the navbar and give it a 
 * cool background color to set it apart.
 */
$banner-background-default: #f7f7f7;
$banner-background-404: #F76C37;
$entry-title-h1-color: darken( $color-first, 15% );
$entry-title-h2-color: #aaa;

/**
 * These are for custom headers
 */
header.entry-title {
	&.c404 {
		background: $banner-background-404;
		@include title-background( #FFC051, $banner-background-404 );
	}

	&.genesis-entry-title {
		@include title-darkener( $color-first );
		h1 {
			color: white;
			text-shadow: 1px 1px 1px #000;
		}
	}

	&.entry-title-image {
		background: white;
		padding: 0 0 0 0;
		max-height: 300px;
		overflow: hidden;
	}
}

/**
 * These stylings are for the defaults
 */
header.entry-title {
	padding: 30px 0;

   	@include title-darkener( $banner-background-default );
	h1 {
		@include wrap;
		color: $entry-title-h1-color;
		font-size: 1.1em;
		margin-bottom: 0;
		text-align: center;
		text-shadow: 1px 1px 1px #aaa;
	}

	h2 {
		@include wrap;
		color: black;
		font-family: $open-sans;
		font-size: .8em;
		margin-top: 20px;
		text-align: center;
	}

	/* 
	 * Use this section of the style sheet to over ride the entry-title image
	 */
	&.image {
		position: relative;
		padding: 0;

		img {
			margin: 0;
			width: 100%;
		}

		h1 {
			color: yellow;
			position: absolute;
			text-align: center;
			top: 20%;
			left: 20%;
			right: auto;
		}
	}
}