Skip to main content Screen Reader Website Version

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

Pretty Awesome Image Packages

Nowadays, it’s just best to buy your images. As Gainesville Web Design experts, we purchase them almost on a daily basis. There are always projects that require different photos, icons or footage. Generally people purchase credits and then use those to buy images – kind of like an

What the Heck! The Boutique Guide?!

Yes, it’s the roll out of our newest fandangled BOUTIQUE GUIDE! This is a really, truly excellent experiment in cooperative advertising. We’ve built The Boutique Guide to get small boutiques – generally just a one or two person operation – a leg up on their (lass capitally challenged)

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’ ]);

5 Signs Your Business Has Outgrown Its Website

5 Signs Your Business Has Outgrown Its Website Your website may have been exactly what you needed five or ten years ago. But businesses evolve. Services expand. Customer expectations change. Search engines update their algorithms. Eventually, even a well-built website reaches the point where it starts working against