Twenty Eleven thumbnail  isn’t displayed?

Twenty Eleven thumbnail by default right after you set up wordpress in your webhosting, is not displayed.

Eventhough the theme support of thumbnail is already in the functions.php file, but you will need to add some code in order to display Twenty Eleven thumbnail by using the set featured image link inside your post.

Some related posts in this blog, that I have made previously;
1. Add thumbnails using custom field
2. WordPress 3 set featured image which uses Twenty Ten theme
3. WordPress clickable thumbnail
4. Category thumbnail wordpress

If you have time and check these tutorials, especially the one which uses Twenty Ten, this time tutorial will be different because I will use Twenty Eleven child theme.

If you don’t use a child theme, I recommend that you at least copy your twenty ten theme, so it won’t loose the changes in the next updates.

Twenty Eleven thumbnail showing set featured image in home page

In this post, I will show how I did add Twenty Eleven thumbnail or display featured image in the wp 3.2.1 default theme, only in the home page.

To me, showing the images in the homepage is enough, and when people click your post, they should see your posts, and when they see your thumbnails again, I find it a bit boring.

Plus, if you use adsense, you will probably want to have adsense on your post page, therefore, having thumbnails there is to me not a good idea.

Of course, if you wish, you will also be able to display your image in post page, but then you will need to add the code to both home page or single post page, or modify functions.php. (related: parse error functions.php)

But I will only display the image in index page today.

Twenty Eleven thumbnail tutorial – How to show Set Featured Image in this default theme

Before we go further, as I mentioned, I am using a child theme, so if you find your file structure will look different than mine, you would know why.

If you like, you can firstly create a simple child theme with this tutorial to create Twenty Eleven child theme, and then follow this tutorial, so you won’t be confused.

My recommendation: Install wordpress offline, try it in localhost first, and then if you are happy with the result, do it in your online blog.

Video tutorial

Steps:

1. Open up the child theme folder, mine called, MyTwentyEleven folder

2. Open up functions.php

3. Add this line of code before the ending of closing PHP:

add_image_size( 'thumbnail-feature', 150, 150);

The “thumbnail-feature” you can replace with yours, but it has to be the same with step no 5 below, Save file.

About the 150 size, it also depends on your taste, you can change it to 100, 90 or anything, but the most important, that is the size of the image that you will upload, so it has exact size of the real image, and not renderred on different size in the browser (considering the blog loading speed, try to optimize your images).

4. Next, we go to the original Twenty Eleven theme folder inside wp-content.

Because we want to only display in home page, so we go to content.php

5. Below <div class=”entry-content”> if you open it with Notepad++ it will be around line 40, we will add this code;

<?php the_post_thumbnail('thumbnail-feature');?>

Also save file.
Screenshot after adding the above code

6. Now you can create a post, upload your image (don’t forget it has a size of 150x150px, this number we got from step 3 above), and click “use it as featured image”, publish the post.

7. Refresh your blog, you should see you image, but without style.

8. To stylize the thumbnails, we can simply add this code in style.css of our child theme:

.attachment-thumbnail-feature{float:left; margin:7px 10px 0 0; border:1px solid #a6a6a6; background:#f0f0f0; padding:2px;}
You can modify the color #xxxxxx to any colors you wish, or style with your own taste.

I hope this Twenty Eleven thumbnail can be a little help.