WordPress.org

Ready to get started?Download WordPress

Forums

How to replace header-image with featured-image (5 posts)

  1. tolga9009
    Member
    Posted 1 year ago #

    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 ;)!

  2. orangjul
    Member
    Posted 1 year ago #

    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!

  3. dgrylas
    Member
    Posted 1 year ago #

    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.

  4. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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.

  5. dgrylas
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.