Custom Shortcode Functions to List Category Posts with Post Thumbnail

I should have clarified further:

* Firstly, I know virtually nothing about PHP coding and have jumped in the deep end on this.

* The result I am trying to achieve is to use this custom function to REPLACE a plugin so that I can delete the plugin and reduce the loading times on my site.

* Currently the above code is pulling a featured image that is not attached to/associated with any of the posts in the listing produced.

* When I tried changing the code to $featured_image = the_post_thumbnail( array( 'class' => 'alignleft' ) );
it then produced a page with all the right post thumbnails but they were all clumped together at the top of the page.

* The Code is working correctly in listing the posts but it is not quite positioning the images where they should be placed when I use $featured_image = the_post_thumbnail( array( 'class' => 'alignleft' ) );
It looks as though they are being positioned where they would be if they were rendering on a post as opposed to within a listing of results on a page.

* I need the $featured_image to display adjacent to their associated excerpts.

What am I missing in understanding?

• This reply was modified 3 years, 1 month ago by clairedelune.
• This reply was modified 3 years, 1 month ago by clairedelune.

For posterity, in case anyone else needs a similar solution, I found an updated version of the script that is written to work better in the blocks system:
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-from-a-specific-category-in-wordpress/

So, using the Code Snippets plugin, I modified the code to suit my objective including with properly positioned post featured images:

function faq_postsbycategory() {
// the query
$the_query = new WP_Query( array(
    'category_name' => 'faq',
    'posts_per_page' => 10,
	'order' => 'ASC',
	'orderby' => 'link'
) ); 
  
// The Loop
if ( $the_query->have_posts() ) {
    $string .= '<div class="postsbycategory widget_recent_entries">';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
            if ( has_post_thumbnail() ) {
            $string .= '<p>';
            $string .= '<b><a href="' . get_the_permalink() . '"rel="bookmark">' . get_the_post_thumbnail($post_id, array( 200, 100) ) . get_the_title() . '</a></b><br><h7>Posted: ' . get_the_date() . '</h7><br>' . get_the_excerpt() . '</p>';
            }
		else {
            // if no featured image is found ADD EXCERPT CODING
            // $string .= '<p><a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_title() . '</a><br><h7>Posted: ' . get_the_date() . '</h7><br>' . get_the_excerpt() . '</p>';
            }
            }
    } else {
    // no posts found
}
$string .= '</div>';

return $string;

/* Restore original Post Data */
wp_reset_postdata();
}
// Add a shortcode
add_shortcode('faq-posts', 'faq_postsbycategory');

Here is the styling I have used:

.postsbycategory img {
float: left;
margin-left: 5px;
margin-right: 20px;
margin-top: 5px;
margin-bottom: 5px;
}

.postsbycategory p {
padding-bottom: 30px;
}

Lastly, as posted earlier, I enclosed the [faq-posts] shortcode within an additional <div></div> to be certain that everything is contained within its own discrete container.

Thank you again @bcworkz.

Again for posterity, additional CSS to hide the unnecessary / unwanted display of comments.

.page-id-9999 #comments {
display:none;
}

Replace the number 9999 in the page-id- to your own page. Find the page ID per the instructions here: 8 Proper Ways to Hide Elements on Your Website With CSS (2021)

Happy coding.