Display latest posts with custom size thumbnails in WordPress


Display-Latest-Post-With-Thumbnail-

Latest posts do a great job of promoting your blog through your websites homepage. It is easy to display latest posts, you can copy this piece of code and paste it into your theme. It displays the latest posts in an unordered list but can be adapted to display however you like. The following pieces of code display the latest posts without and with the post thumbnail.

Without Thumbnail

<ul>
<!-- LOOP START -->
<?php $the_query = new WP_Query( 'showposts=3' ); ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <!-- THIS DISPLAYS THE POST TITLE AS A LINK TO THE MAIN POST -->
      <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
      <!-- THIS DISPLAYS THE EXCERPT OF THE POST -->
      <li><?php the_excerpt(); ?></li>
      <!-- READ MORE LINK -->
      <li><a href="<?php the_permalink() ?>">Read More...</a></li>
    <?php endwhile;?>
<!-- LOOP FINNISH -->
</ul>

With Thumbnail

Images attract attention, so to include your post thumbnail is a good idea. This second snippet includes the post thumbnail. With a custom size of 100 x 100, which can be customised  (WordPress will always keep your thumbnails proportional using this method.). For more information on displaying thumbnails in WordPress it is a good idea to take a look at the codex here . Please feel free to contact us with any questions you may have.

<ul>
<!-- LOOP START -->
<?php $the_query = new WP_Query( 'showposts=3' ); ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <!-- THIS DISPLAYS THE POST THUMBNAIL, The array allows the image to has a custom size but is always kept proportional -->
      <li> <?php the_post_thumbnail( array(100,100) );?></li>
      <!-- THIS DISPLAYS THE POST TITLE AS A LINK TO THE MAIN POST -->
      <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
      <!-- THIS DISPLAYS THE EXCERPT OF THE POST -->
      <li><?php the_excerpt(); ?></li>
      <!-- READ MORE LINK -->
      <li><a href="<?php the_permalink() ?>">Read More...</a></li>
    <?php endwhile;?>
<!-- LOOP FINNISH -->
</ul>
Advertisements

COMMENT PLEASE..!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s