Better Default Images for WordPress Blog Posts

It can be hard to impress on clients who self-manage their WordPress blog the importance of featured images. If your theme is set up to prominently display featured images, it can be especially obvious when there isn’t one added and your blog archives aren’t as visually consistent as you would like.

One common solution is to add a default blog image or placeholder. This makes it so there is at least something displayed in the place where the featured image should be. However, this has its own downside in that it’s painfully obvious a placeholder is being used, and it can look just as unprofessional as intermittent featured images.

Here’s a quick walkthrough of a better solution: dynamically assigning a random image from a predetermined set of ‘default’ blog images. You’ll get great looking featured images, and your client won’t have to worry about picking a featured image unless they actually want to.

Step One: Get Yourself Some Images

There are a ton of resources for stock photography available which I won’t go into here. I’m a personal fan of Unsplash.com, and it’s what I’ll be using here. All of their images are completely free use for any purpose, so we can modify them however we like. Go ahead and download a good number of images (I like to use somewhere around 100, I’ve found that gives enough visual variety to make the chances of the same image appearing twice pretty low). Make your selections, and then crop & resize them to something consistent and depending on your theme’s needs. You’ll also want to make sure all the file extensions are consistent (.jpg, .png, etc), which shouldn’t be too hard if you got them all from the same place.

Step Two: Programmatically Friendly File Names

Next we’re going to do a bit of handy mass processing at the command line. Create a directory in your theme or child theme to store all of your ‘default’ images. If you don’t have an images/ dir in your theme you can create one; if you do, you can create an images/default/ dir. Move all your cropped & resized images in there and then cd in to that directory in your terminal. Run this command:

ls | cat -n | while read n f; do mv "$f" "$n.extension"; done

All the images in your directory are going to be automatically renamed sequentially (1, 2, 3…). You’ll want to swap the .extension for the file extension your images are using. I found this command on StackOverflow.

Step Three: Pull Your Default Images into Your Theme

The last step is implementing a random selection of one of these images in your theme where the featured images would go. Find where the featured image is getting pulled in. This might be on an archive.php page or something similar. You’re looking for somewhere the_post_thumbnail() is getting called. Once you’ve located the code to display the featured image, you’re going to want to make this swap. Keep in mind this may not be a copy&paste type situation, make adjustments for your theme as needed.

Before:
After:

Going in to a little more detail on the After code, here’s what’s happening:

  1. Lines 4-6: If the blog author has given this specific blog a featured image, use that one. Otherwise…
  2. Lines 7-10: Instantiate an instance of FilesystemIterator — we’re going to use this to determine exactly how many images are available in your ‘default images’ directory. This allows you to add more images in the future without needing to change the code. Don’t forget to add your theme name in the path on line 6, and point to the images/ dir you created earlier.
  3. Line 12: Generate a random integer, starting at 1 and ending at the count of images you have available.
  4. Line 14: Echo your randomly selected, pre-approved featured image in to the theme.

You will need to do this adjustment any place you’re wanting to make sure there is a featured image which looks nice & fits your theme well. I’ve implemented this code on any kind of listing or archive page, where multiple blog posts and their excerpts will be displayed next to each other, to ensure posts with and without featured images display in a consistent manner. I don’t normally do this on a single.php or any other individual blog page unless it really doesn’t look right without a featured image.

I’ll also be doing a version of this same code implemented in a WordPress Multisite environment, where you might want each site in your network to have a different set of ‘default’ images. Link goes here when that post is done.

Share Your Thoughts

Leave a Reply