Display List of Category Names and Images WordPress
In this tutorial, we going to display a list of category names and images in the home/front page or anywhere in the WordPress site. By looping the primary category name and with the help of a plugin here we going to display the category names & images. Categories Images plugin allows you to add an image with category or taxonomy, it also provides the image URL and image PHP code you can use it anywhere you want.
Before using the code first, you need to install the Categories Images plugin in your WordPress site. Once you installed the plugin then add the images for all the categories which you created. See the below screenshot for your reference.
Once you added the images in all the categories then use the below code on your home page or anywhere you like to display the category names and images.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php $categories = get_categories(array( 'orderby' => 'name', 'order' => 'ASC', 'parent' => 0, )); foreach ($categories as $category) { $category_link = get_category_link($category->cat_ID); ?> <div class="cat-list-home"> <a href="<?php echo esc_url($category_link); ?>" title="<?php echo esc_attr($category->name); ?>"> <img src="<?php echo z_taxonomy_image_url($category->term_id); ?>" alt="<?php echo esc_attr($category->name); ?>" /> </a> <h3><a href="<?php echo esc_url($category_link); ?>" title="<?php echo esc_attr($category->name); ?>"><?php echo $category->name; ?>"</a></h3> </div> <?php } ?> |
In the above code just we looped the parent category name and with the help of the Categories Images plugin, we added the category image URL path in the image tag.
Add the below css in your style.css file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.cat-list-home { width: 150px; height: 150px; float: left; background: #FFF; margin: 10px; border-radius: 10px; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0.375rem; -webkit-box-shadow: 0 2px 3px 0 rgba(81,88,115,.08); box-shadow: 0 2px 3px 0 rgba(81,88,115,.08); -webkit-transition: -webkit-transform .2s cubic-bezier(.455,.03,.515,.955),-webkit-box-shadow .2s cubic-bezier(.455,.03,.515,.955); transition: -webkit-transform .2s cubic-bezier(.455,.03,.515,.955),-webkit-box-shadow .2s cubic-bezier(.455,.03,.515,.955); transition: transform .2s cubic-bezier(.455,.03,.515,.955),box-shadow .2s cubic-bezier(.455,.03,.515,.955); transition: transform .2s cubic-bezier(.455,.03,.515,.955),box-shadow .2s cubic-bezier(.455,.03,.515,.955),-webkit-transform .2s cubic-bezier(.455,.03,.515,.955),-webkit-box-shadow .2s cubic-bezier(.455,.03,.515,.955); } .cat-list-home img { width: 100px; padding: 5px; text-align: center; margin: 0 auto; display: flex; } .cat-list-home h3 { font-size: 14px; text-align: center; } |
The final output looks like the below screenshot.
Conclusion:
I hope this tutorial will help you to display a list of category names and images on your website. If you have any doubts about this topic let me know in the comment section and if like this tutorial share it with your friends.
