How to set author avatar as default featured image in WordPress

I’ve had this blog for a long time. I was originally on Blogger long before I discovered how wonderful WordPress could be and became fairly adept at developing websites with it. Eventually I did opt to move my blog from Blogger to WordPress and am happy I did. So much functionality and features!

The problem

However, I made a few observations shortly after moving. One important item which is the topic of this post was that I had tons of posts without a featured image. I am using the Canvas theme from WooThemes which, like many other themes, makes great use of the featured images for posts. I observed that my blog looked pretty bla with all these image-less posts.

There were two causes in my instance. The first was all my old posts moved here from blogger obviously had no featured image. The second was a plugin I was using for posting short status posts in my blog feed that had no option for setting the featured image unless I later went into the post editor which defeated the purpose of the status plugin. Also, I felt no need for selecting a unique featured image for my short status updates.

The solution

My idea was to set a default, fallback featured image that would show if none were defined for the post. But what image to choose? It came to my mind that my author avatar would be an excellent, and very appropriate natural fit. So here’s what I did:

First I located the files in my parent theme that referenced the featured image. There were a few occurrences of this in my theme I repeated the same basic steps for each:

  1. I copied the files from my parent theme and placed them in my child theme
  2. I located the instance where the featured image was called
  3. I wrapped that code in conditional statement that checked to see if the post had a thumbnail
  4. I added an `else` statement after that renders my gravatar image

Every theme is different so my code may not exactly match what you see in your theme. This is an example to give you an idea of how this works.

Here is one instance where the featured image was called. It is in the `content-magazine-featured.php` file.

woo_image( 'width='.$woo_options['woo_magazine_f_w'].'&height='.$woo_options['woo_magazine_f_h'].'&class=thumbnail '.$woo_options['woo_magazine_f_align'] );

And here is what I did with it:

if (has_post_thumbnail()) {
	woo_image( 'width='.$woo_options['woo_magazine_f_w'].'&height='.$woo_options['woo_magazine_f_h'].'&class=thumbnail '.$woo_options['woo_magazine_f_align'] );
		} else {
		echo get_avatar(get_the_author_meta( 'ID' ), 40 );
	}

And there you have it! As you can see, the original code is simply wrapped in a conditional statement with my little else statement at the end. The number 40 there is for the image size.

I also threw in some CSS to kind of set these apart since I didn’t really care to have my face blown up all over my blog.

.home .post .avatar {
border-radius: 50px;
float: left;
padding: 5px 0px;
position: absolute;
}

That’s basically just what I needed to do what I wanted. I hope this was helpful for you and feel free to comment if you have any ideas on how to do this better or need help doing something like this on your site.

Leave a Reply

Your email address will not be published. Required fields are marked *