How to fix WordPress Twenty Eleven Featured Image

I like the Twenty Eleven theme and I still haven’t upgraded it. Luckily, some people are keeping it up to date and compatible with the latest WordPress in 2015! But there was one bug that bothered me for a long time and that was featured images were broken. These are the big header images at the top of posts (for example, the big image at the top of this post, or the grid of cars image at the top of one of my other posts). These image are just broken and will not display your custom featured image in the stock Twenty Eleven. So here’s how I fixed it…

diff --git a/wp-content/themes/twentyeleven/header.php b/wp-content/themes/twentyeleven/header.php
index f48e4cf..a9aca8a 100644
--- a/wp-content/themes/twentyeleven/header.php
+++ b/wp-content/themes/twentyeleven/header.php
@@ -86,8 +86,10 @@
                                                 * This result would be the suggested width if the theme were to implement flexible widths.
                                                 */
                                                $header_image_width = get_theme_support( 'custom-header', 'width' );
+                                               $header_image_height= get_theme_support( 'custom-header', 'height' );
                                        } else {
                                                $header_image_width = HEADER_IMAGE_WIDTH;
+                                               $header_image_height = HEADER_IMAGE_HEIGHT;
                                        }
                                        ?>
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
@@ -97,10 +99,11 @@
                                         * 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 ) :
+                                                       ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) )
+                                                       ) :
                                                // Houston, we have a new header image!
                                                echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
+                                               echo "<!-- here1 -->";
                                        else :
                                                // Compatibility with versions of WordPress prior to 3.4.
                                                if ( function_exists( 'get_custom_header' ) ) {
@@ -110,6 +113,7 @@
                                                        $header_image_width  = HEADER_IMAGE_WIDTH;
                                                        $header_image_height = HEADER_IMAGE_HEIGHT;
                                                }
+                                               echo "<!-- here2 -->";
                                                ?>
                                        <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
                                <?php endif; // end check for featured image or standard header ?>

diff --git a/wp-content/themes/twentyeleven/header.php b/wp-content/themes/twentyeleven/header.php

index f48e4cf..a9aca8a 100644

--- a/wp-content/themes/twentyeleven/header.php

+++ b/wp-content/themes/twentyeleven/header.php

@@ -86,8 +86,10 @@

* This result would be the suggested width if the theme were to implement flexible widths.

$header_image_width = get_theme_support( 'custom-header', 'width' );

+ $header_image_height= get_theme_support( 'custom-header', 'height' );

} else {

$header_image_width = HEADER_IMAGE_WIDTH;

+ $header_image_height = HEADER_IMAGE_HEIGHT;

}

@@ -97,10 +99,11 @@

* 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 ) :

+ ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) )

+ ) :

// Houston, we have a new header image!

echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );

+ echo "";

else :

// Compatibility with versions of WordPress prior to 3.4.

if ( function_exists( 'get_custom_header' ) ) {

@@ -110,6 +113,7 @@

$header_image_width = HEADER_IMAGE_WIDTH;

$header_image_height = HEADER_IMAGE_HEIGHT;

}

+ echo "";

<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />

<?php endif; // end check for featured image or standard header ?>

The only thing I really did here was remove the && $image[1] >= $header_image_width condition which was preventing the feature image from displaying. Ignore the other diffs, I must have committed that stuff by accident while playing around. :)

Hope this helps! Good luck!

Comment Cancel reply