WordPress.org

Support

Support » How-To and Troubleshooting » How to replace header-image with featured-image

How to replace header-image with featured-image

  • Hi,

    I have ported the header-image function of twentyeleven for those, who wish to replace the header-image by the featured image (when it’s set) on a singular page.

    1. Create a childtheme based on twentytwelve
    2. Copy over header.php and replace the following (you might have some additional anchor markup, which I removed)

    <?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; ?>

    with

    <?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) : ?>
    	<?php
    	if ( is_singular() && has_post_thumbnail( $post->ID ) ) :
    		echo get_the_post_thumbnail( $post->ID, 'full', 'class=header-image' );
    	else : ?>
    	<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="" />
    	<?php endif; ?>
    <?php endif; ?>

    3. Copy over content.php and the replace the following (line 18)
    <?php the_post_thumbnail(); ?>
    with

    <?php if ( is_home() ) : ?>
    	<?php the_post_thumbnail(); ?>
    <?php endif; ?>

    The outcome:
    http://s7.directupload.net/images/user/121028/temp/vrmnzh2a.jpg

    http://s14.directupload.net/images/user/121028/temp/ogfb6b7e.jpg

    Info on Step 2: I’ve removed the additional image-size checks of twentyeleven. But they can be easily added.

    Step 3 will avoid multiple header-images on singular pages. On the home page, it will show the featured image as a thumbnail.

    For some reason, class=”wp-post-image” (besides “header-image”) is also applied to the header. Usually, it doesn’t hurt. But still, are there any workarounds?

    Please feel free to improve / minimize / optimize the code!

    Have fun ;)!

Viewing 4 replies - 1 through 4 (of 4 total)
  • orangjul

    @orangjul

    Thank you, I was looking for this info a couple weeks ago and trying to write the code on my own and couldn’t quite manage it or find anything. This helped me!

    I tried this and then my child theme would not load.
    Had to remove the function.php and content.php in my child theme to get it back.

    Michael

    @alchymyth

    Forum Moderator

    Had to remove the function.php and content.php in my child theme to get it back.

    weird, as both templates are not involved in the above described customisation…

    is your problem solved?

    if not, please start your own topic.

    It was probably operator error.
    I’ll try again and let you know.
    Thanks for the reply

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to replace header-image with featured-image’ is closed to new replies.
Skip to toolbar