Show taxonomy term meta field on single template

Question

I have a custom taxonomy that has a metadata field with an image url. On the post type single template I have the below php and I need it to echo the meta field but it remains blank. I tried several ways but I'm stuck.

<?php 
$expert = get_the_term_list( $post->ID, 'expert');
$exterm = get_term( $term_id, 'expert' );
$eximg = get_term_meta($exterm->term_id, 'tax_img', true);

if (!empty($expert)) {
    echo '<div class="tnl-expert"><h4>Expert:</h4>';
    echo $expert;
    echo '<div class="tnl-expert-img"><img src="' . $eximg . '"></div>';
    echo '</div>';
} ?>

This is the result but the img src stays empty. I don't see any errors either:

<div class="tnl-expert">
 <h4>Expert:</h4>
 <a href="/expert/pete/" rel="tag">Pete</a>
 <div class="tnl-expert-img">
 <img src="">
 </div>
</div>

And this is the code where I set the term meta:

if ( ! class_exists( 'Expert_Tax_Img' ) ) {
    class Expert_Tax_Img {
        public function __construct() {
            if ( is_admin() ) {
                add_action( 'expert_add_form_fields',  array( $this, 'create_screen_fields'), 10, 1 );
                add_action( 'expert_edit_form_fields', array( $this, 'edit_screen_fields' ),  10, 2 );
                add_action( 'created_expert', array( $this, 'save_data' ), 10, 1 );
                add_action( 'edited_expert',  array( $this, 'save_data' ), 10, 1 );
                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
            }
        }

        public function create_screen_fields( $taxonomy ) {
            $tax_img = '';
            ?>
            <div class="form-field term-tax_img-wrap">
                <label for="tax_img"><?php _e( 'Expert foto', 'text_domain' ); ?></label>
                <input type="text" id="tax_img" name="tax_img" placeholder="<?php esc_attr_e( '', 'text_domain' ); ?>" value="<?php echo esc_attr( $tax_img ); ?>" readonly>
                <button type="button" class="button tax-img-upload"><?php _e( 'Upload Image', 'text_domain' ); ?></button>
                <div class="tax-img-preview">
                    <?php if ( $tax_img ) : ?>
                        <img src="<?php echo esc_url( $tax_img ); ?>" alt="<?php esc_attr_e( 'Expert foto', 'text_domain' ); ?>" style="max-width: 100%;">
                    <?php endif; ?>
                </div>
            </div>
            <?php
        }

        public function edit_screen_fields( $term, $taxonomy ) {
            $tax_img = get_term_meta( $term->term_id, 'tax_img', true );
            if( empty( $tax_img ) ) {
                $tax_img = '';
            }
            ?>
            <tr class="form-field term-tax_img-wrap">
                <th scope="row">
                    <label for="tax_img"><?php _e( 'Expert foto', 'text_domain' ); ?></label>
                </th>
                <td>
                    <input type="text" id="tax_img" name="tax_img" placeholder="<?php esc_attr_e( '', 'text_domain' ); ?>" value="<?php echo esc_attr( $tax_img ); ?>" readonly>
                    <button type="button" class="button tax-img-upload"><?php _e( 'Upload Image', 'text_domain' ); ?></button>
                    <div class="tax-img-preview">
                        <?php if ( $tax_img ) : ?>
                            <img src="<?php echo esc_url( $tax_img ); ?>" alt="<?php esc_attr_e( 'Expert foto', 'text_domain' ); ?>" style="max-width: 100%;">
                        <?php endif; ?>
                    </div>
                </td>
            </tr>
            <?php
        }

        public function save_data( $term_id ) {
            $tax_new_img = isset( $_POST[ 'tax_img' ] ) ? sanitize_text_field( $_POST[ 'tax_img' ] ) : '';
            update_term_meta( $term_id, 'tax_img', $tax_new_img );
        }

        public function enqueue_scripts() {
            if ( ! wp_script_is( 'jquery', 'enqueued' ) ) {
                wp_enqueue_script( 'jquery' );
            }
            wp_enqueue_media();
            wp_enqueue_script( 'custom-tax-img-upload', get_stylesheet_directory_uri() . '/js/custom-tax-img-upload.js', array( 'jquery' ), '1.0', true );
        }
    }

    new Expert_Tax_Img();
}

Answer 1

Your code doesn't show where $term_id is coming from. If it is not defined anywhere, then that could be causing the problem.

Instead of using get_term() and get_term_meta() directly on your template file, you could define couple of helper functions to handle the data retrieval. This makes the template file a little cleaner and the code reusable should you need the same data elsewhere.

For example you could do something like this.

// functions.php helpers
function my_post_experts(int $post_id): array {
    $terms = get_the_terms( $post_id, 'expert' );

    return is_array($terms) ? array_map('my_wp_term_to_expert', $terms) : [];
}

function my_wp_term_to_expert(WP_Term $term): array {
    $imge = get_term_meta($term->term_id, 'tax_img', true);
    
    return [
        'name' => $term->name,
        'img_url' => $imge ?: '',
    ];
}

// single template
$experts = my_post_experts(get_the_ID());
if ($experts) {
    foreach ($experts as $expert) {
        printf(
            '<div class="tnl-expert">
                <h4>Expert: %s</h4>
                <div class="tnl-expert-img">
                    <img src="%s">
                </div>
            </div>',
            esc_html($expert['name']),
            esc_url($expert['img_url'])
        );
    }
}