Shortcode with loop stacks output

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0