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.