Shortcode insertion in tab

Question

I created a plugin that displays staff people using a shortcode with custom category from a post type. eg. [board-members term="team1"] It works fine but only on a page or post. When I paste the shortcode into a tab (using whistles by Justin Tadlock) the profiles display outside the tab, above the tabs in the page body. what could I do to make it display inside the tab? This is the code...

require_once(dirname(__FILE__).'/post-type.php'); //file that registers CPT

function wporg_shortcodes_init(){
function wporg_shortcode($atts = []) {
     extract( shortcode_atts( array(
        'term' => 'columns'
    ), $atts ) );

    $custom_taxonomy = $atts['term'];       

    // add query of custom post type board_members      
            $recentPosts = new WP_Query
            (array('posts_per_page' => -1, 'post_type' => array('board_members'), 'columns' => $custom_taxonomy ));              
            while( $recentPosts->have_posts() ) :  $recentPosts->the_post();  ?>

                    <div class="b-thumb"><?php the_post_thumbnail('thumbnail') ?></div>
                    <p class="b-info">
                    <span class="b-name"><?php the_title(); ?></span><br />                                       
                    <span class="b-country"><?php the_field('country'); ?></span><br />
                    <span class="b-position"><?php the_field('position'); ?></span><br />
                    <span class="b-content"><?php printf(get_the_content()); ?></span><br />
                </p>                

                <?php wp_reset_postdata(); ?>         
        <?php endwhile; ?>      
   <?php        

    }
   add_shortcode('board-members', 'wporg_shortcode');
  }
 add_action('init', 'wporg_shortcodes_init');   

Thanks

Answer 1

Sounds like you need to wrap your shortcode contents in ob_start()and return ob_get_clean()

require_once(dirname(__FILE__).'/post-type.php'); //file that registers CPT

function wporg_shortcodes_init(){
function wporg_shortcode($atts = []) {
     extract( shortcode_atts( array(
        'term' => 'columns'
    ), $atts ) );

    $custom_taxonomy = $atts['term'];       

    ob_start(); // <- works like magic

    // add query of custom post type board_members      
            $recentPosts = new WP_Query
            (array('posts_per_page' => -1, 'post_type' => array('board_members'), 'columns' => $custom_taxonomy ));              
            while( $recentPosts->have_posts() ) :  $recentPosts->the_post();  ?>

                    <div class="b-thumb"><?php the_post_thumbnail('thumbnail') ?></div>
                    <p class="b-info">
                    <span class="b-name"><?php the_title(); ?></span><br />                                       
                    <span class="b-country"><?php the_field('country'); ?></span><br />
                    <span class="b-position"><?php the_field('position'); ?></span><br />
                    <span class="b-content"><?php printf(get_the_content()); ?></span><br />
                </p>                

                <?php wp_reset_postdata(); ?>         
        <?php endwhile; ?>      
   <?php        

   return ob_get_clean(); // <- more magic

    }
   add_shortcode('board-members', 'wporg_shortcode');
  }
 add_action('init', 'wporg_shortcodes_init');  

You can also modify the shortcode to return a single string, the following should work as well:

function wporg_shortcodes_init(){
  function wporg_shortcode($atts = []) {
     extract( shortcode_atts( array(
        'term' => 'columns'
    ), $atts ) );

    $custom_taxonomy = $atts['term'];       

    $output = '';

    // add query of custom post type board_members      
    $recentPosts = new WP_Query
    (array('posts_per_page' => -1, 'post_type' => array('board_members'), 'columns' => $custom_taxonomy ));              
    while( $recentPosts->have_posts() ) :  $recentPosts->the_post();

        $output .= '<div class="b-thumb">'.the_post_thumbnail('thumbnail').'</div>';
        $output .= '<p class="b-info">';
          $output .= '<span class="b-name">'.the_title().'</span><br />';
          $output .= '<span class="b-country">'.the_field('country').'</span><br />';
          $output .= '<span class="b-position">'.the_field('position').'</span><br />';
          $output .= '<span class="b-content">'.printf(get_the_content()).'</span><br />';
        $output .= '</p>                ';

    endwhile;

    wp_reset_postdata();

    return $output;

  }
 add_shortcode('board-members', 'wporg_shortcode');
}
add_action('init', 'wporg_shortcodes_init');  

Answer 2

If you want content to display in a specific spot, you will need to wrap the content in a <div> with a 'class', where the 'class' has the CSS you need to display the content.

The shortcode works on pages/posts because the shortcode is contained within the content of the page/post, in the <div> that surrounds the post content.

You will need to make a class (called 'myshortcode') of and use that in your loop:

<div class='myshortcode'>
 <div class="b-thumb"><?php the_post_thumbnail('thumbnail') ?></div>
                    <p class="b-info">
                    <span class="b-name"><?php the_title(); ?></span><br />                                       
                    <span class="b-country"><?php the_field('country'); ?></span><br />
                    <span class="b-position"><?php the_field('position'); ?></span><br />
                    <span class="b-content"><?php printf(get_the_content()); ?></span><br />
</div>

Then, some CSS for that new class:

.myshortcode {
   /* some CSS here */
}