WordPress Taxonomies have by default fours field you may enter: title, slug, parent and description. How about adding an image to a category? You can do that with custom fields. In this tutorial we will learn how to add custom fields to custom taxonomies.
Hooks for Custom Fields on Taxonomies
WordPress provides us with two hooks for creating custom fields that will show when adding or editing new terms to our taxonomies. This taxonomies can also be the default categories or tags.
Creating the Term
In the screen where we create the term, we have an action hook:
Here we can use the $taxonomy parameter in our own function. This can be used for an additional check if we are on the correct taxonomy screen.
Editing the Term
When we have already created a new term and we want to edit it, we will be on another screen. This screen is using another action hook for adding custom fields to taxonomies.
This hook will provide us with 2 parameters: $tag and $taxonomy. The first, $tag, is the object from which we will get the id of our term. This can be then used to get the current value for our field.
Saving the Term
In both scenarios (creating or editing) we need to save our new value in order to use it across the site. There are two different hooks for those scenarios when saving, but we can hook the same function for saving the field.
To use those hooks with our own custom taxonomy or some other existing taxonomies (categories or tags), we need to replace the {$taxonomy} with our registered taxonomy name.
Let’s now see a real-world scenario.
Adding an Image Field to Categories
In this example, we will add an image field to the default categories. This field will be a simple input field which you can then use to enter a link to an image. We could extend this with a custom button and some custom JavaScript to enable the WordPress Media Uploader for this field, but that is something for another tutorial.
Creating a Category
First, we will add our image field to the category on the screen which is used when creating a new category:
Each field on this screen is wrapped with a div.form-field so we are using the same HTML structure here.
Editing a Category
On this screen, all the fields are wrapped inside a table row tr with th for the label and td for the field. We have access to our term object so we can get the term ID to get the image field.
To get the image field we are using the function get_term_meta which is very similar to the function get_post_meta. Read more about that function on WordPress Code Reference.
Saving the Image
The last step is to create a function that will save the link that is added to our field:
In this function we are checking if our image field is posted using the global variable $_POST. If that is true, we are getting the link to the image and we are saving it using the function update_term_meta. You can learn more about that function here.
Use the Term Meta and Custom Fields
As a conclusion, I want to say that you should use the term meta and custom fields when you are working on a custom solution. This can be a plugin or something else. As an example, you could create a taxonomy Locations. This taxonomy can have a field which will show a Google Map where you can point the location of the term (place) or enter an address to it.
You see my point? If you have ever worked with custom fields on taxonomies, I would appreciate it if you would share your experience or examples on this topic!
Become a Sponsor
Can you provide me some hints if I want to create my own custom fields plugin and want to make my users able to chose custom fields of their own choice for every single taxonomy like advanced custom fields plugin does ? In some easy ways as you shown above, would love to hear back as I am the only comment poster here 🙂
Hi Akram, there are people commenting on other posts on this site, you’re not alone 😀 You need to read the configuration from somewhere, be it a database or a json file and then loop over the taxonomies and add hooks for each. You’ll need to decide how to approach storing the fields and relations to taxonomies. A separate database table is a fine approach.
I followed the tutorial but unfortunately i can’t retrieve the image text while in the edit page. I checked the database and it is saving everything correctly but for some reason my echo esc_attr($term_image) doesn’t print anything at all :~
I faced the same issue, here is how you can echo the results:
$t_id = get_queried_object_id();
$term_image = get_term_meta( $t_id, ‘image’, true );
echo esc_attr( $term_image) ? esc_attr( $term_image) : ”;
Thanks
Thank you!
Appreciate the simple tutorial, but how would you add this to tags?
Hi, this can be applied to any taxonomy so for tags, you would use tag instead of category.
Awesome, the only working and easy to implement solution ever found on the internet, others display and provide a very complicated codes and nothing works that easy like yours, In a few steps, I can: add, edit, delete custom field(s) to the categories.
Thank you so much