Adding Recent Wordpress Post, With Featured Image And Excerpts To Html Site

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 fo

Solution 1:

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="feedfloat-right">
    <h3>TheLatestFromOurBlog</h3>
<?phpinclude('blog/wp-load.php'); // Blogpath

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

$the_query = newWP_Query( $args );

if( $the_query->have_posts() ): 

echo '<ul>';

while ( $the_query->have_posts()) : $the_query->the_post(); 
    echo '<li><ahref="'.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;
}

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

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

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

.feedullia {
  color: inherit;
}

.feedullip {
  line-height: 18px;
}

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

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