ob_start() combined with wp_query - wordpress

Question

I'm making my first plugin and I have a problem with displaying my shortcode.
It shows in the top all the time but I have read some about ob_start(); and trying to use it but the shortcode just returns nothing.
Im using the code below - it seems to have something to do with my posts. Anyone know why how to solve this problem?
My WP_Query:
$query = new WP_Query( array(
'category__in' => $categories,
'posts_per_page' => $whpost_stored_meta_shortcode['whpost_number_of_posts'][0]
));
The code i use to display it:
ob_start();
echo '<div class="whpost_content">';
while($query->have_posts()) : $query->the_post();
// Get the URL to the attached image.
$attached_image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'large' );
echo '<div class="whpost_post" style="width: ' . $post_width .'; background-image: url(' . $attached_image[0] . ');">';
the_title();
echo '</div>';
endwhile;
echo '</div>';
return ob_get_clean();
The complete code for the shortcode function:
<?php
function cpt_content_func( $atts ) {
// Get the ID we putted in into [wh-postgrid id="THIS_ID"]
extract( shortcode_atts( array(
'id' => null
), $atts ) );
// Get stored meta data (For the categories - needed to be formatted in
// a certain way)
$categories = get_post_meta( $id, 'whpost_cats', true );
// Get meta data for settings and such.
$whpost_stored_meta_shortcode = get_post_meta( $id );
// Get the correct categories and use the settings we got.
$query = new WP_Query( array(
'category__in' => $categories,
'posts_per_page' => $whpost_stored_meta_shortcode['whpost_number_of_posts'][0]
));
// Set the styles
switch ( $whpost_stored_meta_shortcode['whpost_posts_per_line'][0] ) {
case 1:
$post_width = '100%';
$post_max_height = '';
break;
case 2:
$post_width = '50%';
$post_max_height = '';
break;
case 3:
$post_width = '33.333333%';
$post_max_height = '';
break;
case 4:
$post_width = '25%';
$post_max_height = '';
break;
default:
$post_width = '50%';
}
// Display the front-end
ob_start();
echo '<div class="whpost_content">';
while($query->have_posts()) : $query->the_post();
// Get the URL to the attached image.
$attached_image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'large' );
echo '<div class="whpost_post" style="width: ' . $post_width .'; background-image: url(' . $attached_image[0] . ');">';
the_title();
echo '</div>';
endwhile;
echo '</div>';
return ob_get_clean();
}
add_shortcode('wh-postgrid','cpt_content_func');

Answer 1

I think problem with your Query, you can add this line to check
if (!$query->have_posts()) {
return 'Empty result';
} else {
return ob_get_clean();
}

Answer 2

The function must return the output.
Change your code like this and it should work:
$output = '<div class="whpost_content">';
while($query->have_posts()) : $query->the_post();
// Get the URL to the attached image.
$postId = get_the_ID();
$attached_image = wp_get_attachment_image_src( get_post_thumbnail_id( $postId ), 'large' );
$output .= '<div class="whpost_post" style="width: ' . $post_width .'; background-image: url(' . $attached_image[0] . ');">';
$output .= get_the_title( $postId );
$output .= '</div>';
endwhile;
$output .= '</div>';
return $output;