Posted in wordpress
5737
6:20 am, August 31, 2018
 

wordpress show posts loop with feature image thumbnail

this is surprisingly hard to find code that lists all blog posts in a template with the feature image that does not use an additional plugin. you shouldnt need a plugin to do this as its already built in to wordpress.

here is a template which includes a loop. just add the following code to a template file in your theme and create a page that uses this theme to show a list of blog posts with featured image, title and post exerpt with a link to the full post.

PHP

<?php /* Template Name: Blog Posts */ get_header(); ?>

<?php 
$args = array( 'posts_per_page' => '10' );
$recent_posts = new WP_Query($args);
while( $recent_posts->have_posts() ) :  
    $recent_posts->the_post() ?>
    <div class='post-list-item'>
        <a href="<?php echo get_permalink() ?>"><?php the_title() ?></a> 
        <?php if ( has_post_thumbnail() ) : ?>
            <?php the_post_thumbnail('thumbnail') ?>
        <?php endif ?>
		<?php the_excerpt(); ?>
    </div>
<?php endwhile; ?>
<?php wp_reset_postdata();?> 

<?php get_sidebar(); ?>

<?php get_footer(); ?>
here is another version of this, using foundation for the row and grid items to make it work nicer on responsive

<?php /* Template Name: Blog Posts */ get_header(); ?>

<div class='row'> 
<div class='large-12 columns'>

<?php 
$args = array( 'posts_per_page' => '10' );
$recent_posts = new WP_Query($args);
while( $recent_posts->have_posts() ) :  
    $recent_posts->the_post() ?>

<div class='row'>
    <div class='medium-2 columns'>
        <?php if ( has_post_thumbnail() ) : ?>
            <?php the_post_thumbnail('thumbnail') ?>
        <?php endif ?>
	</div>
    <div class='medium-10 columns'>
        <a href="<?php echo get_permalink() ?>"><?php the_title() ?></a> 

		<?php the_excerpt(); ?>
	</div>
</div>

<?php endwhile; ?>
<?php wp_reset_postdata();?> 

</div>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

View Statistics
This Week
218
This Month
943
This Year
1780

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in wordpress
Wordpress Use the settings API Wordpress add a sub menu to your plugin Disable the ACF Warning message in wordpress dashboard load a page as a menu in wordpress extract a wordpress menu using its id Wordpress template with fixed sidebar in flex add a page template in a wordpress theme wordpress jquery find and replace option text value wordpress block grid code display a subnav for the current wordpress page using wp_nav_menu to show a custom menu in wordpress get and show the featured image on a wordpress page template link to a custom style sheet in your theme directory wordpress wordpress show page content on template file show post content on template wordpress wordpress add a template file to your theme fix for wordpress requesting ftp login details installing plugins wordpress category list sorting custom adding pagination to custom wp_query add paging to wp list query list items from blog and filter by category name match a category id in wordpress and then add styles just for that id get the current post id from content.php wordpress get the current category id name and slug get the wordpress category name from a category id wordpress adding post custom field meta and displaying it on you template getting the site title vs the page name wordpress get home url add a tag to wordpress header from a plugin list items matching a category title wp register plugin settings admin Create a admin main wordpress custom menu item wordpress show the parent page title with fallback to title Add a post date to your custom wordpress post listing wordpress get page content to display on template page get the stylesheet directory in wordpress theme wordpress register enqueue javascript require jquery wordpress show the post content for use in a template wordpress show posts loop with feature image thumbnail wordpress get site url wordpress advanced custom fields replace shortcode for site url with blog url wordpress check home and not home for banners and things wordpress use a shortcode in php gravity forms wordpress include jquery in theme functions wordpress enqueue slicknav and slick slider wordpress show the page content for use in a template wordpress change domain in config, wordpress domain config wordpress get template directory
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
“If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes it worse, but over time it does calm, and when it does, there’s room to hear more subtle things. You see so much more than you could see before. It’s a discipline; you have to practice it.”
Steve Jobs
Random CSS Property

column-width

The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.
column-width css reference