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

AJAX Store Locator ★★★★★

Just finished up a project using AJAX store locator from codecanyon. The client needed a lightweight solution to locate specialty stores all across the country. With some significant upgrades, we customized this script to suit their needs exactly. Customization took around six hours but was much more efficient

JW Freeman Plumbing Has A New Website

JW Freeman plumbing is a new client with lots of potential. He needs something that will put him on top and Livewire is that something. We have tons of experience and dozens of happy clients that proves we have the formula for success. We don’t keep it a

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

New Web Program: Brain Development Maps

Creating braindevelopmentmaps.org was a great opportunity to work on a very interesting site; Shirley came to Livewire with very specific needs. There is nothing ‘typical’ or ‘standard’ about this website, it is in a word, unique. Braindevelopmentmaps.org allows users to view highly detailed brain mapped images online. These

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