Custom Header Images on Pages – Parallax Pro Theme

Here was the original request on SP forums:

I used Sridhar Katakam’s tutorial on relocating entry title headers but I want to make these headers images rather than text. The person who initial responded to my questions said this:

I amended the CSS to display scaling background images to create full width, applying the page-id-xx code in the CSS to define different images for each page.

~ Sam Bell

I am using Featured Image option for pages. So I added following code in functions.php file:

add_image_size( 'header-img', 9999, 250, TRUE ); // Resizing the uploaded image.
add_action('genesis_after_header', 'gd_site_banner', 25);
function gd_site_banner(){  
  if( !is_singular('page') )

  if( has_post_thumbnail() && is_page() ) :
   $ftbanner = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'header-img' );
   $banner = $ftbanner[0];
    echo '<div id="site-banner" class="site-banner">' . "\n";
    echo '<img src="' . $banner . '">' . "\n";
    echo '</div>' . "\n";

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

3 Discussion to This Post

  1. Great tutorials indeed. I was wondering if you could possibly help me with the following customization on Parallax Pro theme!

    With regards to Sridhar Katakam’s tutorial, how can achieve the following results?

    #1: Add Custom Header to Each Page and Post
    #2: Add a custom description below the Heading of the Page/Post. Basically, I would like to achieve the same result as they have done here:


    Note: Sridhar’s snippets impact two things: They affect Parallax Pro’s home page and Blog. But I would like to leave these two part unaffected.

    Looking forward to your advice!



Leave A Reply

Your email address will not be published. Required fields are marked *