Posts preview in 3 columns

[mrcodefinger]

Hi,
does anyone allready changed the loop to show posts previews in 3 columns and after 3 posts in a new row etc...?
I am grateful for every hint
greetz
musicgabser

[dantahoua]

You can use data-equalizer data-options="equalize_on_stack: true" on the main row containing your post and each post must have data-equalizer-watch class="column small-12 medium-4 text-center"...

[mrcodefinger]

Yes, thanks but how to split the php-part that I get 15 post previews among themselves split into three?
What I want is this:
1 2 3
4 5 6
7 8 9 ...
And not:
1 4 7
2 5 8
3 6 9
I hope it's understandable
greetz and thanks in advance
musicgabser

[mrcodefinger]

Hi,
I approach the target:

     <div class="large-4 small-12 columns" id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header>
    <h1><span>"><?php the_title(); ?></span></h1>
    <?php FoundationPress_entry_meta(); ?>
    </header> <div class="entry-content">
    <?php the_content(__('Continue reading...', 'FoundationPress')); ?>
    </div>
    <footer>
    <?php $tag = get_the_tags(); if (!$tag) { } else { ?><p><?php the_tags(); ?></p><?php
    } ?>
    </footer>

But how do I set a limit to 15 posts and then a pagination?

Greetz and thanks in advance
musicgabser

[FlatspinZA]

I got bored and decided to solve your problem - being laid up in bed for two weeks with a knee injury will do that for a person.

<?php
/*
Template Name: Custom
*/
get_header(); ?>


<?php 
// the query
// WP_Query arguments
$args = array (
    'post_type'              => 'post',
    'post_status'            => 'publish',
    'posts_per_page'         => 15,
);

$the_query = new WP_Query( $args );
 ?>

<?php if ( $the_query->have_posts() ) : ?>
    <!-- the loop -->
<?php $block=0; ?>
    <?php while (( $the_query->have_posts() ) and ($block < 15)) : $the_query->the_post();
 if ($block==0) {
     echo '<div class="row" data-equalizer>';
        }
    if (is_int($block/3)){
 echo '</div>';
 echo '<div class="row" data-equalizer>'   ;
 echo '<div class="small-12 medium-4 large-4 columns">';
 echo '<div class="panel" data-equalizer-watch>';?>
        <h4><a href="<?php  the_permalink();?>"><?php the_title(); ?></a></h4>
    <?php the_excerpt();
     echo '</div>';
     echo '</div>';
} 
else {
  echo '<div class="small-12 medium-4 large-4 columns">';
 echo '<div class="panel" data-equalizer-watch>';  ?>
        <h4><a href="<?php  the_permalink();?>"><?php the_title(); ?></a></h4>
    <?php the_excerpt();
  echo '</div>';
 echo '</div>'; 
}
?>
    <?php $block++;
 endwhile; ?>
    <!-- end of the loop -->

    <!-- pagination here -->

    <?php wp_reset_postdata(); ?>

<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>


<?php get_footer(); ?>

I took code from multiple sources, and I really would like to credit all the wonderful people out there that take the time to pass their genius on, but I have no clue where to begin.

There is an issue with the number of blog posts being displayed - if you set the "Blog pages show at most" value in the 'Reading' settings of the backend to anything less than your desired result, the number of post previews shown will equal the value set. This is why I included "posts_per_page" in the arguments. I am not sure how this will affect the main blog display if included in index.php - I created a custom page for this exercise.

The code separation between PHP & HTML is very messy, I don't care. :P I am sure you can work out what you can do to improve it. ;)

[olefredrik]

👍

[mrcodefinger]

Thanks a lot!!!

[TriumphantToast]

This is awesome - however I notice if I try to plug in pagination at the bottom it doesn't display. Any suggestions how to get that to work?

I'm using the original:

<?php if ( function_exists('FoundationPress_pagination') ) { FoundationPress_pagination(); } else if ( is_paged() ) { ?>
    <nav id="post-nav">
        <div class="post-previous"><?php next_posts_link( __( '&larr; Older posts', 'FoundationPress' ) ); ?></div>
        <div class="post-next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'FoundationPress' ) ); ?></div>
    </nav>
<?php } ?>

And I placed it right where you have

Thanks for the help!
J

[FlatspinZA]

Hi, the pagination function is part of the main WordPress loop, it won't get called with my query.

Excuse the 'pagination here' thing.

For instance, if you inserted my query at the bottom of your index.php page, and then called the pagination function as you have it, it works because the main WordPress loop has already been initialised.

Someone correct me if my understanding is not what it should be.

[TriumphantToast]

Thanks for the quick response! So, if I reference the standard loop prior to your query then it should work?

Sent from my iPhone
Please ignore typos

On Mar 31, 2015, at 11:54 AM, FlatspinZA notifications@github.com wrote:

Hi, the pagination function is part of the main WordPress loop, it won't get called with my query.

Excuse the 'pagination here' thing.

For instance, if you inserted my query at the bottom of your index.php page, and then called the pagination function as you have it, it works because the main WordPress loop has already been initialised.

Someone correct me if my understanding is not what it should be.

—
Reply to this email directly or view it on GitHub.

[FlatspinZA]

Yes, the main WordPress loop just needs to be initialised on the same page.

[TriumphantToast]

I'm sorry, but I'm having a hard time getting this to work. Is there any way, when you have some time, you'd be able to post an example of this for me?

Basically all I'm trying to do is create a blog template that looks like the awesome one you provided, but will also maintain the pagination function (or any sort of pagination).

I tried modifying the index.php like you suggested but it just doesn't seem to work. I'm sure it's operator error.

Thank you so much for all of your help.

[FlatspinZA]

No problem, I will post something for you in the morning when I get back from work.

[TriumphantToast]

Great. Thanks so much! I owe you a beer :)

[TriumphantToast]

Quick update:

I was able to figure out the pagination issue, here's my new version in case anyone else runs into the same issue. I've also added the featured image within the block grid. Basically, this will give you a page template that you can assign as a "Blog" page, which will show a grid layout of your latest posts.

<?php get_header();
/*
Template Name: Blog Page
*/
 ?>
 <?php get_header(); ?>
<div class="row">
  <div class="small-12 large-8 columns" role="main">
  <?php if ( have_posts() ) : ?>

  <?php 
// the query
// WP_Query arguments
$args = array (
    'post_type'              => 'post',
    'post_status'            => 'publish',
    'posts_per_page'         => 10,
    'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ),
);

query_posts( $args );

 ?>

    <?php do_action('foundationPress_before_content'); ?>
            <?php $block=0; ?>
              <?php while (( have_posts() ) and ($block < 10)) : the_post();
           if ($block==0) {
               echo '<div class="row" data-equalizer>';
                  }
              if (is_int($block/2)){
           echo '</div>';
           echo '<div class="row" data-equalizer>'   ;
           echo '<div class="small-12 medium-6 large-6 columns">';
           echo '<div class="panel" data-equalizer-watch>';?>
                 <?php 
                  if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                    echo'<a href="', the_permalink() ,'">';
                    the_post_thumbnail();
                  } 
                ?>
                  <h4><?php the_title(); ?></a></h4>
                  <div class="post-meta">By <?php the_author_posts_link(); ?><br />Posted on <?php the_time('F jS, Y') ?></div>

              <?php the_excerpt();
               echo '</div>';
               echo '</div>';
          } 
          else {
            echo '<div class="small-12 medium-6 large-6 columns">';
           echo '<div class="panel" data-equalizer-watch>';  ?>
                 <?php 
                  if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                     echo'<a href="', the_permalink() ,'">';
                       the_post_thumbnail();
                  } 
                ?>
                  <h4><?php the_title(); ?></a></h4>
                  <div class="post-meta">By <?php the_author_posts_link(); ?><br />Posted on <?php the_time('F jS, Y') ?></div>
              <?php the_excerpt();
            echo '</div>';
           echo '</div>'; 
          }
          ?>
              <?php $block++;
           endwhile;
           ?>
    <?php else : ?>
      <?php get_template_part( 'content', 'none' ); ?>

    <?php do_action('foundationPress_before_pagination'); ?>

  <?php endif;?>



  <?php if ( function_exists('FoundationPress_pagination') ) { FoundationPress_pagination(); } else if ( is_paged() ) { ?>
    <nav id="post-nav">
      <div class="post-previous"><?php next_posts_link( __( '&larr; Older posts', 'FoundationPress' ) ); ?></div>
      <div class="post-next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'FoundationPress' ) ); ?></div>
    </nav>
  <?php 

  } ?>

  <?php do_action('foundationPress_after_content'); ?>
  </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

[FlatspinZA]

Cool, sorry I didn't get around to it this morning - had to help a mate sort out his PC & then I was too buggered to even think about this.

Just one thing - the $block variable should be changed to equal the number of 'posts_per_page' argument.

I am glad you worked it out.

[TriumphantToast]

Thanks for catching that.. I updated it. Thanks again for the help!

[FlatspinZA]

If you leave the ""full" parameter on the post thumbnail, instead of the 260,260 dimensions you specified, the image remains responsive, always filling the available space in the block, and always centred.

[TriumphantToast]

I fixed that above. Thanks!

[mrcodefinger]

Hi,
I unfortunately got back to my Problem. I modified jon-weiss code like this:

<?php get_header();
/*
Template Name: Blog Page
*/
 ?>
 <?php get_header(); ?>
<div class="row">
  <div class="small-12 large-9 columns" role="main">
  <?php if ( have_posts() ) : ?>

  <?php
// the query
// WP_Query arguments
$args = array (
    'post_type'              => 'post',
    'post_status'            => 'publish',
    'posts_per_page'         => 6,
    'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ),
);

query_posts( $args );

 ?>

    <?php do_action('foundationPress_before_content'); ?>
            <?php $block=0; ?>
              <?php while (( have_posts() ) and ($block < 6)) : the_post();
           if ($block==0) {
               echo '<div class="row" data-equalizer>';
                  }
              if (is_int($block/2)){
           echo '</div>';
           echo '<div class="row" data-equalizer>'   ;
           echo '<div class="small-12 medium-6 large-6 columns" data-equalizer-watch>';?>
                 <?php
                  if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                    echo'<a href="', the_permalink() ,'">';
                    the_post_thumbnail();
                  }
                ?>
                  <h4><?php the_title(); ?></a></h4>

              <?php
               echo '</div>';
          }
          else {
            echo '<div class="small-12 medium-6 large-6 columns">';?>
                 <?php
                  if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                     echo'<a href="', the_permalink() ,'">';
                       the_post_thumbnail();
                  }
                ?>
                  <h4><?php the_title(); ?></a></h4>
              <?php
            echo '</div>';
          }
 ?>
              <?php $block++;
           endwhile;
           ?>
    <?php else : ?>
      <?php get_template_part( 'content', 'none' ); ?>

    <?php do_action('foundationPress_before_pagination'); ?>

  <?php endif;?>



  <?php if ( function_exists('FoundationPress_pagination') ) { FoundationPress_pagination(); } else if ( is_paged() ) { ?>
    <nav id="post-nav">
      <div class="post-previous"><?php next_posts_link( __( '&larr; Older posts', 'FoundationPress' ) ); ?></div>
      <div class="post-next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'FoundationPress' ) ); ?></div>
    </nav>
  <?php

  } ?>

  <?php do_action('foundationPress_after_content'); ?>
  </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

But pagination is not working. Any idea?
I'm thankfull for every hint.

Greetz and thanks in advance
musicgabser

[thebrownfox]

Hey, I've spent some time figuring out how to solve this. I had 21 dummy posts and wanted to show only 4 at the same time, but /page/3/ was always File not found. They didn't show, but WP loaded them nowhere. Settings > Reading > Number of displayed posts (default 10)