How to Add Custom Fields to Taxonomies in WordPress

You can do all sorts of amazing things when you add a custom field to taxonomies in WordPress. The trick is actually figuring out how to do it. By default, a taxonomy in WordPress has four fields that you may enter. They are:

  • Title
  • Slug
  • Parent
  • Description

But what if you want to add a custom field to taxonomies?

You can add custom fields to media in WordPress. You can also display custom fields from a specific post if you want to.

Over the years WordPress has really changed, so the two examples below might vary as time goes by. In this article, I will show you how to add custom fields to taxonomies in WordPress.

There are actually a couple of ways to do this. You can use a plugin, or you can simply code the entire thing. The choice is yours and it will depend on the understanding you have of code placement. However, even the plugin solution requires code placement. Let’s take a look at default taxonomies in WordPress and some ways to add custom fields.

Add Custom Fields to Taxonomies Using a Plugin

To add custom fields with a plugin, the first thing you want to do is install and activate the Advanced Custom Fields plugin.

Install and activate advanced custom fields

The ACF plugin allows you to add custom fields on demand, add them anywhere, and show them everywhere. It is a very intuitive plugin, and if you are a beginner to WordPress custom fields and how taxonomies work, this is the way to go.

Once the plugin has been installed and activated, you want to head over to the custom fields admin screen. To get there click on Custom Fields > Add New.

Click on custom fields then on add new

Now add the fields you would like to see when editing a taxonomy term. I will do one for the example. You can add as many as you want. Then, under “Locations,” select the taxonomy term rule and choose the corresponding value to show this field group.

Add all your fields in custom fields

Once you have created a field group and assigned it to appear for a taxonomy term you can move on. Editing the field values is done by navigating to the proper taxonomy.

For example, if you have assigned your field group to post categories, navigate to Posts > Categories.

Now you want to display the field. Even the beginner way, with using the plugin, will involve some code.

To do this you have to customize the HTML for a WordPress taxonomy term. This can be easily done by editing the category.php, tag.php or taxonomy.php file in your theme. Depending on your theme, you may also use template parts or filters to customize the HTML.

All of these files can be found in your “Theme Editor” section. To access this click on Appearance > Theme Editor.

Click on appearance then on theme editor

For the example below I am showing how to modify the category.php template from the twentyseventeen theme and output both the category image and color to a style tag.

Click on the category.php and enter the following code.

<?php
/**
* The template for displaying category archive pages
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/

get_header();

// get the current taxonomy term
$term = get_queried_object();

// vars
$image = get_field('image', $term);
$color = get_field('color', $term);

?>
<style type="text/css">

.entry-title a {
color: <?php echo $color; ?>;
}

<?php if( $image ): ?>
.site-header {
background-image: url(<?php echo $image['url']; ?>);
}
<?php endif; ?>
</style><div class="wrap">

<?php // Remaining template removed from example ?>

Note: When editing a WYSIWYG (What you See Is What You Get) field on a taxonomy term, the auto-embed functionality may not work. This is due to code within the WordPress core, which limits the auto-embed functionality to posts only. Here is a workaround that should work most of the time. A WYSIWYG is something like Elementor, or Visual Editor.

Enter the following into your category.php file:

<?php

// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;

$GLOBALS['wp_embed']->post_ID = $taxonomy . '_' . $term_id;

?>

This code will set a custom post_ID and allow WP to load the embed.

Add Custom Fields to Taxonomies Using Code

Note: This is for advanced users, so be careful if you do not know or understand where to place the code in your php files.

Basically, WordPress provides you with two hooks for creating custom fields that will show when adding or editing new terms to your taxonomies. These taxonomies can also be the default categories or tags.

Creating the Term

You can create the term and have an action hook.


<?php

do_action( "{$taxonomy}_add_form_fields", string $taxonomy );

You 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

Now that you have created a new term you can edit it. We are using another action hook for adding custom fields to taxonomies.

[ht_message mstyle=»info» title=»» show_icon=»» id=»» class=»» style=»» ]<?php

do_action( «{$taxonomy}_edit_form_fields», object $tag, string $taxonomy );[/ht_message]

What this hook does is provide you 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 your field.

Saving the Term

Whether you are creating or editing a term, you want to properly save your new value so that it can be used across your site. There are two different hooks you can use for those scenarios when saving. They are:

[ht_message mstyle=»info» title=»» show_icon=»» id=»» class=»» style=»» ]<?php

do_action( «edited_{$taxonomy}», int $term_id, int $tt_id );
do_action( «created_{$taxonomy}», int $term_id, int $tt_id );[/ht_message]

To use those hooks with the custom taxonomy you created, or some other existing taxonomies (categories or tags), you need to replace the {$taxonomy} with your registered taxonomy name.

Add An Image Field to Categories

So, with that information in place, let’s do an example together. In the example below we will add an image field to categories.

Creating the Category

First, add the image field to the category, which is used when creating a new category:

&amp;amp;lt;?php

/**
* Adding Image Field
* @return void
*/
function category_add_image( $term ) {

?&amp;amp;gt;
&amp;amp;lt;div class="form-field"&amp;amp;gt;
&amp;amp;lt;label for="taxImage"&amp;amp;gt;&amp;amp;lt;?php _e( 'Image', 'yourtextdomain' ); ?&amp;amp;gt;&amp;amp;lt;/label&amp;amp;gt;

&amp;amp;lt;input type="text" name="taxImage" id="taxImage" value=""&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;?php
}
add_action( 'category_add_form_fields', 'category_add_image', 10, 2 ); 

Note: Each field on this screen is wrapped with a div.form-field so I am using the same HTML structure here.

Editing a Category

&amp;amp;lt;?php

/**
* Edit Image Field
* @return void
*/
function category_edit_image( $term ) {

// put the term ID into a variable
$t_id = $term-&amp;amp;gt;term_id;

$term_image = get_term_meta( $t_id, 'image', true );
?&amp;amp;gt;

&amp;amp;lt;tr class="form-field"&amp;amp;gt;
&amp;amp;lt;th&amp;amp;gt;&amp;amp;lt;label for="taxImage"&amp;amp;gt;&amp;amp;lt;?php _e( 'Image', 'yourtextdomain' ); ?&amp;amp;gt;&amp;amp;lt;/label&amp;amp;gt;&amp;amp;lt;/th&amp;amp;gt;
&amp;amp;lt;td&amp;amp;gt;

&amp;amp;lt;input type="text" name="taxImage" id="taxImage" value="&amp;amp;lt;?php echo esc_attr( $term_image ) ? esc_attr( $term_image ) : ''; ?&amp;amp;gt;"&amp;amp;gt;
&amp;amp;lt;/td&amp;amp;gt;
&amp;amp;lt;/tr&amp;amp;gt;
&amp;amp;lt;?php
}
add_action( 'category_edit_form_fields', 'category_edit_image', 10 );

You can see that 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 you are using the function get_term_meta, which is very similar to the function get_post_meta. You can read more about that function on WordPress Code Reference.

Saving the Image

The final step is to create a function that will save the link that is added to your field:

&amp;amp;lt;?php

/**
* Saving Image
*/
function category_save_image( $term_id ) {

if ( isset( $_POST['taxImage'] ) ) {
$term_image = $_POST['taxImage'];
if( $term_image ) {
update_term_meta( $term_id, 'image', $term_image );
}
}
}
add_action( 'edited_category', 'category_save_image' );
add_action( 'create_category', 'category_save_image' );

You can see that in this function you are checking if your image field is posted using the global variable $_POST. If that is true, you are getting the link to the image and you are saving it using the function update_term_meta. You can learn more about that function on this WordPress Code Reference page.

There you go. As you can see, adding a custom field to taxonomies in WordPress can be done a couple of ways.

Again, WordPress is constantly changing, so your steps may vary here and there, but this reference page gives you a good idea. If you use the plugin technique to add a custom field to taxonomies, then you should be good to go no matter what.

Have you played around with custom fields any? Do you find that taxonomies in WordPress are just too complicated for you?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Copy link