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