Twenty Eleven thumbnail or show Set Featured Image in WP 3.2 theme

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

twenty eleven thumbnail
The line 40-41 for the 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.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page

Comments

  1. says

    Hai Kimi, how ru there?
    It’s very useful tutorial, and I have some questions for you…Now I want to start my new blog, and want to try this tutorial, but I don’t have any skill on css and coding like this. For information, I want to use the “clean” theme from the wordpress directory. It’s one column with simple design. Is it possible to use this technique on it?
    The second, let me know that you have a post or video about how to make automatic read more style, or u can give me a suggestion how to do that.

    Regards,

    • says

      Hi Yudi!

      Welcome to my blog

      I am doing great. thank you very much, I hope you are too :)

      I don’t have skill much either, but I like to try around any coding stuff in local installation of wordpress: here are the quick links of installing wordpress offline, and copy your whole blog offline too:

      http://www.blog.web6.org/install-wordpress-offline-wordpress-on-mac-or-windows/

      http://www.blog.web6.org/copy-live-wordpress-blog-to-computer/

      And then you can install the same new theme you have mentioned above in local wp blog, and look if in fuctions.php it has this line of code:

      add_theme_support( 'post-thumbnails' );

      If it hasn’t, you have to add it to have the thumbnail support, and then you can follow this tutorial.

      Something to remember from my experience, never try something that you are not sure of in your online blog, try it offline first :)

      I hope this helps

      Kimi.

  2. Tom says

    Hi, this has helped me a lot so far- the feature images show up and are 150×150!

    But the last step, the css, I don’t understand where I have to paste the code! I’ve tried under attachements, but nothing happens.

    Can you please help me?

  3. Tom says

    Disregard my last comment :D i figured it out, somehow the old version was still in the webbrowser cache! when I deleted the cache and reloaded everything it worked!

    Thanks!!

  4. Le Chinh says

    Hi Kimi,

    I’m a newbie with the WordPress. I’m doing a blog and using Genesis with Generate child theme. I have seen the video Twenty Eleven thumbnail or show Set Featured Image in WP 3.2 theme on youtube and guide on your blog. However, I can’t do in step 8. Can you help me? Can you let me you use what are the software or program to edit code (minute 7:23 in your video)?

  5. Gabriele says

    Hi Kimi, I followed your instructions but yet cannot succed in styiling the featured image on the main page and in the single posts as well.
    I was wondering: where did you take the class name (.attachment-thumbnail-feature) that you use to style it?

  6. says

    Thanks Kimi for the wonderful tips :) was trying to figure it out by looking at various wordpress forum but your trick came out to be the best one and guess what! It’s started working..

    I am have just added img before the css markup given by you. you can checkout the working thumbnail on my home page > post on Google keep. Rest all are unchanged..as in I will do them afterwards.

    Thanks.