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

Offline linking

This is a profound point. A lot of linking takes place offline. Sounds weird but many great links sprout from the personal relationships you make as a business. Noteworthy links can be found at your local chamber of commerce just like any Hotfrog or elocal directory site. “This

gainesville webste design for a small business

✈️ New Website Launch: University Air Center Soars to New Heights Online

We’re proud to announce the launch of the new and improved website for University Air Center — Gainesville’s premier full-service FBO, flight training, and aircraft maintenance hub. With a sleek new design and streamlined navigation, the new uac.aero offers pilots, students, and aviation professionals a faster, more user-friendly

Leverage Browser Caching

When a webpage loads on your screen there are a lot of little pieces that have come together to create what you’re seeing. Your logo, other images, style sheets, javascript files are among some of the external resources a webpage might use to render itself on your screen.

A Quick Way To Kill Your Facebook Marketing

Facebook is a powerful tool. With millions upon millions of reachable users it is the social media powerhouse. Sharing content is incredibly easy and businesses can so easily engage potential customers that many businesses are putting it to work for them. There are, in fact, many ways to

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