1

I'm still new to programming and therefore a bit lost...

I've created a taxonomy "status" for custom posts. I've added a ACF field named "bpn_statuscolor" which gets its value "color" from a ACF color picker.

I have a archive page of custom posts with the taxonomy display under the post title. I would like to color the background of those taxonomies according to their assigned color.

How do I proceed? I did a lot of research ending up with a code like this:

$terms = get_the_terms( get_the_ID(), 'color' );
if( $terms && ! is_wp_error( $terms ) ){
    foreach( $terms as $term ){
    echo 'div class="sp-pcp-post-meta" <div style="background-color:' . get_field( 'bpn_statuscolor', 'color' . $term->term_id ) . '"> </div>';
    }
}

Unfortunately I have no clue where to add the code as until now I'm only working with CSS (where php code is not working obviously).

Any help highly appreciated!

1 Answer 1

1

You would use the code on your (archive) template file, which you use to display the custom posts. On the template the code would be placed within the Loop.

For example you could have a custom post type specific archive file for this (more on Template Hierarchy).

// archive-$posttype.php
while ( have_posts() ) :
  the_post();
  $statuses = wpse_410403_status_terms( get_the_ID() );
  ?>
    <div class="entry">
      <h2><?php the_title(); ?></h2>
      <div class="sp-pcp-post-meta">
        <?php
          if ( $statuses ) {
            foreach ($statuses as $status) {
              echo wpse_410403_status_html($status);
            }
          }
        ?>
      </div>
    </div>
  <?php
endwhile;

I would recommend using helper functions, placed in your theme's functions.php file, for retrieving the terms and their meta data to keep your template file cleaner and making it easier to maintain your codebase.

In my example above I've used a helper function to retrieve the post's custom taxonomy terms. This is to force the result to be always an array as get_the_terms() returns false or WP_Error in some cases.

function wpse_410403_status_terms( int $post_id ) : array {
  $terms = get_the_terms( $post_id, 'status' );
  return $terms && is_array($terms) ? $terms : [];
}

For retrieving the color value you can have another function. This way you can protect your site from the situation when ACF is not active and it's get_field() function is not available. If that happens you can fallback to WP's native get_term_meta() function to retrieve the stored color value from the term meta (which ACF also does after jumping through few hoops).

function wpse_410403_status_color( WP_Term $term ) : string {
  return function_exists('get_field')
    ? get_field( 'bpn_statuscolor', $term )
    : get_term_meta( 'bpn_statuscolor', $term->term_id, true ); // check that the meta key is correct and matches the way ACF stores the data
}

Then a third function, for rendering the status terms with background color, for reusability.

function wpse_410403_status_html( WP_Term $term ) : string {
  return sprintf(
    '<span class="status" style="background-color: %s;">%s</span>',
    sanitize_hex_color(
      wpse_410403_status_color( $term )
    ),
    esc_html( $term->name )
  );
}

And of course, you can always wrap all three functions into a single function for even cleaner template usage.

function wpse_410403_statuses( int $post_id ) : string {
  $statuses = wpse_410403_status_terms( $post_id );
  return $statuses
   ? implode( '', array_map( 'wpse_410403_status_html', $statuses ) )
   : '';
}

I.e.

while ( have_posts() ) :
  the_post();
  ?>
    <div class="entry">
      <h2><?php the_title(); ?></h2>
      <div class="sp-pcp-post-meta">
        <?php echo wpse_410403_statuses( get_the_ID() ); ?>
      </div>
    </div>
  <?php
endwhile;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.