Add a category image to a WordPress loop

I recently wrote an article for Search Engine People on how to set a fallback image for featured images. Shortly after writing that I ran into a situation on my own site that required a slightly different solution. Instead of grabbing the first image from the post as a fallback, I wanted to set a fallback based on category. For example, if I have a post in my WordPress category that doesn’t have a featured image set, the WordPress logo will accompany the excerpt in the loop by default. I was able to accomplish in just a few short steps. I’ll show you how to add a category image to a WordPress loop.

Category Images

First, I had to create the images I wanted to use for my categories. I saved them all as JPG‘s with the category slug as the filename (e.g., wordpress.jpg for my WordPress category and web-development.jpg for the Web Development category). I then uploaded these to a new directory called cat-images in my theme’s images folder.

Calling Category Images in a Theme

Now the images are uploaded, but we still need to call them in our loop. If you are trying to insert them in your main blog feed you will probably find the loop in loop.php, home.php, front-page.php, or index.php.

First, let’s see if our post has a featured image set for it. If it does, let’s return it and be done with it:

Then, if the post doesn’t have a post thumbnail associated, let’s grab the corresponding image we uploaded:

After that, we just have to close our if statement:

Now, let’s put it all together:

Variations

If you don’t want to use featured images in your loop, and instead just want to return the category image for all posts, you can strip out most of the code and just use the following:

Things to Watch For

If you see broken images shown in your loop, there is probably an incorrect path or filename somewhere. Make sure that the folder name in your theme’s directory matches the exact name and path as in your loop. Also, make sure the filenames of pictures are the exact category slugs (Pay attention to capitalization and file extensions).

Conclusion

Now, whenever you have a post with no featured image set, it will return the corresponding category image. Want an example? Just check out my main blog page. Have you done something similar, or have another way of doing this? Let me know!

References

WordPress Codex: has_post_thumbail
WordPress Codex: the_post_thumbnail

Set a fallback image for WordPress Post Thumbnails

I recently wrote this article for Search Engine People, and figured that others may find it useful. It explains how to set a fallback image for WordPress Post Thumbnails.

Intro

One of the countless things that I love about WordPress is how easy and efficient the process of adding new content is. All you have to do is provide the art and copy and your theme will take care of the rest. While this workflow is usually smooth, there are times the end user can miss a step or two. I’ve noticed when working on larger sites with multiple authors one of the most common things to slip through the cracks is setting a featured image. While this shouldn’t break your theme, it can create layout inconsistencies or (shudder) broken images. Lucky for us, we can easily provide a fallback, and I’ll tell you how.

WordPress Post Thumbnails

Post Thumbnails were introduced in WordPress 2.9 [Source: WordPress Codex] and have since become somewhat of a standard for theme developers. If a theme declares support for this functionality, it allows authors to set an image that will represent Posts, Pages, or Custom Post Types. How this image is utilized is completely dependent on the theme. A lot of themes will use a featured image to accompany excerpts, but that’s just one example.

Read the rest of my article over at Search Engine People.