How to Display a Post Image Thumbnail using Featured Image option in Twenty Eleven theme?


WordPress Twenty Eleven theme comes with Featured Image option which allows you to tweak the theme and display a Post Image Thumbnail for each post in homepage and other archive pages.

How to Display a Post Image Thumbnail using Featured Image option in Twenty Eleven theme?

Without Post Thumbnail

For this customization, we will be using Twenty Eleven child theme. I am hoping that you already know how to create and use a WordPress child theme. Otherwise you can read and download a simple WordPress child theme from your earlier blog post.

Open the functions.php by going to Dashboard > Appearance > Editor of your child theme, add the following piece of code and save it.

1
<?php add_image_size( 'twentyeleven-thumbnail-feature', 100, 100); ?>

Open content.php file from Twenty Eleven theme (available in wp-content/themes/ folder), add the following piece of code after <div class="entry-content"> and save it. Upload the content.php file to child theme directory.

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

Now if you add a Featured Image for any post, it should display the thumbnail as following:

How to Display a Post Image Thumbnail using Featured Image option in Twenty Eleven theme?

Thumbnail without CSS

Since we have not added any customization for the thumbnail, it’s not properly aligned and placed top of the content. Lets open the style.css of the child theme, add the piece of code and save it.

1
2
3
4
5
6
7
.attachment-twentyeleven-thumbnail-feature { 
    float:left; 
    margin:7px 7px 0 0; 
    border:5px solid #dedede; 
    background:#f0f0f0; 
    padding:2px; 
}
How to Display a Post Image Thumbnail using Featured Image option in Twenty Eleven theme?

Thumbnail with CSS

You will notice that the thumbnail is not clickable, means if you try to click the thumbnail, it is not linked with the blog post. Now we will place a permalink with the thumbnail. So open the content.php file again and replace the code (we placed earlier) with the following code:

1
2
3
<?php if ( has_post_thumbnail()) : ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail('twentyeleven-thumbnail-feature'); ?></a>
<?php endif; ?>

How to Display a Post Image Thumbnail using Featured Image option in Twenty Eleven theme?

Thumbnail linked to Permalink

This time thumbnail is displaying the ALT and Title tag and linked to Permalink.

I believe you have followed the post and successfully added thumbnail to your blog post.

Request for this article came from one of our readers via Ask for Help section. If you want some help, why don’t you leave a comment or ask for professional WordPress help and our team will contact you shortly.

Regards,
Jinnat Ul Hasan

By | On Tuesday, September 6th, 2011 | Under How To's | 9 Comments »


DO YOU NEED OUR HELP?

Contact our experts, most of the time we assist our readers free of charge.

Those who found this page were searching for:

  • wordpress theme blue rocker thumbnail images
  • wp child theme featuer image not show in post
  • get post with thumbnail wordpress
  • display featured image in twenty eleven
  • wordpress post thumbnail twentyeleven
  • twenty eleven how to use featured images
  • wordpress twenty eleven post pictures
  • show posts with featured image
  • wordpress "Twenty Eleven" post thumbnails
  • twentyeleven theme afficher thumnail dans liste artiscles
  • http://www.tennis-artikelen.nl/tennistas.html Tennistas

    Thanks dude!

  • Ethan

    Awesomeness, thank you!

  • Louienator

    Hi,
    I have the same problems with mr. Martin. my thumbnail on my post wont move. I’ve tried everything and even your codes don’t work. I’ve been solving this prob. for hrs. already. Why. I really needed help badly. Coz’ i don’t want to edit the positioning of the image in the wordpress post page, i want on the code so that it’ll be hassle free. Thank you.

  • http://blogs.yegon.sk/yegon/ Martin

    I tried this and have a problem with aligning the image. The image is inserted like this

    the class parameter seems to have ” wp-post-image” added. Could this be the reason why the alignment (float:left) does not work? What should I do?

    • https://plus.google.com/114832683100288461944/ Jinnat Ul Hasan

      Can you provide a specific link as an example?

    • http://blogs.yegon.sk/yegon/ Martin

      i dont know what i did but it works now, thanks

  • danielle

    Hi,
    Thanks for the tutorial. I’ve implemented what you said and activate the child theme but no thumbnails appear. Any idea where I can start looking?

    • https://plus.google.com/114832683100288461944/ Jinnat Ul Hasan

      If you want to show a thumbnail under your Themes options, create a screenshot of your homepage, save as “screenshot.jpg” and place it to your child theme root folder.

      Let me know if you need further assistance.

      • danielle

        Hi, sorry for my late reply, the notification must have ended up in the trash bin.
        Sorry, but that was not what I meant.
        I’ve have meanwhile discovered that it does work with e.g. the archive page but not with the plug-in I’m using. This is the tpg get posts plug-in: http://wordpress.org/extend/plugins/tpg-get-posts/ It shows all your posts of a given category as a list in one page. I would like to show the featured image along with the post introduction. But my featured images don’t show in the list.
        Do you have any idea how I could solve this?
        Thanks in advance for your time and help, danielle

Previous post:

Next post: