Skip to content

Instantly share code, notes, and snippets.

@thatwebguy
Last active March 3, 2017 17:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save thatwebguy/8335405 to your computer and use it in GitHub Desktop.
Save thatwebguy/8335405 to your computer and use it in GitHub Desktop.
Change the banner custom background in Beautiful Pro Wordpress theme to use featured image
<?php
// Adding option to use featured image (if it exists)
// in place of background image
remove_action( 'genesis_after_header', 'beautiful_site_header_banner'); // removes existing banner image
add_image_size( 'featured-banner', 2000, 200, TRUE ); // creates a featured image size for the banner
function amcs_featured_img() {
if ( has_post_thumbnail() ) { // checks post has thumbnail
// gets URL for that image
$background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'featured-banner' );
if (is_array($background)) {
// thanks to @magicroundabout for the fix
// echo the output
echo '<div class="featured-header-banner" style="background: url(' ;
echo $background[0];
echo ') no-repeat scroll center center #FFFFFF"></div>';
}}
else { // if no featured image, adds class to use existing banner
echo '<div class="site-header-banner"></div>';
}}
add_action( 'genesis_after_header', 'amcs_featured_img' );
@thatwebguy
Copy link
Author

Updated 15/01/14 to add featured image as a background image, which replicates existing responsive behaviour. Requires .beautiful .featured-header-image {height:200px;} in style.css

@melindahelt
Copy link

Thanks for this! But I found that I had to use

.beautiful .featured-header-banner {
height:200px;
}

for the style.css (banner instead of image). Otherwise this worked great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment