How to display featured images for all posts with certain taxonomy label?

Question

I have created a post taxonomy in functions.php called 'leadership' and then tagged posts with three different labels. I have a team page on which I want to place three links (each slugged to a label in the taxonomy).

• Corporate
• Sales
• Support

So that when the above word is clicked, the featured image for each post with that label becomes visible on the page.

So there's three basic elements (I think):

1. Calling all the post data for the specified taxonomic label
2. Generating a link that calls the featured images for those posts
3. Having the content appear/disappear based on which link is clicked

While I've done #2 and #3 individually before, my head is swimming trying to figure out how to merge all the elements together.

Can someone give me some pointers, beyond the codex which I've read thru already? And maybe even some sample code - especially for #1 and #2?

And the dream... I'd love to implement it as two shortcodes - one for the link and one for the display - so that I can reuse it in other areas of the website.

Answer 1

Something quite rough that needs improvement but can give you a starting point, if I've understood your needs: use [dr] as shortcode marker where you want

function my_dream_shortcode($atts, $content = null) {
  ob_start(); ?>
  <ul>
    <li class="button" onClick="get_data('corporate')">Corporate</li>
    <li class="button" onClick="get_data('sales')">Sales</li>
    <li class="button" onClick="get_data('support')">Support</li>
  </ul>
<div class="my_plugin_result"></div>
<style>
  li.button{
   list-style:none;
   padding:4px 10px; 
   background-color:cadetblue;
   margin:10px;
   float:left;
   min-width: 160px;
   text-align: center;
   cursor:pointer;
  }
  .my_plugin_result figure{
   float:left;
   padding:4px;
   background:#ccc;
}
</style>
<script>
  var myPluginAjaxUrl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
  function get_data(term) {
    jQuery.ajax({
      url: myPluginAjaxUrl,
      data: {
        action: 'get_data_for_my_shortcode',
        term: term
      }
    }).done(function (response) {
      console.log(response)
      jQuery(".my_plugin_result").html(response);
    });
  }
</script>

<?php
 return ob_get_clean();
}
add_shortcode("dr", "my_dream_shortcode");

add_action('wp_ajax_nopriv_get_data_for_my_shortcode', 'get_data_for_my_shortcode');
//add_action('wp_ajax_get_data_for_my_shortcode', 'get_data_for_my_shortcode');
function get_data_for_my_shortcode(){
  global $wpdb;
  $args = array(
   'post_type' => 'post',
   'tax_query' => array(
      array(
        'taxonomy' => 'leadership',
        'field' => 'slug',
        'terms' => $_REQUEST['term']
      )
    )
 );
  $response="";
  $query = new WP_Query( $args );

  while($query->have_posts() ):
    if($query->have_posts() ):
      $query->the_post();
      $response.='<figure><img src="'.get_the_post_thumbnail_url(get_the_ID(),'medium').'"/></figure>';
    endif;
  endwhile;
  echo $response;
  die();
}

Thanks to @bulldog edited code to work effectively in front-end

Answer 2

For future readers, the above code will display when logged in, but not for users logged out.

If you want site visitors to see output, then you need to add:

add_action('wp_ajax_nopriv_get_data_for_my_shortcode', 'get_data_for_my_shortcode');

It took me a while to troubleshoot this issue. Thank you WP Codex.