How to Add Thumbnails to WordPress Recent Post Without a Plugin

add-thumbnail-to-recent-post-demo

A few days ago, I needed to add thumbnail images to the recent post widget of my blog at the sidebar,

the default recent post widget by WordPress doesn’t support thumbnail images

so to add one, I had two options

  1. Use a plugin
  2. or Code it myself.

Being a DIY blogger and a theme developer,

I decided to do it myself without a plugin.

So today, I am going to show you the exact procedure I used.

Meanwhile, did you know adding images to your recent post widget can cause two things?

which are;

  1. Increase the CTR of that post
  2. Make your blog load slower.

Since you know, lets get started!

If you are on blogger, use one of the below resources.

You can see a demo image below.

add-thumbnail-to-recent-post-demo

Note: If you have no idea of the WordPress directory please use a plugin

and also if you have no idea of coding such as PHP please use a plugin

because any vital mistake can break your blog.

How to Add Thumbnail to WordPress Recent Post Widget

  • Go to your Host Cpanel or Login Via FTP.
  • Navigate through www >> wp-includes >> Widgets
  • Locate “class-wp-widget-recent-posts.php” and Download it.
  • Search for

  • Above it add the below code

Your result should be like what is in the image below.

add thumbnail to wordpress recent post

  • Save and Upload it to your server.

If you have not added the recent post widget,

you won’t see it displaying.

So to add it, Visit your WordPress dashboard >> Appearance >> Widget and add the recent post widget.

CSS Styling

The image will take the style of your post images to style it follow the steps below.

1. Go to Appearance >> Customize >> Additional CSS.

If you wish to display image at the left side, while title at the right side. use the code below.

If you wish to display image at the right while the title at the left, use the below code.

If you wish to display image above title but with full width and specified height, use the code below.

Customization

You can change the height and width of the image by editing

  • width: 100px;
  • height: 80px;

Hopefully, the above procedures have helped you add thumbnail images to WordPress recent post widget without a plugin.

Related Articles

  • Properly Show Adsense Ads Anywhere In Blogger Blog
  • Add Adsense Ads Before, Between And After Posts In Blogger Blog
  • Best Android Blogger App – All Available Blogging Apps Included
  • Introducing BloggingPrince CSS Compression Tool – Speed Up Your Blog
  • Enjoy Free Unlimited Browsing On MTN
  • How To Show Default Author Bio Box In Blogger
  • One Comment - Post Yours! How to? ▼

    1. Hi the solid kick
      your blogs are amazing,article written a very well..

      Thanks and regards…

    Leave a Reply

    4 Shares
    Share1
    +1
    Tweet
    Pin3
    Share
    Stumble