Genesis Custom Page Header

I like to customize the way some pages look, and that usually means that the default page title isn’t going to cut it.

For example, on my “About” page, I wanted to give it a bit of personality with my photo and a short tagline.

To do this, I needed to remove the title from the page altogether as it didn’t fit the design I had in mind. Now on a Genesis theme, we don’t need custom page templates like you may use on other WordPress themes. Instead we can get a Genesis custom page header with just a few lines of code. This code should be able to:

• Remove the default page header
• Add a new custom page header

Remove the Default Page Header in Genesis

I only needed to remove the page header from one of the pages on my site, so I needed to add a conditional tag that checks to see if we are on the correct page before it does anything.

//* Remove Page Title From About Page
add_action( 'get_header', 'remove_titles_from_pages' );
function remove_titles_from_pages() {
    // check if we are on the page with a slug 'about'
    if ( is_page( array( about ) ) ) {
        // remove the post title from the about page
        remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
        // add an action that will insert a new special header
	add_action( 'genesis_entry_header', 'sd_special_header' );
    }
}

If you wanted to have a similar page layout on every page of your site, you can remove the conditional check, or build upon the array and add other pages to select which pages will get this treatment.

Add a Genesis Custom Page Header

My page header needs to consist of three things:

1. A featured image
2. A “special” title, which is not the page title
3. A tagline

In order to do this, I needed to add a couple custom fields to my page. I named the “special” page title `sd_page_title` and the tagline `sd_page_tagline` in the custom fields for the page.

Finally, this function outputs the new header on the about page:

//* Replace Page Title With Custom Header
function sd_special_header() {
    // check if the page has a featured image
    if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'thumbnail', array( 'class' => 'aligncenter specialfeatured' ) );
    }
    // get special title and tagline from post meta
    $specialtitle = get_post_meta( get_the_ID(), 'sd_page_title', true );
    $specialtag = get_post_meta( get_the_ID(), 'sd_page_tagline', true );
    // display title and tagline
    echo '<h1 class="page-title">' . $specialtitle . '</h1>';
    echo '<p class="page-tagline">' . $specialtag . '</p>';
}

While this looked OK, everything was still aligned to the left like the default page title so I needed to add some styling to center everything and add some personality to the header area.

/* Make the featured image a circle instead of a square.
Featured image is already center aligned from class aligncenter. */
img.specialfeatured{
    border-radius: 50%;
}
/* center the page title */
.page-title {
    text-align: center;
}
/* center the tagline, color and italicize */
.page-tagline {
    text-align: center;
    color: #4CA1AF;
    font-style: italic;
}