Display Custom Post Category Images and Icons With ACF

Advanced Custom Fields (ACF) can add an image field to categories as well as to posts. This example uses that to show category images as a grid of icons for a custom taxonomy: each item links to its category archive and has a normal and a hover image. The same approach works for post categories, WooCommerce product categories or the categories of any custom post type.

First create an ACF field group with two Image fields, material-ctg-img and material-ctg-hover-img, with Return Format set to Image ID. Set its location rule to Taxonomy is equal to your taxonomy, so the fields appear when you add or edit a category, and upload both images for each one. Then add the code to the template where the grid should appear.

<?php
   $i_categories = get_terms( 'material-category', array(
       //'orderby' => 'count',
       'hide_empty' => 0,
   ) );
?>
<?php 
   foreach( $i_categories as $term ):
?>
 
<!-- Material 1 Start -->
<div class="col-md-3 col-sm-4 col-xs-6">
   <?php
      $p_image = get_field( 'material-ctg-img', $term );
      $normal_p_img = wp_get_attachment_image_src( $p_image, "thumbnail" );
       
      $h_image = get_field( 'material-ctg-hover-img', $term );
      $hover_h_img = wp_get_attachment_image_src( $h_image, "thumbnail" );
      ?>
   <a href="<?php echo get_term_link( $term ); ?>" class="single-st-category-item">
      <img src="<?php echo esc_url($normal_p_img[0]); ?>" alt="" class="single-st-category-icon-blue">
      <img src="<?php echo esc_url($hover_h_img[0]); ?>" alt="" class="single-st-category-icon-white">
      <h4><?php echo $term->name; ?></h4>
   </a>
</div>
<!-- Material 1 End -->
<?php endforeach; ?>

How it works

• get_terms() loads every term in material-category. 'hide_empty' => 0 also includes terms that have no posts yet.
• get_field() receives the term object as its second argument, so ACF reads the fields saved on that category.
• wp_get_attachment_image_src() returns each image in the thumbnail size, and index 0 is the URL.
• get_term_link() links the item to the category archive, and $term->name prints the category name.

Adapting it

Replace material-category with your taxonomy: category for post categories or product_cat for WooCommerce product categories. Product categories also have a built-in thumbnail you can use without ACF, as in displaying WooCommerce categories with thumbnails. The col-md-3 col-sm-4 col-xs-6 classes are Bootstrap 3 grid columns; swap them for your theme’s classes. The snippet prints both images, so add CSS that hides .single-st-category-icon-white and swaps the two when the link is hovered.

Every term needs both images: if one is missing, that img gets an empty src and PHP may show a warning.

For category images, icons and other custom fields designed into your theme, see my custom WordPress development services.

Related articles

• showing the current term’s ACF fields on its archive: the same fields read on the category page itself
• the ACF Image field and its Image ID return format: more on image sizes and the alt attribute