Skip to content

Instantly share code, notes, and snippets.

@EastSideCode
Created May 10, 2018 20:21
Show Gist options
  • Save EastSideCode/1986214792e5752f47dd6986a54bb973 to your computer and use it in GitHub Desktop.
Save EastSideCode/1986214792e5752f47dd6986a54bb973 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment