Tutorial on the use of the ACF plugin: adding fields to categorized terms

This guide is a demonstration of the ACF (Advanced Custom Fields) How to add custom fields to a categorized term and then modify the template file HTML for the term.

Terms can be items such as WordPress categories, tags, or other custom taxonomies that have been added to the site. For example.WooCommerce Popular plugins such as this add custom taxonomies when activated.

Adding Fields

The Advanced Custom Fields plugin makes it easy to add custom fields to category terms, follow the steps below.

1. exist"Custom fields"In the Administration screen, click"Add new"button to create a new field group
2. Add fields you want to see when editing a taxonomy term
3. in positionlower case, selectClassification terminologyrule and select the appropriate value to display this field group

edit a field

Once you have created a field group and assigned it to the Category Term Edit screen, you can edit the field values by navigating to the appropriate taxonomy. For example, if the field group has been assigned to a post category, navigate to thePosts > CategoryThe

Display Fields

category.phpJust edit in the theme,tag.phpor file, you can easily customize the HTML for WordPress taxonomy terms! taxonomy.php. Depending on the topic, HTML can also be customized using template sections or filters.

This example shows how to modify thecategory.phpTemplates for twentyseventeen theme and export category images and colors to style tags.

<?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 ?>

(for) instance

Here's how the above code looks in the browser.

Attention:Site title images now reflect category images and all entry titles are green.