• 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.

    image

    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.

    image

    • 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…

    image

    • 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: }

    image

    • 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.

    9 Comments

    { read them below or add one }

    Leave a Comment

    Previous post:

    Next post: