Shortcode with loop stacks output

Question

I found some shortcode to display a custom post type, but it's not display how I envisioned.

Originally the shortcode only added the title from my custom post type, but I modified it to also show the content...which works, but it groups the content together then displays the titles together.

I thought it would display them title1, content1 then title2, content2

What it's doing is stacking them content1, content2 then title1, title2

Myfunctions.php looks like:

add_shortcode( 'faqs', 'faq' );
function faq() {
    $query = new WP_Query(array(
        'post_type' => 'faqs'
    ));
    while ($query->have_posts()) { 
        $query->the_post();
        $output = $output.'<h2>'.get_the_title().'</h2>';
        $output = $output.the_content();
    }
    wp_reset_postdata();
    return $output;
}

I feel like the code is pretty close, what do I need to change to get it to display how I expected?

The live example is at: http://joshrodg.com/rbtest/faq/

Any help is appreciated!

Thanks,
Josh

Answer 1

Ok...So, I was able to find an example that helped:

function faq() {
    $output = '';
    $query = new WP_Query( 'post_type=faqs' );
    if ( $query -> have_posts() ) :
        while ( $query -> have_posts() ) : $query -> the_post();
            $output .= '<h3>'.get_the_title().'</h3>';
            $output .= '<p>'.get_the_content().'</p>';
        endwhile;
    endif;
    wp_reset_postdata();
    return $output;
}
add_shortcode( 'faqs', 'faq' );

This puts everything in the right order and wraps the title tags in an <h2> tags. If I didn't do something right, or someone has a better suggested solution, please let me know!

** Minor correction to using the_title(); and the_content(); is get_the_title(); and get_the_content(); because if you don't use those and try and put tags around them the tags show up underneath the text...the issue went away with get_the_title(); and get_the_content();

Thanks,
Josh