Return vs Echo Shortcode

1 Views

Ok, so I’ve created a short code which echo’s some of the output; the problem I discovered is that the values must be returned instead of echo’d. I’m having problems converting the shortcode to return the date instead..

I’ve tried and it breaks my shortcode..

Read More

What would this shortcode code look like if it returned the code correctly instead of echo’ing it? 

// [service slug="foobar"]
function services_shortcode( $atts ) {

    // Attributes
    extract( shortcode_atts(
        array(
            'slug' => '',
        ), $atts )
    );

if ( isset( $slug ) ) {
    $args = array( 'post_type' => 'cbd_services', 'name' => $slug ); // -1 Shows ALL Posts
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
    $custom = get_post_custom($post->ID);
    $galleryPhotos = unserialize($custom["gallery_photos"][0]);
 ?>
    <div class="accordion closed">
        <h4 class="accordionTitle"><?php the_title(); ?><span>+</span></h4>
        <div class="accordionContent">
            <?php the_content(); ?>
            <?php if(!empty($galleryPhotos)){
                foreach($galleryPhotos as $photo){ ?>
                    <div class="photoContainer">
                        <a class="fresco" data-fresco-group="<?php echo $slug; ?>" href="<?php echo $photo['gallery_imagesrc']; ?>">
                            <div class="hover">#makeitbigger</div><img src="<?php echo get_template_directory_uri(); ?>/thumb.php?src=<?php echo urlencode($photo['gallery_imagesrc']); ?>&w=452&h=275&zc=1" />
                            <span class="photoCaption"><?php echo $photo['gallery_title']; ?></span>
                        </a>
                    </div>
            <?php   }
            } ?>
        </div>
    </div>
<?php  endwhile; wp_reset_query();

}}
add_shortcode( 'service', 'services_shortcode' );
Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Just define a variable, and concat all html as string and return it.

    <?php
function services_shortcode( $atts ) {

    // Attributes
    extract( shortcode_atts(
        array(
            'slug' => '',
        ), $atts )
    );
$html='';
if ( isset( $slug ) ) {
    $args = array( 'post_type' => 'cbd_services', 'name' => $slug ); // -1 Shows ALL Posts
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
    $custom = get_post_custom($post->ID);
    $galleryPhotos = unserialize($custom["gallery_photos"][0]);

    $html.='<div class="accordion closed">
        <h4 class="accordionTitle">'.get_the_title($post->ID).'<span>+</span></h4>
        <div class="accordionContent">'.get_the_content();
        if(!empty($galleryPhotos)){
                foreach($galleryPhotos as $photo){ 
                    $html.='<div class="photoContainer">
                        <a class="fresco" data-fresco-group="'.$slug.'" href="'.$photo['gallery_imagesrc'].'">
                            <div class="hover">#makeitbigger</div><img src="'.get_template_directory_uri().'/thumb.php?src='.urlencode($photo['gallery_imagesrc']).'&w=452&h=275&zc=1" />
                            <span class="photoCaption">'.$photo['gallery_title'].'</span>
                        </a>
                    </div>';
              }
            } 
        $html.='</div>';
    $html.='</div>';
    endwhile; wp_reset_query();
    }

    return $html;
}
add_shortcode( 'service', 'services_shortcode' );

  2. And dont forget to ob_end_clean() so it wont echo your code!

    Wish i could add a comment to @Shazzad’s answer, But i have to post an answer:

    ob_start() //start buffering
?>

<div>...your html...</div>

<?php
$html = ob_get_contents() //get your content
ob_end_clean() //clean echoed html code

return $html

  3. The easiest way is to use buffering. You might have already used ob_start() and ob_get_contents() PHP native function. So your code would be – 

    ob_start();
if ( isset( $slug ) ) {
.... rest of your code ....
<?php  endwhile; wp_reset_query();
$content = ob_get_contents();

return $content;