• How to Automatically Generate Thumbnail on Homepage in Thesis Theme ?

    December 24th, 2010    by Thesis Customization Service

    by Thesis Customization Service on December 24, 2010

    Thesis Theme for wordpress blogs has been outstanding for its SEO, Speed, and styling options. If you are using a lower version of Thesis, then we recommend you to get the latest version of your Thesis Theme or you can also do that yourself, referring to our article on How to Upgrade to Thesis 1.8.

    In this article, we will tell you about, how to automatically show thumbnail on homepage of your blog using thesis theme. Adding a thumbnail with your posts makes your blog page fascinating and more interesting to the readers. It also increases the CTR rate or hits for your blog posts.

    For less manual work for the bloggers, in order to generate a thumbnail, we use a plugin called Thumbnail for Excerpts. It pulls the very first image from your post and resizes the image without any extra work.


    Below is a tutorial to automatically add a thumbnail on homepage in Thesis Theme:

    • Login to WordPress Dashboard admin of your desired Blog and navigate to Plugins > Add New.


    • Search for the Plugin name “Thumbnail for Excerpts” and click to install and activate.
    • Once the plugin is installed and activated, navigate to Dashboard > Settings > Thumbs Excerpts.
    • Configure the basic options for the thumbnail, like Size, Alignment, Default image, etc…


    • Once we are done with the customization, click on the “Save Changes” button down under, to save all the configurations.
    • We are almost done, with the installation of our Thumbnail on homepage. If we want to style our thumbnail image, just to add an effect follow the procedure below.

    Make sure you backup the Custom.css file using FTP before modifying it. So, that you can easily revert back, when in uncertainty happens.

    • In dashboard admin Navigate to Dashboard > Thesis > Custom File Editor.
    • In the custom file editor, by default it edits custom.css file. But if you are unsure, choose custom.css from the drop down and hit edit selected file button.
    • Add the below code snippet in to the custom.css file. (Refer the Screenshot Below)
       1: /* Teaser Thumbnail Image Styling */

       2: .custom .teaser img {

       3: /* Add Frame to the thumbnail Image, use "border:none;" to disable border. */

       4: border:5px solid #F2F2F2;

       5: /* Specify the width of the Thumbnail Image. */

       6: width:120px;

       7: /* Specify the height of the Thumbnail Image*/

       8: height:120px;

       9: /* Adds margin space to the thumbnail Image. */

      10: margin:2px 10px 0 0;

      11: }


    • Revise the code once again so that it doesn’t break the layout and now hit save button. Refresh the homepage to see the effect.

    I hope this tutorial will help you to customize and spice up your Thesis Theme. If you need help with any particular thesis theme customization tutorial, do request one via Contact form.

    Subscribe to receive Free Thesis Customization Tips

    • We will send you latest Thesis Theme customization tips, hacks and tutorials to make most out of Theiss Theme.
    • You will also be receiving latest Thesis theme news, Thesis skins release, Thesis theme upgrade notices.


    { read them below or add one }

    Siva December 24, 2010 at 12:54 pm

    Does this slow down Homepage ?


    Thesis Customization Service December 24, 2010 at 12:56 pm

    Hey Siva
    More images means more loading time.. Though thumbnail on homepage increases CTR.
    So it’s your choice if you wish to compromise with speed for better presentation.


    Amandeep Singh December 29, 2010 at 3:50 am

    Hi Harsh,

    I am using the below code on my blog to stylize the thumbnails but the changes are not getting reflected. Can you please help me out?

    /* Teaser Thumbnail Image Styling */
    .custom .teaser img {
    /* Add Frame to the thumbnail Image, use “border:none;” to disable border. */
    border:5px solid #D1D1D1;
    /* Specify the width of the Thumbnail Image. */
    /* Specify the height of the Thumbnail Image*/
    /* Adds margin space to the thumbnail Image. */
    margin:2px 10px 0 0;



    Rakesh Kumar December 31, 2010 at 5:48 pm

    I totally agree with harsh. but I prefer designing because it catches visitors interest, As i think!


    Noel Lyons January 4, 2011 at 1:16 am

    Think like a magazine; choose multi-media wherever you can online in 2011.

    Brilliant – I’vd wanted to know how to do this for sometime!
    Many thanks,
    Noel Lyons


    ProSpirity January 7, 2011 at 1:12 am


    I must be missing something, isn’t Thesis doing this automatically?


    ProMagz January 23, 2011 at 6:16 pm

    Thesis does this automatically using custom fields. In that case you have to copy paste the thumbnail link in the custom field.


    arramuse April 9, 2011 at 3:03 pm

    Hi, can you share how custom field instructions ?



    Laura February 13, 2012 at 6:10 pm

    Thank you for this guide. It works great and I’m really happy with it. Your extra tips for the CSS customization were perfect. But, I did find it better to leave out the size information in the added CSS. If I leave it with WordPress > Media my images are kept proportional rather than being squished to fit exactly the size I gave it.

    I also added an image to the default thumbnail. Is there a way to make this cycle through a few images rather than just one? It doesn’t look like the Thumbnail Excerpt plugin is still being supported by the original developer. The site has a note about being abandoned.


    Leave a Comment

    Previous post:

    Next post: