wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Twenty Eleven thumbnail or show Set Featured Image in WP 3.2 theme

WordPress themes

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

Last updated on February 18, 2017
Posted on August 29, 2011

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.

eleven image thumbnail twenty twenty eleven

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Add sidebar widgets in Twenty Eleven theme
→ How to Rename Twenty Eleven Home Tab

Comments

  1. yudi batara says

    August 31, 2011 at 3:43 pm

    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,

    • Kimi says

      August 31, 2011 at 5:16 pm

      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:

      https://www.wpvidz.com/install-wordpress-offline-wordpress-on-mac-or-windows/

      https://www.wpvidz.com/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. Steven says

    October 4, 2011 at 11:24 am

    Great! Just what I needed, thank you very much!

  3. Tom says

    June 20, 2012 at 1:37 pm

    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?

  4. Tom says

    June 21, 2012 at 1:20 pm

    Disregard my last comment ๐Ÿ˜€ 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!!

  5. Le Chinh says

    December 2, 2012 at 4:31 pm

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

  6. Boudewijn says

    December 9, 2012 at 5:55 pm

    Wow, this actually works great, instead of most sites considering this subject.

  7. Gabriele says

    December 29, 2012 at 11:56 am

    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?

    • Kimi says

      January 4, 2013 at 4:21 pm

      Hi Gabriele,

      I used Firebug plugin to inspec the html element.

      I hope it helps

      Kimi.

  8. Abinash says

    April 16, 2013 at 9:03 am

    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.

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept