Skip to content

Instantly share code, notes, and snippets.

@richyrb00
Created October 4, 2016 00:15
Show Gist options
  • Save richyrb00/877c1aa9ee42072f332297ab1c206977 to your computer and use it in GitHub Desktop.
Save richyrb00/877c1aa9ee42072f332297ab1c206977 to your computer and use it in GitHub Desktop.
8 item post loop layout in Wordpress
<?php
/*
Template Name: Homepage
*/
?>
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="articles">
<div class="row">
<?php
$postCount = 1;
// WP_Query arguments
$args = array (
'post_type' => array( 'post' ),
'has_password' => false,
'posts_per_page' => '8',
'order' => 'DESC',
'orderby' => 'none',
);
// The Query
$homepage_posts = new WP_Query( $args );
$postCount = 1;
// The Loop
if ( $homepage_posts->have_posts() ) {
while ( $homepage_posts->have_posts() ) {
$homepage_posts->the_post(); ?>
<?php if ( ($postCount == 1) || ($postCount == 5) ) : ?>
<article id="post-<?php echo $postCount ?>" class="col-xs-12 loop-article full-width-article">
<div class="row">
<div class="col-sm-6 col-sm-push-6 col-md-8 col-md-push-4 col-lg-8 col-lg-push-4 article-feature-img" style="background:url('<?php the_post_thumbnail_url( "feature-col-8" ); ?>');">
</div>
<div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-8 col-lg-4 col-lg-pull-8 article-content">
<header>
<div class="page-header">
<h2 class="page-title h3" itemprop="headline"><?php the_title(); ?></h2>
<meta>By <?php the_author(); ?> - <?php the_date(); ?></meta>
</div>
</header>
<section>
<div class="hidden-xs"><?php echo content(25); ?></div>
<a href="<?php the_permalink(); ?>" class="more-link" title="Read '.get_the_title($post->ID).'">Read more</a>
</section>
<footer>
</footer>
</div>
</article>
<?php else : ?>
<article id="post-<?php echo $postCount ?>" class="col-xs-12 col-sm-6 col-md-4 col-lg-4 loop-article third-width-article">
<div class="row">
<div class="col-xs-12 article-feature-img" style="background:url('<?php the_post_thumbnail_url( "feature-thumb-std" ); ?>');">
</div>
<div class="col-xs-12 article-content">
<header>
<div class="page-header">
<h2 class="page-title h3" itemprop="headline"><?php the_title(); ?></h2>
<meta>By <?php the_author(); ?> - <?php the_date(); ?></meta>
</div>
</header>
<section>
<div class="hidden-xs"><?php echo content(25); ?></div>
<a href="<?php the_permalink(); ?>" class="more-link" title="Read '.get_the_title($post->ID).'">Read more</a>
</section>
<footer>
</footer>
</div>
</article>
<?php endif; ?>
<?php $postCount++; ?>
<?php }
} else { ?>
// no posts found
<?php
}
// Restore original Post Data
wp_reset_postdata();
// end post loop
?>
</div><!-- end row //-->
</div><!-- post articles //-->
<?php endwhile; ?>
<?php else : ?>
<article id="post-not-found">
<header>
<h1><?php _e("Not Found", "rbtv"); ?></h1>
</header>
<section class="post_content">
<p><?php _e("Sorry, but the requested resource was not found on this site.", "wpbootstrap"); ?></p>
</section>
<footer>
</footer>
</article>
<?php endif; ?>
<?php get_footer(); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment