WordPress Custom Post Type Category Images : Solved

If you’re a WordPress developer, you’ve probably been here.

You want to use images for your categories, but they are custom taxonomies. Here’s how to solve that issue. We’re using a plugin called “Category Images” by Muhammad Said El Zahlan.

Download, install and activate the plugin. Now you can add images to your categories in any post type (or terms). You can even exclude post types if you want to keep things local to a single category. Now you want to display those images somewhere. There’s plenty of documentation on the author’s site but in our case we needed  to loop through the categories and display the image in a javascript portfolio plugin.

In our file we added the line:

<?php foreach (get_terms(‘v-category’) as $cat) : ?>

Where v-category is the slug of our custom taxonomy.

Next we needed to display the image and the category name.

<img width=”700″ height=”700″ src=”<?php echo z_taxonomy_image_url($cat->term_id); ?>” class=”scale-with-grid wp-post-image” alt=”” />

<h2 class=”nvr-pf-title”><a href=”<?php echo get_term_link($cat->slug, ‘v-category’); ?>”><?php echo $cat->name; ?></a></h2>

Then ending foreach:

<?php endforeach; ?>

That’s it. Displays like a champ.

More Web Design Blog Content

What’s New: Livewire Seminars

Want to become your own SEO specialist? Need to know how to put your site on page 1 but don’t have the capital to invest hundreds to thousands of dollars in optimization? We can help! Our Search Engine Optimization Seminars will teach you how to become your own

Client Spotlight – Veterans Moving Help

Greg came to us needing a boost in his website traffic. He already had his site running but needs people to be able to find it. We are currently working diligently to make that happen for him. We’ve already made significant progress in his search engine rankings and

Preloading Images with Jquery

There are times when preloading images is an important step in keeping your site/page/program running smoothly. This is especially true in the era of mobile. Here’s a cute little snippet that does just that. function preload(yourarrayOfImages) { $(yourarrayOfImages).each(function(){ $(‘<img/>’)[0].src = this; }); } preload([ ‘img/image1.jpg’, ‘img/image2.jpg’, ‘img/image3.jpg’ ]);

When To Get A New Mac

When To Get A New Mac

MacBook Running Hot and Sluggish? It Might Be Time for a New One If your MacBook Pro has started running hot, fans are constantly spinning, and everything from Safari to Finder feels like it’s stuck in molasses—you’re not alone. These are some of the most common signs that

CSS Animation, The New Flash?

I’ve used it, so I am not immune to the pull of CSS animation, but what are we doing here folks? Used sparingly, CSS animation is at best a small way to augment conversions (button wiggle), but at worst it is a resource hog that destroys readability and

Javascript functions, variables, objects

How JavaScript Enhances Modern Web Design and User Experience

JavaScript has transformed web design, making websites more interactive, dynamic, and user-friendly. Whether you’re running an e-commerce site, a business portfolio, or a blog, JavaScript plays a crucial role in creating a memorable user experience. In this post, we’ll explore how JavaScript can be used effectively in web