Taxonomy is useful to group things together. Usually, when we add a post in WordPress, we assign taxonomy to it. Doing so, we will have a group of posts that comes under certain taxonomy. Categories, Tags are the default taxonomies in WordPress. A user can also create their own taxonomy using the function register_taxonomy().

By default, Taxonomy comes with few fields – Name, Slug, and Description. WordPress does not provide an image field for taxonomy. But in some scenarios, you may want to have an image for your taxonomy. In this article, we study how to add the image field to taxonomy in WordPress and display it on the front end.

Add Image Field to Taxonomy

To get started, you need to install and activate the Advanced Custom Fields plugin.

The Advanced custom field is a field builder that allows you to easily add fields to the post types, taxonomies in WordPress with only a few clicks. For our tutorial, I am going to add the image field to the categories and display them on the front end.

Upon plugin activation, go to the menu Custom Fields and click on the Add New button.

On the next page, you need to add title, fields, conditions for the field group.

As shown in the above screenshot, I have given a title, field label. The field name is automatically generated from the field label. Under the field type, I selected the option Image. This option acts as file upload which allows using the media uploader.

Scroll down on the same page, select Return Format as Image Array.

Under the Location, for the Rules user need to add a condition which will apply to the current field group. In our case, I choose Taxonomy as equal to Category.

Once you are done with the above settings, save the changes.

Now, if we go to the category edit page, we will see the field for Image upload.

Here, a user can upload the image for a category. Next, let’s see how to display this image on the front end.

Display Category Image On the Front End

Advanced custom fields plugin provides a method get_field() which is used for displaying field value. To display the category field value you need to pass field name and ‘category_TERM_ID’. If you are showing a custom taxonomy field value then the second parameter would be ‘term_TERM_ID’. Please refer plugin documentation here.

Let’s say we have uploaded an image for the category which has an ID 7. Our code will be as follows to display the image.

<?php
$term_id = 7;
$image = get_field('category_image', 'category_'. $term_id); //'category_image' is our field name
?>
<img src="<?php echo $image['url']; ?>">

The variable $image has an image path with sizes of a thumbnail, medium, and large. You can choose any size of the image as per your requirement. Print the $image variable and you will get all meta details about the image.

I hope you understand how to add the image field to taxonomy in WordPress. Please share your thoughts and suggestions in the comment section below.

Related Articles

• How to Build Custom Elementor Widget
• How to Add Code After the Body Tag in WordPress
• Adding Custom Image Button with Media Uploader in WordPress

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.