WordPress.org

Forums

How to get thumbnails from the latest 3 posts (14 posts)

  1. henballs
    Member
    Posted 2 years ago #

    I'm building a theme and at the top of my blog, I want the first three blog posts to be this:

    I have 3 empty <div>'s and would like to insert the 3 thumbnails & their titles into those <div>'s

    When a user clicks the div, it goes to the blog post itself.

    How do I do this with php?

  2. 1-jah
    Member
    Posted 2 years ago #

    This is a good question that I would like to know too. If I had to take a stab at it, maybe placing the tags/command something like %feature image% followed by the bookmark blog command? I'm still fairly new to the coding.

  3. henballs
    Member
    Posted 2 years ago #

    I've tried this, it looks reasonable. Not the images aren't appearing.

    <?php
    $the_query = new WP_Query( 'posts_per_page=3');
    while ( $the_query->have_posts() ) : $the_query->the_post();
    ?>
    <div id="box<?php echo $the_query->current_post+1; ?>">
    <?php
    if ( has_post_thumbnail($post->ID) ) { // check if the post has a Post Thumbnail assigned to it.
      the_post_thumbnail($post->ID);
    }
    ?>
    <?php the_title(); ?>
    </div>
    <?php endwhile; ?>
  4. 1-jah
    Member
    Posted 2 years ago #

    Yea. Like I said, I'm not sure either. I'm still learning the php, for some reason there's something not making sense. It looks good, but off. I can't pin point though. Sorry I can't help, but I would love to know the answer too. It's valuable coding.

  5. Michael
    Forum Moderator
    Posted 2 years ago #

    quite a good start ;-)

    you can target just posts with featured images by adding the 'meta_key' parameter to the query;

    <?php
    $the_query = new WP_Query( array('posts_per_page' => 3, 'meta_key' => '_thumbnail_id' ) );
    while ( $the_query->have_posts() ) : $the_query->the_post();
    ?>
    <div id="box<?php echo $the_query->current_post+1; ?>">
    <a href="<?php the_permalink(); ?>">
    <?php the_post_thumbnail(); ?>
    <?php the_title(); ?>
    </a>
    </div>
    <?php endwhile; wp_reset_postdata(); ?>

    the_post_thumbnail() does not take the ID as an argument, but the size; http://codex.wordpress.org/Function_Reference/the_post_thumbnail

    also no need to check for a thumbnail; no thumbnail, no post, no output.

  6. henballs
    Member
    Posted 2 years ago #

    Hi alchymyth. Thanks for the help, I'm completely new first time to php and wordpress.

    I currently have the following in my index.php. I'm unable to load just the 3 latest thumbnails. What the following code loads is my entire 3 blog posts.. I started to build a theme from scratch with the base files.

    Is my php code suppose to be written elsewhere?

    <div class="container">
        <div class="main-content">
          <?php if (have_posts()) : ?>
          <?php while (have_posts()) : the_post(); ?>
            <div <?php post_class() ?>>
              <h2>
                <a href="<?php the_permalink() ?>">
                  <?php the_title(); ?>
                </a>
              </h2>
    
              <?php
              $the_query = new WP_Query( array('posts_per_page' => 3, 'meta_key' => '_thumbnail_id' ) );
              while ( $the_query->have_posts() ) : $the_query->the_post();
              ?>
              <div id="box<?php echo $the_query->current_post+1; ?>">
              <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail(); ?>
              <?php the_title(); ?>
              </a>
              </div>
              <?php endwhile; wp_reset_postdata(); ?>
    
              <?php the_content(''); ?>
            </div>
          <?php endwhile; ?>
          <?php endif; ?>
        </div>
        <div class="sidebar">
    
        </div>
    </div>
  7. 1-jah
    Member
    Posted 2 years ago #

    Nice. Thanks alchymyth. Every time I came here for answers, you seem to provide quite a bit. I just join on wp.org.

  8. henballs
    Member
    Posted 2 years ago #

    Is my snippet of PHP code in the wrong place? What am I missing as a first time WP / PHP Developer?

  9. Michael
    Forum Moderator
    Posted 2 years ago #

    at the top of my blog

    I interprete that as before the genral loop (?)

    in your latest posted code, the WP_Query() would be run for each post in the blog; possibly move it to before the line with <?php if (have_posts()) : ?>

    I'm unable to load just the 3 latest thumbnails. What the following code loads is my entire 3 blog posts..

    do any of your posts have the 'featured image' set?
    http://codex.wordpress.org/Post_Thumbnails

    what would show if you run just the normal loop, with the added line <?php the_post_thumbnail(); ?> before 'the_content()':

    <div class="container">
        <div class="main-content">
          <?php if (have_posts()) : ?>
          <?php while (have_posts()) : the_post(); ?>
            <div <?php post_class() ?>>
              <h2>
                <a href="<?php the_permalink() ?>">
                  <?php the_title(); ?>
                </a>
              </h2>
              <?php the_content(''); ?>
    <?php the_post_thumbnail(); ?>
            </div>
          <?php endwhile; ?>
          <?php endif; ?>
        </div>
        <div class="sidebar">
    
        </div>
    </div>
  10. henballs
    Member
    Posted 2 years ago #

    Yeah, you interpreted it correct. I would like my blog's first 3 posts to be thumbnails that point to the actual post. And the following posts to be regular snippets of text that point to their full sized posts.

    I have <?php add_theme_support( 'post-thumbnails' ); ?> set in my functions.php file.

    I get the same results (shows title, image, full body of text) if I used the code you posted:

    <div class="container">
        <div class="main-content">
          <?php if (have_posts()) : ?>
          <?php while (have_posts()) : the_post(); ?>
            <div <?php post_class() ?>>
              <h2>
                <a href="<?php the_permalink() ?>">
                  <?php the_title(); ?>
                </a>
              </h2>
              <?php the_content(''); ?>
    <?php the_post_thumbnail(); ?>
            </div>
          <?php endwhile; ?>
          <?php endif; ?>
        </div>
        <div class="sidebar">
    
        </div>
    </div>
  11. Michael
    Forum Moderator
    Posted 2 years ago #

    I have <?php add_theme_support( 'post-thumbnails' ); ?> set in my functions.php file.

    ok - does the 'featured image' field show when you edit a post - on the right column, below the 'publish' and 'categories' etc fields?

    if not, click the 'screen options' tab near the top right, and tick 'Featured Image'; then scroll down to find the field.

    have you set the 'featured image' for the latest posts?

  12. henballs
    Member
    Posted 2 years ago #

    **

  13. Michael
    Forum Moderator
    Posted 2 years ago #

    as I said earlier, you need to pull your code out from the general loop;

    example:

    <div class="container">
        <div class="main-content">
    
              <?php
              $the_query = new WP_Query( array('posts_per_page' => 3, 'meta_key' => '_thumbnail_id' ) );
              while ( $the_query->have_posts() ) : $the_query->the_post();
              ?>
              <div id="box<?php echo $the_query->current_post+1; ?>">
              <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail(); ?>
              <?php the_title(); ?>
              </a>
              </div>
              <?php endwhile; wp_reset_postdata(); ?>
    
          <?php if (have_posts()) : ?>
          <?php while (have_posts()) : the_post(); ?>
            <div <?php post_class() ?>>
              <h2>
                <a href="<?php the_permalink() ?>">
                  <?php the_title(); ?>
                </a>
              </h2>
              <?php the_content(''); ?>
            </div>
          <?php endwhile; ?>
          <?php endif; ?>
        </div>
        <div class="sidebar">
      </div>
    </div>
  14. henballs
    Member
    Posted 2 years ago #

    Thanks alchymyth! It finally works. I'll need to go back and read some Docs on the loop, and what does and doesn't belong in there. Cheers.

Topic Closed

This topic has been closed to new replies.

About this Topic