blog-template.php

	<h1><?php the_title(); ?></h1>
<?php     $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;  
$query = new WP_Query( array('posts_per_page' => 5, 'paged' => $paged, 'orderby'=>'date','order'=>'DESC') );   
while ( $query->have_posts() ) : $query->the_post();  
	
	$hasPostThumb = '';
	if (has_post_thumbnail()){ 
	$hasPostThumb = true;	
	}
	?>
	
<div class="clearfix blog-row">
	<?php if ($hasPostThumb == true) {  //  if post has a thumbnail ?>
	
<div class="blog-archive-left">
<?php the_post_thumbnail(); ?>
</div> <!-- end blog archive left -->
<div class="blog-archive-right">
<h3 class="archive-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title() ?></a></h3>
<div class="archive-date"><?php echo get_the_date(); ?></div>

<div class="blog-excerpt">
<?php the_excerpt(); ?>

</div><!-- end excerpt -->

</div> <!-- end blog archive right -->
	<?php } 	
	else { // of post has no thumbnail
		?>
		<h3 class="archive-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title() ?></a></h3>
		<div class="archive-date"><?php echo get_the_date(); ?></div>

		<div class="blog-excerpt">
		<?php the_excerpt(); ?>
		</div><!-- end excerpt -->
	
	
	<?php } // end post with no thumbnail ?>
</div> <!-- end blog row -->

<?php
endwhile;  

// reset query  wp_reset_query();    
?>
	<div class="clearfix"></div>

                <?php if ($query->max_num_pages > 1) { // check if the max number of pages is greater than 1  ?>

                    <div class="clearfix prev-next-arrows">

                        <nav class="prev-next-posts">

                            <div class="next-posts-link">

                                <?php echo get_next_posts_link( 'Next Page &raquo;', $query->max_num_pages ); // display older posts link ?>

                            </div>

                            <div class="prev-posts-link">
                                <?php echo get_previous_posts_link( '&laquo; Previous Page' ); // display newer posts link ?>

                            </div>
                        </nav>

                    </div>

<?php } ?>
	
<?php // the CSS ?>

<style type="text/caa">

/* for blog */

.blog-row {
    margin-bottom: 50px;
}

.blog-archive-left {
    float: left;
    width: 27%;
}

.blog-archive-left img {
    max-width: 100%;
    height: auto;
}

.blog-archive-right {
    float: left;
    width: 71%;
    margin-left: 2%;
}

.archive-date {
    font-style: italic;
    color: #a1a1a1;
    font-size: 20px;
    margin-bottom: 5px;
}

.blog-row h3.archive-title {
    margin-top: 0;
    margin-bottom: 8px;
    padding-top: 0;
    padding-bottom: 0;
}

.blog-archive-left img {
    max-width: 100%;
    height: auto;
}

.prev-next-posts .next-posts-link {
    float: right;
}

body.page-template-blog-template .container {
margin-top: 100px;
}

.prev-next-arrows {
margin-bottom: 30px;
}

body.single #primary {
margin-top: 120px;
}



@media (max-width: 667px) {

.blog-archive-left, .blog-archive-right {
float: none;
width: 100%;
}

h3.archive-title {
line-height: 21px;
}

.blog-archive-right {
margin-left: 0;
margin-top: 10px;
}




} /* end media query */



</style>