diffrent background image for every pages

functions.php

<?php
/* if image in child theme then use 'get_stylesheet_directory_uri'
   otherwise you can use 'get_templatet_directory_uri' */
   
function photoshoot_admin_scripts() {
wp_enqueue_script('custom',get_stylesheet_directory_uri() . '/js/media-uploader.js', array());
}
add_action( 'admin_enqueue_scripts', 'photoshoot_admin_scripts');

/* header image */
/*****  Custom Meta Box - Page *****/
add_action( 'add_meta_boxes', 'meta_box_portfolio' );
function meta_box_portfolio()
{
	add_meta_box( 'meta_box_header_id', 'Enter Portfolio info', 'portfolio_website_info', 'page', 'normal', 'high' );
}

function portfolio_website_info( $post )
{
$values = get_post_custom( $post->ID );
$header_text = isset( $values['header_text'] ) ? esc_attr( $values['header_text'][0] ) : '';
$header_image = isset( $values['header_image'] ) ? esc_attr( $values['header_image'][0] ) : '';
 
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' );
?>

<p>Header Text</p>
<input type="text" name="header_text" value="<?php echo esc_attr( $header_text ); ?>" class="widefat" placeholder="Header Text" />
<p>Header Image</p>
<input id=""  type="text" class=" mytheme_media_url upload" name="header_image" value="<?php echo esc_attr( $header_image ); ?>" placeholder="No file chosen"  />
<?php if(!empty($instance['image'])) { ?>
<img src="<?php echo $instance['image']; ?>"  />
<?php } ?>
<input id="mytheme_image_uploader"  class="button mytheme_media_upload" type="button" value="Upload" />
<?php
}
add_action( 'save_post', 'portfolio_meta_box_save' );
function portfolio_meta_box_save( $post_id )
{
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return;
if( isset( $_POST['header_text'] ) ) update_post_meta( $post_id, 'header_text', esc_attr( $_POST['header_text'] ) );
if( isset( $_POST['header_image'] ) ) update_post_meta( $post_id, 'header_image', esc_attr( $_POST['header_image'] ) );
}
/*** end ***/

/* custom header background */
add_action('wp_head', 'legal_home_bgimg');
function legal_home_bgimg() {
   
	$header_image = get_post_meta( get_the_ID(), 'header_image', true );
	$header_image_default = get_stylesheet_directory_uri()."/images/header-bg.jpg";
	if(!empty($header_image)){
		$header_image_style = "<style> 
									.my-page-header-bg 
										{ 
											background :url('" . $header_image . "');
											height:370px;
											margin-top: -16px; 
										} 
							  </style>";
	} else {
		$header_image_style = "<style> 
									.my-page-header-bg 
										{ 
											background :url('".$header_image_default."');
											height:370px;
											margin-top: -16px; 
										} 
							  </style>"; 
	}
    echo $header_image_style;
}
/* end */
?>

Display

<div class="entry-header my-page-header-bg">
	<div class="container">
    	<?php $header_text = get_post_meta( get_the_ID(), 'header_text', true ); ?>
   		<h1 itemprop="headline" class="entry-title"><?php echo $header_text ?></h1>
    </div>
</div>
Advertisements

Tagged:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: