Let’s say you wanted to do a page-specific background image on the site header. You’ve created a backend metabox for users to upload and manage the page-specific background image, and this stores it using the ‘be_page_header’ post meta key. But how do you display it on the website?
The snippet below shows how to filter the <header class="site-header"> element, updating it to have a style parameter defining the background image and adding a ‘has-image’ class so you can style these headers differently.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Site Header Background | |
| * | |
| * @author Bill Erickson | |
| * @link http://www.billerickson.net/code/background-image-site-header/ | |
| */ | |
| function be_site_header_background( $attributes ) { | |
| $image = false; | |
| if( is_page() ) | |
| $image = get_post_meta( get_the_ID(), 'be_page_header', true ); | |
| if( ! $image ) | |
| return $output; | |
| $image = wp_get_attachment_image_src( $image, 'full' ); | |
| $attributes['class'] .= ' has-image'; | |
| $attributes['style'] = 'background-image: url(' . $image[0] . ');'; | |
| return $attributes; | |
| } | |
| add_filter( 'genesis_attr_site-header', 'be_site_header_background' ); |
