Adding recent Wordpress post, with featured image and excerpts to HTML site

Question

I have researched this question on several forums and have found the most relevant answer here: Add "Recent Posts" from a wordpress blog to a html static page.

What I am looking for is an expansion upon this answer that will allow me to include a featured image and post_excerpt. I have searched Google and this forum, to no avail. Any help that you can provide would be greatly appreciated.

My goal is to include an RSS-type feed on my HTML site drawn from my blog, which resides in a sub-directory of my site.

The aforementioned PHP snippet works perfect for displaying and linking to the most recent posts, however, I would like to display both a featured post image and a post excerpt within the feed.

5150 Design 5150 Design · Accepted Answer · 2017-05-15T23:37:57

I have found an answer to this question and would like to share it with the community. Hopefully others will find it useful.

Here is the code we used to produce the desired effect:

<section class="feed float-right">
    <h3>The Latest From Our Blog</h3>
<?php

include('blog/wp-load.php'); // Blog path

$args = array('showposts' => 4);

$the_query = new WP_Query( $args );

if( $the_query->have_posts() ): 

echo '<ul>';

while ( $the_query->have_posts()) : $the_query->the_post(); 
    echo '<li><a href="'.get_the_permalink().'">'.get_the_post_thumbnail().' '.get_the_title().'</a> <p>'.get_the_excerpt($limit).'</p></li>';
endwhile; 

echo '</ul>';

endif; 

wp_reset_query(); 

?>

</section>

The above code is placed within the HTML or PHP page where you want the feed to display. We used sections for this implementation, but divs will work as well. The styling information was as follows:

.feed {
  width: 100%;
  height: 350;
  padding-bottom: 25px;
}

.feed h3 {
  width: 90%;
  margin: 20px auto;
  padding-left: 35px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 23px;
  font-weight: 400;
  color: #fff;
}

.feed ul {
  width: 90%;
  margin: auto;
  list-style: none;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

.feed ul li {
  position: relative;
  float: left;
  width: 45%;
  margin-bottom: 30px!important;
  margin-right: 5%;
}

.feed ul li a {
  color: inherit;
}

.feed ul li p {
  line-height: 18px;
}

.attachment-post-thumbnail {
  position: relative;
  float: left;
  width: 140px!important;
  height: 90px!important;
  margin: auto 30px 30px auto;
  border-radius: 4px;
}

You can view the end result here: https://www.moverspalmbeachcounty.com/

Adding recent Wordpress post, with featured image and excerpts to HTML site

1 Answers