Wrapping result of the_terms in a span with a class of the term name

Question

I'm using the following function to return a list of custom post types, with the_terms showing a taxonomy term.

function projectCards() {
  $args = array( 'post_type' => 'rneh_projects', 'posts_per_page' => 6 );
    $loop = new WP_Query( $args );

    echo '<ul>';
      while ( $loop->have_posts() ) : $loop->the_post();
        echo '<li class="project-card d-1of3 cf">';
          the_terms( $post->ID, 'rneh_status', ' ', ' ' );
          echo '<p><a href="' . get_post_permalink() . '">' . get_the_title() . '</a></p>';
          the_terms( $post->ID, 'rneh_author', ' ', ' , ' );
        echo '</li>';
      endwhile;
    echo '</ul>';
}

On the face of it this does what I want it to do, but then in trying to wrap

the_terms( $post->ID, 'rneh_status', ' ', ' ' );

in a span, like

echo '<span>' . the_terms( $post->ID, 'rneh_status', ' ', ' ' ) . '</span>';

so I can target it for styling, the output places the taxonomy term outside of the span, like this.

<a href="http://localhost/ne-heritage/research/ongoing/" rel="tag">Ongoing</a>
<span></span>

How do I get the output to show the term inside the span and add a class with the term name to it, or, add a class of the term name to the a href already wrapping the term name?

Answer 1

Generally speaking in the WordPress world, functions prefixed with the_ will output results immediately. Functions prefixed with get_ will return the results without outputting them.

The function get_the_terms() can be used to achieve the desired results. Here's a complete function that's essentially a wrapper for get_the_terms() with a little bit of extra formatting:

/**
 * Outputs a list of terms with special formatting
 * 
 * @param $post_id string|int ID for post
 * @param $taxonomy_slug string taxonomy name
 * @param $separator string separator for terms
 */
function wpse251476_the_terms( $post_id, $taxonomy_slug, $separator = ' ' ) {
    $terms = get_the_terms( $post_id, $taxonomy_slug );
    $separator = sprintf( '<span class="term-sep">%1$s</span>', esc_html( $separator ) );

    // Bail if there are no terms.
    if ( ! $terms || is_wp_error( $terms ) ) {
        return false;
    }

    $links = array();

    // Wrap each term link in a span and give the span the class name of the term's slug.
    foreach ( $terms as $term ) {
        $links[] = sprintf( '<span class="%1$s"><a href="%2$s">%3$s</a></span>',
            esc_attr( $term->slug ),
            esc_url( get_term_link( $term->slug, $taxonomy_slug ) ),
            esc_html( $term->name )
        );
    } 

    // Output the terms.
    ?>
    <div class="term-list <?php echo esc_attr( __( $taxonomy_slug, 'text-domain' ) ); ?>">
        <?php echo implode( $separator, $links ); ?>
    </div><?php
}

Usage examples based on original code:

wpse251476_the_terms( get_the_ID(), 'rneh_status', ' ' );

and

wpse251476_the_terms( get_the_ID(), 'rneh_author', ' , ' );