I'm having an ACF repeater inside a custom post type loop with a counter that makes a row around every two col-md-6's. This works great when I have an even number of col's but not when it's uneven. When a post has an uneven number of col's the counter somehow remembers that for the next post and only displays one col in the first row.
Down here you'll find the current code and a little picture of what is happening.
Somehow I need to reset the counter after each post loop but can't figure it out. wp_reset_postdata doesn't seem to work.
<?php $args = array( 'post_type' => 'posttypename', 'posts_per_page' => '-1' ); $the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><?php the_title(); ?></h1>
</div>
</div>
<?php if( have_rows('row') ): ?>
<div class="row">
<?php while( have_rows('row') ): the_row(); $text = get_sub_field('text'); ?>
<div class="col-md-6">
<?php echo $text; ?>
</div>
<?php $counter++; if($counter % 2 === 0) : echo '</div> <div class="row">'; endif; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
Just a small change. You need to make sure that your counter is reset to 0 before the loop for the acf starts.
<?php $counter = 0; //Initialize your Counter here before the Loop Starts for each Post ?>
<?php if( have_rows('row') ): ?>
<div class="row">
<?php while( have_rows('row') ): the_row(); $text = get_sub_field('text'); ?>
<div class="col-md-6">
<?php echo $text; ?>
</div>
<?php $counter++; if($counter % 2 === 0) : echo '</div> <div class="row">'; endif; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
Related
I´m working with wordpress and Advanced Custom Field and I´m trying to display post objects in an acf repeater, but unfortunately it only outputs the first row of the repeater. Someone has an idea why?
Here is my Code:
<?php if( have_rows('repeater') ): ?>
<?php while( have_rows('repeater') ): the_row();
// vars
$repeater = get_sub_field('repeater'); ?>
<?php $repeaterGroup = get_sub_field('repeater_group'); ?>
<div class="box25-75">
<div class="col col1">
<?php $colLeft= $repeaterGroup['left_col']; ?>
<div class="text">
<p class="text-center">
E: <?php echo $colLeft['email']; ?><br />
T: <?php echo $colLeft['telefon']; ?>
</p>
</div>
</div>
<div class="col col2">
<div style="margin-top: 40px;">
<?php
$args = array(
'post_type' => 'html5-blank',
'post_status' => 'publish',
'posts_per_page' => '100',
);
$wp_query = new WP_Query( $args );
if ( $wp_query->have_posts() ) : ?>
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post();
// Set variables
$title = get_the_title();
$description = get_the_content();
$field = get_field_object('autor');
$colors = $field['value'];
$date = get_the_date( 'd.m.Y' );
// Output
?>
<?php // show something ?>
<?php $wp_query->reset_postdata(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<div class="clear"></div>
</div>
<?php endwhile; ?>
<?php endif; ?>
I found my problem. Instead of reset the post data, I had to reset de query. So I changed the line "$wp_query->reset_postdata();" with "wp_reset_query();"
I have two wp_query loops.
The first loop looks for a featured post and formats it differently than the rest of the posts.
Then the second loop displays the rest of the posts.
I want to exclude this first, featured post from the rest of the loop.
Right now, the post ID of the first post is saved as a variable.
I want to use that variable in the second loop, with the wp_query exclude argument.
But as far as I understand, that variable dies when my first loop ends. It's then a null variable in the second loop and so nothing is excluded.
<!-- Here's the query for the featured post -->
<?php
// the arguments
$args = array(
'posts_per_page' => '1',
'orderby' => '',
'meta_key' => 'featured_post',
'meta_value' => '1'
); ?>
<?php $the_query = new WP_Query($args); ?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<!-- I'm storing the ID so I can exclude it from the rest of the loop, but I know this doens't work right now -->
<?php $postid = get_the_ID(); ?>
<div class="small-12 columns entry" >
<div class="text-center" id="featured-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('featured'); ?>
</a>
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php
$content = get_the_content();
echo wp_trim_words($content, '75');
?>
</p>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<!-- If there is no featured post, pull in the most recent post and make it big -->
<?php else: ?>
<?php
// the arguments
$args = array(
'posts_per_page' => '1',
'orderby' => '',
); ?>
<?php $the_query = new WP_Query($args); ?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<!-- I'm storing the ID so I can exclude it from the rest of the loop, but I know this doens't work right now -->
<?php $postid = get_the_ID(); ?>
<div class="small-12 columns entry" >
<div class="text-center" id="featured-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('featured'); ?>
</a>
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php
$content = get_the_content();
echo wp_trim_words($content, '75');
?>
</p>
</div>
</div>
<!-- End of the nested loop (most recent posts) -->
<?php endwhile; ?>
<?php endif; ?>
<!-- End of the featred post query loop-->
<?php endif; ?>
And here's the main loop:
<?php get_template_part('parts/content', 'featured-post'); ?>
<!-- This ends the logic for the featured post. Now we show the rest of the posts, excluding the first one we showed -->
<?php get_template_part('parts/content', 'category-filter'); ?>
<?php
// the arguments
$args=array(
'paged' => $paged,
'posts_per_page' => 9,
'post__not_in' => array($postid)
); ?>
<?php $the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- Start row that holds blocks -->
<div class="row small-up-1 medium-up-2 large-up-3">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="column entry" >
<?php if( get_the_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('blog'); ?>
</a>
<?php else : ?>
<?php endif; ?>
<h5><?php the_title(); ?></h5>
<?php
$excerpt = get_the_excerpt();
echo wp_trim_words( $excerpt , '10', '');
?>
</div>
<?php endwhile; ?>
</div>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p>Sorry, no more posts.</p>
<?php endif; ?>
How exactly do I set up a variable to use in the second loop?
I really need some help here. I am converting my website from plain HTML to WordPress. However i noticed a big problem, on the static website i have a ROW with 3 cols which works just fine. In Wordpress i noticed that the ROW doesn't make a new ROW just continue to add the new col next to the 3rd col.
How can i fix this with a loop or something?
My code:
<?php $query = new WP_Query(array('post_type' => 'wpa_diensten', 'posts_per_page' => -1)); ?>
<?php if($query->have_posts()): global $more; ?>
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
<span class="wpa-service-bim-image"></span>
<h1><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail($post->ID) ): ?>
<p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
<?php endif; ?>
<?php the_content(); ?>
<p>Lees verder >></p>
</div><!-- end: col -->
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
add a $count variable outside your while loop with initial value of zero
then inside your while loop after each loop increase the $count with 1
add if condition $count%3==0
if true make new row
else make new col
$count=0
while($query->have_posts()): $query->the_post(); $more = 0;
$count+=1;
if($count%3==0){
//make new row
}
else{
//make new col
}
You can also use the bootstrap responsive column resets instead of creating new rows for each 3 columns. Then you run into trouble with the 2 columns for xs (col-xs-6).
Check out the bootstrap documentation: http://getbootstrap.com/css/#grid-responsive-resets
In your case you can add a reset for sm after each 2 columns and a reset after each 3 columns for md and lg.
See the example below:
<?php $query = new WP_Query(
array(
'post_type' => 'wpa_diensten',
'posts_per_page' => -1
)
); ?>
<?php $i = 1; // set a counter before the loop ?>
<?php if($query->have_posts()): global $more; ?>
<div class="row">
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
<span class="wpa-service-bim-image"></span>
<h1><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail($post->ID) ): ?>
<p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
<?php endif; ?>
<?php the_content(); ?>
<p>Lees verder >></p>
</div><!-- end: col -->
<?php if ( $i%2 == 0 ){ echo '<div class="clearfix visible-sm-block">'; } // show clearfix after each 2 cols for xs ?>
<?php if ( $i%3 == 0 ){ echo '<div class="clearfix visible-lg-block visible-md-block">'; } // show clearfix after each 3 cols for lg and md ?>
<?php endwhile; ?>
</div><!-- end: row -->
<?php endif; ?>
I think this is how your code should look. You might have to tweak the numbers...I think the maths is right! All this does is echo out the opening and closing div in the appropriate places if the loop we are on is a multiple of 3.
<?php $i = 1; # start a loop counter at 1 ?>
<?php if($query->have_posts()): global $more; ?>
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>
<?php if ($i % 3) == 0 : ?><div class="row"><?php endif; # If the number of the loop we are on divided by 0 is 3, we are in a "third" loop and you want a row opening div?>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-lg-height col-md-height col-sm-height col-top <?php post_class( 'clearfix' ); ?>">
<span class="wpa-service-bim-image"></span>
<h1><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail($post->ID) ): ?>
<p><?php echo get_the_post_thumbnail( $post->ID, 'large', array('class' => "img-responsive")); ?></p>
<?php endif; ?>
<?php the_content(); ?>
<p>Lees verder >></p>
</div><!-- end: col -->
<?php if ($i % 3) == 0 : ?><div class="row"><?php endif; # If the number of the loop we are on divided by 0 is 3, we are in a "third" loop and you want a row closing div ?>
<?php $i++;
<?php endwhile; ?>
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.