Having trouble with customizing blog posts on the home page

I can’t seem to get this right. I am trying to load in the 6 most recent blog posts (2 rows, 3 columns, responsive). The post title would appear on top of the thumbnail image. Here is the design example (screenshot): https://i.imgur.com/3WQHB8O.png

My original try was doing this:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”containPost”>
<img src=”<?php the_post_thumbnail(); ?>” style=”width:100%;”>
<div class=”bottom-left”>
<?php the_title(); ?>
</div>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
<div class=”clear”></div>

Which I’ve used similarly on a different site, but never on the homepage. While i was researching why this code wasn’t grabbing the title and thumbnail from the posts but rather from the homepage i discovered the info below.

I found an answer here that I felt was similar and tried it, but it’s not working correctly and I am not sure how to fix it:

<!– Blog Post: 6 Newest –>
<?php
$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => 6
);
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {?>
<div class=”containPost” id=”response”>
<?php
if ( has_post_thumbnail()) {
echo ‘<img src=”‘.the_post_thumbnail();’ />’;
} else {
echo ‘<img src=”‘.get_bloginfo(‘stylesheet_directory’).’/images/global/thumby.jpg” />’;
} ?>

<div class=”bottom-left”>
<?php
$the_query->the_post();
echo ‘<h3>’ . get_the_title() . ‘</h3>’;
?>
</div>
</div>
<?php
}
}
/* Restore original Post Data */
wp_reset_postdata();
?>
<div class=”clear”></div>

This is how the second code ends up looking, where the post titles are not on the correct images and everything looks messed up: https://i.imgur.com/6KgKBQi.png

If anyone could help me I would greatly appreciate it.

Read more here:: Having trouble with customizing blog posts on the home page

Leave a Reply

Your email address will not be published. Required fields are marked *