WordPress.org

Ready to get started?Download WordPress

Forums

Different featured header images (3 posts)

  1. Ashleigh100
    Member
    Posted 1 year ago #

    Please help - I am using twenty twelve at the moment and I want to be able to put a different featured image as a header for every page - how do I do this?

  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    create a child theme of Twenty Twelve first; http://codex.wordpress.org/Child_Themes

    you could basically use the code from Twenty Eleven header.php:

    <?php
    				// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( $header_image ) :
    					// Compatibility with versions of WordPress prior to 3.4.
    					if ( function_exists( 'get_custom_header' ) ) {
    						// We need to figure out what the minimum width should be for our featured image.
    						// This result would be the suggested width if the theme were to implement flexible widths.
    						$header_image_width = get_theme_support( 'custom-header', 'width' );
    					} else {
    						$header_image_width = HEADER_IMAGE_WIDTH;
    					}
    					?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    				<?php
    					// The header image
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
    							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
    							$image[1] >= $header_image_width ) :
    						// Houston, we have a new header image!
    						echo get_the_post_thumbnail( $post->ID, 'header-image' ); //EDITED IMAGE SIZE
    					else :
    						// Compatibility with versions of WordPress prior to 3.4.
    						if ( function_exists( 'get_custom_header' ) ) {
    							$header_image_width  = get_custom_header()->width;
    							$header_image_height = get_custom_header()->height;
    						} else {
    							$header_image_width  = HEADER_IMAGE_WIDTH;
    							$header_image_height = HEADER_IMAGE_HEIGHT;
    						}
    						?>
    					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
    				<?php endif; // end check for featured image or standard header ?>
    			</a>
    			<?php endif; // end check for removed header image ?>

    (you could clean the code up if you don't need the compatibility section)

    to replace this code section in Twenty Twelve header.php:

    <?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>

    to match the header image size, create a new post thumbnail size for the header;
    in functions.php of the child theme, add:

    add_image_size('header-image',960,250,true); //for header image

    http://codex.wordpress.org/Function_Reference/add_image_size

  3. Ashleigh100
    Member
    Posted 1 year ago #

    Oh wow - I'm new to this and completely untechnical...I wouldn't know where to begin with this code. I'm sorry I'm probably a nightmare person for all of you with wonderful amounts of skill and knowledge.
    Could anyone talk me through this a bit more? Is altering the code the only way I'm going to be able to do this? If so how do I go about doing this - where do I start?

    I'm sorry, as I say I know I'm a nightmare...

Topic Closed

This topic has been closed to new replies.

About this Topic