Many times we need to add extra fields to the categories in WordPress, mainly to customize the category.php template or to handle new data related to the category such as images, styles and even html content.
The default wordpress categories come like this, with only four fields (name, slug, parent category and description).
How to add other custom fields in WordPress?
Here is how we have added three more fields to the categories. How?
Step # 1
First we must add the edit_category_form_fields hook that allows us to modify the category view to add new html elements such as textfield, buttons, texarea and others.
<?php
//add extra fields to category edit form hook
add_action ( 'edit_category_form_fields', 'extra_category_fields');
//add extra fields to category edit form callback function
function extra_category_fields( $tag ) { //check for existing featured ID
$t_id = $tag->term_id;
$cat_meta = get_option( "category_$t_id");
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Category Image Url'); ?></label></th>
<td>
<input type="text" name="Cat_meta[img]" id="Cat_meta[img]" size="3" style="width:60%;" value="<?php echo $cat_meta['img'] ? $cat_meta['img'] : ''; ?>"><br />
<span class="description"><?php _e('Image for category: use full url with '); ?></span>
</td>
</tr>
<?php
}
Step # 2
In this step, basically what we do is save the information in the wordpress database, specifically in the wp_options table, the hook edited_category is used for this.
<?php
// save extra category extra fields hook
add_action ( 'edited_category', 'save_extra_category_fileds');
// save extra category extra fields callback function
function save_extra_category_fileds( $term_id ) {
if ( isset( $_POST['Cat_meta'] ) ) {
$t_id = $term_id;
$cat_meta = get_option( "category_$t_id");
$cat_keys = array_keys($_POST['Cat_meta']);
foreach ($cat_keys as $key){
if (isset($_POST['Cat_meta'][$key])){
$cat_meta[$key] = $_POST['Cat_meta'][$key];
}
}
//save the option array
update_option( "category_$t_id", $cat_meta );
}
}
Step # 3
The last step is to use the values, as I said at the beginning, mostly these values are used to extend the view of the category template category.php, such as defining a main image for each category.
<?php
if (isset($cat_data['img'])){
$cat_img=$cat_data['img'];
}
?>
<section id="jumbotron">
<div class="container jumbotron jumbotron-fluid mb-0" style="background: <?php echo $cat_bg_color ?>; max-width: 100%;background-size: cover;color:<?php echo $cat_font_color ?> !important">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="<?php echo $cat_img ?>" class="img-fluid" alt="Category Image">
</div>
</div>
</div>
Conclusion
There are several plugins in wordpress to add extra fields to the categories, but this could pose some problems such as: performance, illegibility of the code and even full and unreadable wordpress interface with more menu and visual elements. If you are creating a theme from the beginning, you will want to depend as little as possible that your theme requires other plugins for proper operation, which is why adding the fields in this way makes our site simpler.