1

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

2 Answers 2

2

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');  
2
  • Glad I could help @Artus I've elaborated a bit above because there's more than one way to handle this. Also, is there a reason you're calling wp_reset_postdata within the loop? Normally those go after a loop codex.wordpress.org/Function_Reference/wp_reset_postdata
    – admcfajn
    Apr 13, 2018 at 19:10
  • Thanks about the reset part. You were right. The second version didn't work tho. Even after adding the ob_start() part. It prints everything out of the tab and inside the tab numbers appear. Also the code editor shows unmatched curly braces which I don't see why. Thanks a lot anyway.
    – Artus
    Apr 13, 2018 at 23:22
0

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 */
}
3
  • I added wrapper div with the class but is not working, I even echoed a div outiside the query with no success.
    – Artus
    Jan 31, 2018 at 1:14
  • Also not sure why you have the function wporg_shortcodes_init() in there. You have a function inside the function, which might evaluate OK (both functions will be executed, I think, as separate function); that's sort of weird. The add_shortcode part should take care of processing the shortcode. Jan 31, 2018 at 5:51
  • I took the example from the wordpress docs..developer.wordpress.org/plugins/shortcodes/basic-shortcodes
    – Artus
    Jan 31, 2018 at 17:08

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.