How to Add Taxonomy Images in WordPress?

How to Add Taxonomy Images in WordPress?

Do you want to add taxonomy images in WordPress? Then you are in the right place. Here I’ll show you how to add images to terms in each taxonomy, even if it is default taxonomy or custom taxonomy.

A WordPress taxonomy is a way of grouping large amounts of posts. It groups the posts based on the relationship. You can create as many taxonomies as you want and add multiple terms and make relationships.

By default, WordPress comes with two main taxonomy Categories and Tags. You can also add the images to these default taxonomies.

So, in this tutorial, you will learn how to add taxonomy images in WordPress or you can add featured images to taxonomy.

We will learn two methods to add taxonomy images. The first method is using the plugins and the second method is programmatic without using the plugin.

Why You Should Add WordPress Taxonomy Images?

Using the taxonomy images, you can add the featured images or thumbnails to the terms in each taxonomy. And you can show them at the front end with the category name and have their own thumbnail.

As I said above, WordPress only allows two main taxonomies Categories and Tags but these two don’t have the option to add the featured images. But you can also add featured images to these taxonomies.

You can also create your custom post type and custom taxonomies and then enhance the feature for custom taxonomies and give the option to add the featured images to them.

For example, you have Movies custom post type and its taxonomies are Genre, Quality, etc. So in the Genre taxonomy, you have different types of terms (as a category) like fiction, non-fiction, action, comedy, etc.

So when you enhance the functionality to add taxonomy images then you can show them at the front end as well as with their name. You can design them as per your requirements using CSS.

Let’s have a look at how to add taxonomy images in WordPress with two methods. First, you will see using the plugins.

Add Taxonomy Images in WordPress – with plugins

In this method, you will learn to add taxonomy images with the help of WordPress plugins.

There are many plugins that you can use to add taxonomy images in WordPress and show at the front end each term has its own images.

The following plugins are the best plugin that you can use.

So these are plugins list for adding taxonomy images in WordPress, you can use any of them.

In the Advanced Custom Fields (ACF) plugin, you cannot add directly images to taxonomy. You have to make a group of the custom fields and assign that custom field to taxonomy then you can use it.

Here, I’ll use two plugins with step-by-step guide to show you that how to add taxonomy images in WordPress.

First, I will use Advanced Category and Custom Taxonomy Image plugin to show you how to add taxonomy images or thumbnails or icons or featured images whatever you can call.

Using the ‘Advanced Category and Custom Taxonomy Image’ Plugin

  • Install the Plugin: you need to install and activate Advanced Category and Custom Taxonomy Image plugin. You can see guide on how to install plugin in wordpress?
  • Plugin Setting Page: After activate, you need to navigate Settings > Advanced Category & Custom Taxonomy Image. You will see the list of categories and taxonomies. See the below image.

    Taxonomy Image Plugin Settings

  • Select Taxonomies: So based on the last tutorial on how to create custom taxonomies in wordpress?, we have created the custom taxonomy ‘course_types‘ taxonomy.

    So I’m going to select that taxonomy to enable the taxonomy images features to that taxonomy. You can select multiple taxonomies for which you want to enable the taxonomy images features.

    Selected Taxonomy Image Plugin Settings

  • Save Settings: After select the taxonomies, save the settings by clicking on the Save Changes button.
  • Headover to Taxonomy: Navigate to that taxonomy which you had enabled the taxonomy images featured. In our case My Courses > Course Types and you will see the image upload field option.

    Taxonomy Page Upload Field Option

  • Ready to Add Taxonomy Image: It is ready now to add a taxonomy image. You can add the featured images to all your terms. Use JPEG or PNG optimized images for better website speed performance.

    It will also give you a php code to print on the front end. See the below image and column for showing the php code to print the image.

    Taxonomy Image Field Column

  • That’s it!!! You can add or edit the taxonomy image and show them on frontend using this
    <?php echo get_taxonomy_image($term_id); ?> code.

Now, we will see how to use Advanced Custom Field (ACF) plugin to add taxonomy images in WordPress.

Using the ‘Advanced Custom Fields’ Plugin

  • Install the Plugin: install and activate the Advanced Custom Fields plugin. Check step-by-step guide on how to install wordpress plugin?.
  • Navigate to Field Group: Now navigate to Custom Fields > Field Groups

    ACF Field Groups

  • Create Field Group: click on the Add New button and it will show you new page so click on the Add Field button to create the field and fill the required fields and assign that group to your taxonomy. Let’s see with an image.

    ACF - Create Field Group

    Fill those fields that are highlighted in above images and then click on the Publish button.

  • Field on Taxonomy Page: After publishing the custom field group, you can see the new field appear in your taxonomy page. See the image below.

    ACF - Taxonomy Field

    Now you can add and edit taxonomy image and show them on frontend page.

  • Display on Frontend: you can show the taxonomy images at frontend using the
    <?php echo get_field('image', $term_id); ?>.

So, we see that, how we can add taxonomy images in wordpress using the plugins. Let’s now look the programmatically view to do same thing.

Add Taxonomy Images in WordPress – without plugins

In this method, you will learn how to add taxonomy images in WordPress without using any plugins. We will do it programmatically using the theme’s functions.php file.

I would recommend using a child theme for any customization or enhancing the functionality. If you don’t have a child theme then you should create it now using this tutorial on how to create a child theme in WordPress?.

Adding taxonomy images programmatically in WordPress, you need to keep in mind some points about action/hook. Because when you hit the hook, it should be referred to as taxonomy slug. The action suffix or prefix must refer to the taxonomy slug. We will see this in the following example.

So, the following action/hook we will use with taxonomy slug.
1. {$taxonomy_slug}_add_form_fields
2. created_{$taxonomy_slug}
3. {$taxonomy_slug}_edit_form_fields
4. edited_{$taxonomy_slug}
5. manage_edit-{$taxonomy_slug}_columns
6. manage_{$taxonomy_slug}_custom_column

So let’s get started.

First, we will add taxonomy images to the default Category taxonomy and we will use ‘category’ as a taxonomy slug.

Add Taxonomy Images to Default Taxonomy (Category)

So, here I’ll show you how to add taxonomy images to default category taxonomy in WordPress. So, I’ll use above those hooks with referring category taxonomy slug.

Step 1: Add Image Field

First thing, we will add a taxonomy custom image field (add/remove) at the end of other fields and will use {$taxonomy_slug}_add_form_fields action hook. So add the following code in the theme’s functions.php file.

After adding the above code, save the file and you will see the image field for category taxonomy that you have added the taxonomy slug as a prefix of the action hook. See the below image how the add image and remove image field look like.

Category Taxonomy Image Field

Step 2: Save Image Field

In the second step, we will save that custom field for the taxonomy image and will use created_{$taxonomy_slug} hook. In this action hook, we will add a category taxonomy slug as a suffix. So add the following code in the functions.php file.

The above will save that custom field for image in your database as a term meta using this add_term_meta() function.

First, it will check the image_id is set or not, if the image_id is set then it will save the image for your terms.

Step 3: Add Image Field in Edit Form

Now we will add an image field for the edit form. The first step only works for add form. So we also need to add an image field in the edit form.

Edit form structure built-in table form, so we will add <tr> <td> as a part of table structure. Use the {$taxonomy_slug}_edit_form_fields hook with a prefix of taxonomy slug.

When you have added the above code to the file and save it then you will see the image fields (add/remove) on the taxonomy edit page. See the following image.

Category Taxonomy Image Edit Field

Step 4: Update Image Field

We have added the image field to the edit page but it still does not update your taxonomy image. To update the taxonomy image, you have to make another action hook to check whether the image is updated or not.

The above code will update your custom field for the taxonomy image.

But wait, do you know the above all code still does not work. When you click on the Add Image button then you will see noting is happening because we don’t have enqueued the media library. So, let’s enqueue the media library with the wp_enqueue_media() function to make it work.

Step 5: Enqueue Media Library

We will add the media library with the wp_enqueue_media() function at only the admin side and then use the wp.media.editor.send.attachment event in our custom jquery code.

The wp.media.editor.send.attachment event will call the default media attachment popup to select the image for taxonomy.

So add the following two functions in your functions.php file. The first function will enqueue the media library and the second function is about to call the wp.media.editor.send.attachment event to open the media library by clicking on the Add Image button.

It will enqueue the media library for the ‘category’ taxonomy. You can make conditions to check for custom taxonomy

The above will enhance the functionality from WordPress editor and will open the media popup to select the image same as open in default wp-editor.

So, now when you click on the Add Image button it will open the media library in the popup and you can select the image for your taxonomy.

Step 6: Display Image in Column

All the above code is working fine. Now if you want to display a taxonomy image in the column then you need to make the following action hook. It will display your image in the column with other fields.

This will display the heading of the custom field taxonomy image in the last. You can change the position of the columns by a loop through the column and can set the unset columns.

Let’s display the value for this column against each term id.

It will display the values of each term that have been added to the image field. See the following image.

Category Taxonomy Image Field in Column

Step 7: Display Image on Frontend

You can show the taxonomy image on the frontend using the get_term_meta() function. It will give you terms image_id then you can use that image_id with wp_get_attachment_image() function to get the terms image. See the below code.

The above code will show you the taxonomy image and you can style it using the CSS as per you want to design it.

That’s it for default category taxonomy.

Add Taxonomy Images to Custom Taxonomy

To add images to a custom taxonomy, you have to give attention to the action hooks. Because all the above code will be the same but just we have to change the suffix or prefix of the action hook as I listed above.

As in the last article, we have created the custom taxonomy ‘course_type’ for the custom post type. So I will add images to that taxonomy to show you.

So, the following all code together for the custom taxonomy ‘course_types’ as in the tutorial case. You can do for your custom taxonomy by changing the taxonomy slug.

Add all the above code in your functions.php file and save it then you will see your custom taxonomy have custom field for adding a image. So now you can add image for taxonomy and show it on frontend.

Hope you understand tutorial and learned how you can add taxonomy images with plugin and without plugins in wordpress.

If you have any query please ask me in the comment section I’ll help you with that.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published. Required fields are marked *