1

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.

2 Answers 2

3

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

7
  • That is SUPER helpful!! Thank you, @Andrea-Somovigo
    – bulldog
    Aug 9, 2018 at 18:15
  • One tweak I want to make and can't quite figure out the right code for... I'd like to pass the slug parameter in the shortcode to then display only that link. <li class="button" onClick="get_data($atts)">Show Pics</li> was my attempt, but it doesn't work. What did I do wrong?
    – bulldog
    Aug 9, 2018 at 18:18
  • 1
    get_data is a javascript function, if you want to pass a php variable you've to wrap it with <?php ?> Aug 9, 2018 at 18:26
  • I've tweaked code and love the end result. THANK YOU! I split out the results into a separate shortcode so I could experiment with different page placements.
    – bulldog
    Aug 9, 2018 at 20:14
  • function mydream_output(){ ob_start(); ?> <div style="width:auto;max-width:21em;text-align: center;padding: 1em;"><h3 style="margin-top:2.5em 0 0.5em;">Title</h3><div class="my_plugin_result"></div></div> <?php return ob_get_clean(); } add_shortcode("dr_output", "mydream_output");
    – bulldog
    Aug 9, 2018 at 20:14
0

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.

Your Answer

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

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