php - 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): .jpg

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: .jpg

If anyone could help me I would greatly appreciate it.

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.sstatic/Qptk7.jpg

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.sstatic/GAT9G.jpg

If anyone could help me I would greatly appreciate it.

• php
• posts
• post-thumbnails
• homepage

Share Improve this question asked Mar 14, 2019 at 17:01 ZerojjcZerojjc 1 5

• 2 You need to move your $the_query->the_post(); call up above <div class="containPost" id="response"> – mrben522 Commented Mar 14, 2019 at 17:10
• 1 the_post_thumbnail() displays the whole thumbnail <img> tag, so it should not be inside the src attribute. – Max Yudin Commented Mar 14, 2019 at 18:41
• @MaxYudin: I do see there is still an issue with the_post_thumbnail() but I am unsure what you mean? i.imgur/vKfUQVx.png – Zerojjc Commented Mar 14, 2019 at 18:52
• Instead of echo '<img src="'.the_post_thumbnail().' />'; use just the_post_thumbnail();. See the Code Reference. Also turn on debugging, because you have PHP syntax errors there and know nothing about them. – Max Yudin Commented Mar 14, 2019 at 19:10
• Thanks @MaxYudin. I now realize that I had the_post_thumbnail() done correctly on a different project, but somehow i confused myself when doing this one. I appreciate your response. – Zerojjc Commented Mar 14, 2019 at 20:23

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

As @mrben522 suggestion (in a comment to question), the resulting code should be

<!-- 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() ) {
       $the_query->the_post();   // put it here

    ?>
    <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>