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

Learning how to code?

We get questions all the time about how we started doing all this. Where did we learn to code? How on earth does any of that make sense? Some people are interested in learning for themselves. It’s easy to get started, especially in this day and age. Back

reducing cumulative layout shift (CLS)

Reducing Cumulative Layout Shift (CLS)

NEED HELP REDUCING CLS? Enter Your Website Below For Personal Recommendations:   Fill out my online form. In the fast-evolving landscape of web design, one metric that has gained significant attention among developers and SEO experts alike is the Cumulative Layout Shift (CLS). Since it directly affects user

The Low Down on Net Neutrality

What they heck is it? Most people don’t know it past the slogan .. and that’s what it is, a slogan. Net neutrality does not mean ‘left alone”, there’s nothing laissez faire about it. It does mean oversight, more oversight of the Internet than currently exists. The advocating

New Partners

We’ve partnered up with PWH Tech Solutions – one of Gainesville’s premier IT companies – to build some great new apps and web programs. We wish we could tell you all about it but things are pretty hush-hush right now. Suffice it to say that these are huge

Jquery Simple Fadeout

A cute little snippet to show a simple green bar upon a successful edit. <?php if(isset($_GET[‘edit’])){ ?> <div id=’notifyy’> Edited Successfully </div>     <script type=”text/javascript”>     $( ‘#notifyy’ ).show(function(){     $(this).fadeOut(5000);     });     </script> <?php } ?> The CSS: #notifyy{width:100%;background:#2f5001;padding:4px 15px;color:#fff;} Always,

Adding a Fee in Woocommerce

This piggybacks off of a solution I found elsewhere. We modified it to add a single fee for products based on the taxonomy. It comes in handy to categories products and then apply this rule to that category. function action_woocommerce_checkout_calculate_fees( $cart ) { // Initialize $quantity = 0;