Genesis Entry Title Banner
/**
* 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;
}
}
}
<?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;
}
}