I'd like to wrap every three posts in a new row (div) with a total of nine posts on a page. There's an empty row at the end. I thought this (I need to wrap every 4 wordpress posts in a div) would work, but I have more posts on pages 2, 3, 4, etc. Below is a simplified version of my code. $i = 1.
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="column">
</div>
<?php if ($i % 3 == 0 ) : ?>
</div> <!-- .row -->
<div class="row">
<?php endif; $i++; ?>
<?php endwhile; ?>
</div> <!-- .row -->
You can use get_next_post() to check whether next post exists or not.
<?php if ($i % 3 == 0 ) : ?>
</div> <!-- .row -->
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
<div class="row">
<?php endif; ?>
I used this post (https://www.nosegraze.com/display-wordpress-posts-2-3-columns/) to solve my problem.
$i = 0;
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( $i == 0 ) : ?>
<div class="row">
<?php endif; ?>
<div class="column">
</div> <!-- .column -->
<?php
$i++;
if( $i == 3 ) :
$i = 0; ?>
</div> <!-- .row -->
<?php endif; ?>
<?php endwhile; ?>
<?php if ( $i > 0 ) : ?>
</div> <!-- .row -->
<?php endif; ?>
Related
is this possible to make the post list like this in WordPress?
<div class="large-image">
<img src="http://example.com">
<h1>Title</h1>
</div>
<div class="post-row"><!-- this is not a loop -->
<div class="post-item"><!-- this is a loop -->
<img src="http://example.com">
<h1>Title</h1>
</div>
<div class="post-item"><!-- this is a loop -->
<img src="http://example.com">
<h1>Title</h1>
</div>
</div>
I have try with this code below, but the <div class="post-row"> always included in the loop.
<?php
if ( have_posts() ) : $post_count = 0;
while ( have_posts() ) : the_post();
if ( $post_count = 0 ) { ?>
<div class="large-image">
<img src="http://example.com">
<h1>Title</h1>
</div>
<?php } ?>
<div class"post-row">
<?php if ( $post_count > 0 ) { ?>
<div class="post-item"><!-- this is a loop -->
<img src="http://example.com">
<h1>Title</h1>
</div>
<?php } ?>
</div><!-- /post-row -->
<?php
endwhile
endif;
?>
What I wanted is <div class="post-row"> not looping.
I have try some answer in stackoverflow, but the post-row always looping.
Hope I get best answer.
You must move the post-row div above the while loop, you just missed placed it that's all
<?php if ( have_posts() ) : $post_count = 0;
if ( $post_count == 0 ) { ?>
<div class="large-image">
<img src="http://example.com">
<h1>Title</h1>
</div>
<?php } ?>
<div class"post-row">
<?php
while ( have_posts() ) : the_post();
if ( $post_count > 0 ) { ?>
<div class="post-item"><!-- this is a loop -->
<img src="http://example.com">
<h1>Title</h1>
</div>
<?php }
$post_count ++;
endwhile; ?>
</div><!-- /post-row -->
<?php endif; ?>
I am trying to make Wordpress loop with php modulus. The scenario is wrapping every 3 posts in a div. My script below is working perfectly, except I found an unused empty div at the last (from inspect element).
$loop_args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 6
);
$loop = new WP_Query( $loop_args );
<?php if( $loop->have_posts() ): ?>
<div class="row">
<?php $count = 0; ?>
<div class="col-md-6">
<?php while( $loop->have_posts() ) : $loop->the_post(); $count++; ?>
<?php if( $count % 3 == 0 ): ?>
<article class="post-content"><?php the_title();?></article>
</div> <!-- .col md 6 -->
<div class="col-md-6">
<?php else: ?>
<article class="post-content"><?php the_title();?></article>
<?php endif; // end modulus ?>
<?php endwhile; // end while loop ?>
</div> <!-- .col md 6 -->
</div> <!-- .row -->
<?php endif; wp_reset_postdata(); ?>
Please take a look at the last highlighted div in my attachement:
screenshot preview
How can I remove that unused empty div?
Thanks in advance.
Try this:
<div class="row">
<?php $count = 0; ?>
<div class="col-md-6">
<?php while( $loop->have_posts() ) : $loop->the_post(); $count++; ?>
<?php if( $count % 3 == 1 && $count > 1 ): ?>
</div> <!-- .col md 6 -->
<div class="col-md-6">
<article class="post-content"><?php the_title();?></article>
<?php else: ?>
<article class="post-content"><?php the_title();?></article>
<?php endif; // end modulus ?>
<?php endwhile; // end while loop ?>
</div> <!-- .col md 6 -->
</div> <!-- .row -->
Here I don't close div on the third article but I open it if I need on the fourth.
The problem I see is that you are allways opeining the <div class="col-md-6"> when the modulus 3 is 0 even if there are no more articles after you open the tag. In such case you would end up with an empty div.
Im having some trouble with a else statement i'm trying to write. Basicly if the repeater field is there and displays the content do that, if no content is in the repeater field display this.
Here is the original code without the else statement that I started from
<div class="tabs-panel" id="panel5">
<?php
if ( have_rows( 'ar_content' ) ):
$i = 0;
$n = count( get_field('ar_content') );
?>
<div class="row">
<?php
while ( have_rows( 'ar_content' ) ):
the_row();
$i++;
?>
<div class="small-12 medium-4 columns">
<?php the_sub_field('ar_block'); ?>
</div>
<? if ($i % 3 == 0 && $i < $n) : ?>
</div>
<div class="row">
<?php
endif;
endwhile;
?>
</div>
<? endif; ?>
</div><!-- end panel 5 -->
Here is the code I am trying to get working. I would think its would be just replace the last endif with a else and move on the to else content?
<div class="tabs-panel" id="panel5">
<?php
if ( have_rows( 'ar_content' ) ):
$i = 0;
$n = count( get_field('ar_content') );
?>
<div class="row">
<?php
while ( have_rows( 'ar_content' ) ):
the_row();
$i++;
?>
<div class="small-12 medium-4 columns">
<?php the_sub_field('ar_block'); ?>
</div>
<? if ($i % 3 == 0 && $i < $n) : ?>
</div>
<div class="row">
<?php
endif;
endwhile;
?>
</div>
<? } else { ?>
<h2>content to show if nothing is above</h2>
<?php endif; ?>
</div><!-- end panel 5 -->
Not working though, any thoughts. And yes if this is totally jacked i'm new to PHP
You are using wrong syntax, please read here, change:
<? } else { ?>
to:
<? else: ?>
You should use either the colon or the brackets syntax, but not both.
<div class="tabs-panel" id="panel5">
<?php
if ( have_rows( 'ar_content' ) ) {
$i = 0;
}
$n = count( get_field('ar_content') );
?>
<div class="row">
<?php
if(have_rows( 'ar_content' )){
while ( have_rows( 'ar_content' ) ){
the_row();
$i++;
?>
<div class="small-12 medium-4 columns">
<?php the_sub_field('ar_block'); ?>
</div>
<? if ($i % 3 == 0 && $i < $n) { ?>
</div>
<div class="row">
<?php
} // endif;
} // endwhile;
?>
</div>
<?php } else {
echo "<h2>content to show if nothing is above</h2>";
}
?>
This is what you need.
I'm trying to achieve a 3x3 grid view of all the WordPress posts on the "blog" page (index.php). I'm building the site based on Bootstrap 3.
Therefore the loop has to create the columns and rows with PHP.
I'd like to have it set up in rows, so that potential height differences are being reset every row. The bootstrap grid would look like this:
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
Lacking the PHP skills for setting up the loop properly, I tried hacking my way around, coming up with 3 times this (modifying the offsets):
<?php query_posts('posts_per_page=1&offset=0'); while (have_posts()) : the_post(); ?>
<div class="row">
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile; ?>
<?php query_posts('posts_per_page=1&offset=1'); while (have_posts()) : the_post(); ?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile; ?>
<?php query_posts('posts_per_page=1&offset=2'); while (have_posts()) : the_post(); ?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
</div>
<?php endwhile; ?>
It has obvious disadvantages:
a lot of unnecessary PHP requests/loops
filtering by categories, tags, etc doesn't work
Could you help me out with creating the PHP loop?
The most related question I found is this, but the column layout is somehow skewed!
Thanks a lot! Philipp
The easiest would be to use one container and put all the contetn items in it, then equal their height via js like that.
PHP
<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile?>
JS:
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumb"));
});
If thats no option, you could do sth. like that:
PHP
<div class="row">
<?php
$count=0;
query_posts('posts_per_page=9');
while (have_posts()) : the_post();
?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php
$count++;
if($count == 3 || $count == 6 ) echo '</div><div class="row">';
endwhile;
?>
</div>
Every three post objects must be contained within a row. So it will be like <div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div>
If you would like to do this in php, and still maintain proper 'rowage' your code could look something like this:`
<div class="container">
<?php
$countturtle = 0 ;
$countbang = 0 ;
$count_posts = wp_count_posts( 'portobello' )->publish;
$args = array( 'post_type' => 'portobello', 'posts_per_page' => 32 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $countbang++ ?>
<?php if ( $countbang >= 2 ) {
$countturtle = $countturtle + 1 ; } ?>
<?php if ( $countbang == 1 ) {
echo '<div class="row first-training">'; } elseif ( ( $countturtle % 3 ) == 0 ) {
echo '<div class="row">'; } ; ?>
<div id="post-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-sm-4" >
<header class="entry-header training-header">
<h1 class="entry-title train">
<?php the_title(); ?>
</h1>
</header><!-- .entry-header -->
<div class="entry-imogin">
ddd
</div><!-- .entry-imogin -->
</div><!-- #post -->
<?php if ( $countbang % 3 == 0 ) {
echo '</div>'; }
elseif ( $countposts == $countbang ) { echo '</div>';} ; ?>
<?php endwhile; ?>
</div>
Here a solution for 3 columns
layout :
1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
...
<div class="row">
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 1): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 2): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 3): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
</div>
Thanks to some answers on here, I've managed to distinguish my posts into the latest post and all the rest. However, it needs to be the oldest post. Here is my current loop:
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; $c=0;?>
<?php while (have_posts()) : the_post(); ?>
<!-- first post -->
<?php $c++;
if( $c == 1) :?>
<div class="container">
<div class="inner_box">
<ul>
<div class="title">
<a href="<?php the_permalink();?>">
<?php the_title(); ?>
</div>
<?php the_content(); ?>
</a>
</ul>
<div class="down">a</div>
</div>
</div>
<?php else :?>
<!-- second post -->
<div class="container">
<div class="inner_box">
<ul>
<div class="title">
<a href="<?php the_permalink();?>">
<?php the_title(); ?>
</div>
<?php the_content(); ?>
</a>
</ul>
<div class="up">b</div>
</div>
</div>
<?php endif; ?>`
I saw somewhere that you can use a while loop to target the last post from a post.length. However, I am unsure how to implement this.
Yes, you're right. Use count.
Suppose the total posts is 5 for $total_posts = count($posts);.
You'll have to check your $counter for total - 1 as the array is $posts[0], $posts[1], $posts[2], $posts[3], $posts[4].
<?php
if ( have_posts() ) :
$counter = 0;
$total_posts = count($posts) - 1;
while ( have_posts() ) :
the_post();
if( $counter == $total_posts ) {
?>
<div class="container"><?php // CUSTOM CODE FOR LAST ARTICLE ?></div>
<?php
} else {
?>
<div class="container"><?php // CUSTOM CODE FOR THE REST OF ARTICLES ?></div>
<?php
}
$counter++;
endwhile;
endif;
Note that you only need to open <?php and close ?> when changing from PHP to HTML, using them at every line is very confusing.