Taxonomy is useful to group things together. Usually, when you add a post in WordPress, you assign taxonomy to it. By doing this, you will have a group of posts that come under a certain taxonomy. Categories, Tags are the default taxonomies in WordPress. A user can also create their own taxonomy using the function register_taxonomy(). Such taxonomy is required when you create a custom post type.

By default, Taxonomy comes with a few fields – Name, Slug, and Description. Like a featured image of a post, WordPress does not provide an image option 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. I’ll also show you how to display this image on the front end.

The user can add this image field with and without a plugin. We are going to cover both approaches. You can then pick any one option you are comfortable with.

Add Image Field to Taxonomy with Plugin

First, let’s see how to add the Image field using a plugin. For this, 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 and taxonomies. For our tutorial, I’ll add the image field to the categories. In your case, it can be a custom taxonomy.

Go to the menu ACF -> Field Groups and click on the Add New button.

On the next page, add the Field Group Title, Field Label, and Location Rule.

As shown in the screenshot, I have given a title to a Field Label. The Field Name is automatically generated from this title. Under the Field Type, I selected the Image. This option acts as file upload which uses the media uploader of WordPress.

For the Return Format, I chose the option Image Array. As the name suggests, it’ll return all metadata about the image into the array format.

Scroll down. Under Settings, for Location Rules, it needs to add a condition that will apply to the current field group. In our case, I choose Taxonomy is equal to Category.

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

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

Here the 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

The advanced custom fields plugin provides a method called get_field() to display the field values. To this function, you have to pass a field name(category_image) and category_TERM-ID. If you are dealing with a custom taxonomy then the second parameter would be term_TERM-ID. For more details, please refer to the plugin’s documentation.

Let’s say you have uploaded an image for the category having ID 7. Then to display the image, the code will be as follows.

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

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 see all the meta details about the image.

Add Image Field to Taxonomy without Plugin

We have seen how to add an image field to the taxonomy with a plugin. This approach is fine for a non-technical person. But if you are a WordPress developer then obviously you won’t use the plugin. You’ll go for coding which is always a better approach.

Using a few WordPress actions you can easily accomplish this task. First, let’s add an image field on the Category form. For this, insert the code below to your functions.php file.

function taxonomy_add_custom_field() {
    ?>
    <div class="form-field term-image-wrap">
        <label for="cat-image"><?php _e( 'Image' ); ?></label>
        <p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p>
        <input type="text" name="category_image" id="cat-image" value="" size="40" />
    </div>a
    <?php
}
add_action( 'category_add_form_fields', 'taxonomy_add_custom_field', 10, 2 );

function taxonomy_edit_custom_field($term) {
    $image = get_term_meta($term->term_id, 'category_image', true);
    ?>
    <tr class="form-field term-image-wrap">
        <th scope="row"><label for="category_image"><?php _e( 'Image' ); ?></label></th>
        <td>
            <p><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></p><br/>
            <input type="text" name="category_image" id="cat-image" value="<?php echo $image; ?>" size="40" />
        </td>
    </tr>
    <?php
}
add_action( 'category_edit_form_fields', 'taxonomy_edit_custom_field', 10, 2 );

Head over to your Category and you will see an Image section with an Upload button and the input field.

Upload and Store the Image

Next, what I am going to achieve is with a click of the Upload Image button, it opens the media uploader, and then the selected image path will be set in the input field. This value will be saved to the termmeta table with a meta key category_image.

To use a WordPress media uploader you need to write JavaScript. Create a js/awscript.js file and enqueue it.

function aw_include_script() {
 
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
 
    wp_enqueue_script( 'awscript', get_stylesheet_directory_uri() . '/js/awscript.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'aw_include_script' );

In the awscript.js file, write the below code which opens a media modal, allows you to choose the image, and inserts the image path into the input field.

jQuery(function($){
    $('body').on('click', '.aw_upload_image_button', function(e){
        e.preventDefault();
        aw_uploader = wp.media({
            title: 'Custom image',
            button: {
                text: 'Use this image'
            },
            multiple: false
        }).on('select', function() {
            var attachment = aw_uploader.state().get('selection').first().toJSON();
            $('#cat-image').val(attachment.url);
        })
        .open();
    });
});

You may learn more about the media modal on the wp.media documentation.

Now you can pick up the image from a WordPress media library. Let’s save it in the database.

function save_taxonomy_custom_meta_field( $term_id ) {
    if ( isset( $_POST['category_image'] ) ) {
        update_term_meta($term_id, 'category_image', $_POST['category_image']);
    }
}  
add_action( 'edited_category', 'save_taxonomy_custom_meta_field', 10, 2 );  
add_action( 'create_category', 'save_taxonomy_custom_meta_field', 10, 2 );

We are done with the manual process of adding an image field to the taxonomy. Finally, you can display the image on the front end as follows.

<?php
$term_id = 39;
$image = get_term_meta($term_id, 'category_image', true);
echo '<img src="'.$image.'" />';

I hope you understand how to add the image field to taxonomy in WordPress. I would like to hear 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.