Nth iteration for wordpress while loop - wordpress

I know it is little easy but unable to solve the issue with wordpress while loop. I am using zurb framework and for product list using below html structure.
<div class="row">
<div class="four columns">
item here
</div>
<div class="four columns">
item here
</div>
<div class="four columns">
item here
</div>
</div>
So in while loop I want to repeat entire structure after every three four columns div. I have tried with below code
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('post_type=product' . '&paged=' . $paged .'');
?>
<?php $counter = 0;
if ( have_posts() ) : while ( have_posts() ) : the_post();
if ($counter % 3 == 0):
echo '<div class="row"><!--row starts here-->';
endif; ?>
<div class="four columns">
<article>
<header>
<hgroup>
<h2><?php the_title(); ?></h2>
<h6>Written by <?php the_author_link(); ?> on <?php the_time(get_option('date_format')); ?></h6>
</hgroup>
</header>
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" class="th" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<?php the_excerpt(); ?>
</article>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2><?php _e('No posts.', 'foundation' ); ?></h2>
<p class="lead"><?php _e('Sorry about this, I couldn\'t seem to find what you were looking for.', 'foundation' ); ?></p>
<?php endif;
if ($counter % 3 == 0):
echo '</div><!--row end here-->';
endif; ?>
<?php foundation_pagination(); ?>
</div>
<!-- End Main Content -->
But it is repeating wrongly and for every loop. I know this is obvious to repeat but the solution I unable to found how to repeat after only 3 four columns and in first loop row should div should be inserted as well.
Thanks a lot

Do precisely what Andy said, add the code $counter++; in your code, inside the while loop.
For example, in your code:
</div>
<?php $counter++; ?>
<?php endwhile; ?>
That shows where to put it between two existing lines in your example.

You should probably add one to the counter in the loop, like $counter++, then close this question.

Related

Display Wordpress posts from left to right in two columns

I want to display my Wordpress posts across two columns. At the moment, they run down one column. I'm also getting the categories repeating in the col-lg-2 div as I scroll down. Any tips? Thanks!
<div class="container">
<?php // Display blog posts on any page # https://m0n.co/l
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('posts_per_page=-1' . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="row">
<div class="col-lg-2">
<?php the_category(', '); ?>
</div>
<div class="col-lg-5">
<?php the_post_thumbnail(); ?>
<p><?php the_title(); ?></p>
</div>
<div class="col-lg-5">
<h2><?php the_title(); ?></h2>
</div>
</div>
<?php endwhile; ?>
<?php if ($paged > 1) { ?>
<?php } else { ?>
<?php } ?>
<?php wp_reset_postdata(); ?>
</div>

ACF Repeater Field in Flexible Content

I am trying to add a repeater field into a flexible content row but for some reason nothing is being output. I have checked the fields and they seem correct so could someone please point me out to where I am going wrong? Thanks
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_field('collection_images_grid')): ?>
<?php while(has_sub_field('collection_images_grid')): ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
your <?php if(get_field('collection_images_grid')): ?> statement should be <?php if(get_sub_field('collection_images_grid')): ?>
<?php
// check if the flexible content field has rows of data
if( have_rows('the_process') ){
// loop through the rows of data
while ( have_rows('the_process') ) : the_row();
if( get_row_layout() == 'content' ){
?>
<h1><?php the_sub_field('headline');?></h1>
<h2 class="tagLine paddingBottom80"><?php the_sub_field('sub_headline');?></h2>
<div class="steps clearAfter">
<?php if(get_sub_field('process_steps')): ?>
<?php
while(has_sub_field('process_steps')):
?>
<!--Step-->
<div class="processStep rel boxSizing">
<img src="images/ph.png" width="200" height="200" class="borderRadius50Perc imageBorder boxSizing" />
<div class="processBox border1 padding20 clearAfter">
<div class="third processNumber boxSizing font70 darkBlue">
<div class="border1 padding20">
<?php echo $i;?>
</div>
</div>
<div class="twothird boxSizing processContent">
<h3><?php the_sub_field('step_headline'); ?></h3>
<div class="processContentTxt grey">
<?php the_sub_field('step_content'); ?>
</div>
</div>
</div>
</div>
<!--Step-->
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php
}
endwhile;
}
?>
You should change one thing in your code. Change <?php if(get_field('collection_images_grid')): ?> to <?php if(get_sub_field('collection_images_grid')): ?> and it will works! I've simulate your issue and after change to sub_field it works. Your code will be like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_sub_field('collection_images_grid')): ?>
<?php while(has_sub_field('collection_images_grid')): ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
I had a little problems to use repeaters inside acf flexible content. So if I could say something to help in this cases is to use a variable to print the elements of repeater array, like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_sub_field('collection_images_grid')): ?> // considering that collections_images_grid are a repeater
<?php $collection_image = get_sub_field('collection_images_grid');?>
<?php echo $collection_image['url']; ?> <?php echo $collection_image['alt']; ?> //Or something that you would like to use [... and than the rest of code]
Assuming your repeater field is collection_images_grid, you should loop through the items with have_rows(), like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(have_rows('collection_images_grid')): ?>
<?php while(have_rows('collection_images_grid')): the_row(); ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
This essentially checks if the flexible content field has rows of data (<?php if(have_rows('collection_images_grid')): ?>), and then loops through / displays them (<?php while(have_rows('collection_images_grid')): the_row(); ?>).
More details about looping through fields with have_rows(): https://www.advancedcustomfields.com/resources/have_rows/
To debug all the Advanced Custom Fields on a page and get a better understanding of the structure, I often use the following PHP snippet:
echo '<pre>';
var_dump(get_fields());
echo '</pre>';
This helps to make sure the data is available, and figure out how to reach it in the nested structure.

Wordpress loop count

I have created a simple Wordpress loop already but now it should loop a little differently and i dont know how to start or even where to start. I have inside DIV class="item-row-wrap" my loop it loops through DIV class="vinyl-wrap" normally.
My problem: i would like it to loop three times and then to create a new DIV class="item-row-wrap" and start again looping DIV class="vinyl-wrap" three times...and go on and on
Here is the code:
<code>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if(get_field('artist-repeater')): while(has_sub_field('artist-repeater')): ?>
<div class="item-row-wrap"> <!--START of item-row-wrap-->
<div class="vinyl-wrap"> <!--START of vinyl-wrap-->
<?php if(get_sub_field('play-repeater-songlink')): ?>
<a class="play" href='<?php the_sub_field('play-repeater-songlink'); ?>' target="_blank"></a>
<?php endif; ?>
<?php if(get_sub_field('moreinfo-repeater-song')): ?>
<a class="more-info" href='<?php the_sub_field('moreinfo-repeater-song'); ?>' target="_blank"></a>
<?php endif; ?>
<div class="vinyl-cover">
<div class="vinyl-cover-plastik"></div>
<?php if(get_sub_field('album-repeater-image')): ?>
<?php $image = wp_get_attachment_image_src(get_sub_field('album-repeater-image'), 'thumbnail'); ?>
<img class="album-cover-art" src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('album-repeater-image')) ?>" />
<?php endif; ?>
</div> <!--End of vinyl-cover-->
<div class="likeit">
<?php if(function_exists(getILikeThis)) getILikeThis('get'); ?>
</div>
<div class="artist-name-wrap">
<div class="artist-wrap-left"></div>
<div class="artist-wrap-mid">
<p><?php the_title(); ?></p>
</div>
<div class="artist-wrap-right"></div>
</div> <!--End of artist-name-wrap-->
<div style="clear:both;"></div>
<div class="song-name-wrap">
<div class="song-wrap-left"></div>
<div class="song-wrap-mid">
<?php if(get_sub_field('song-repeater-name')): ?>
<p><?php the_sub_field('song-repeater-name'); ?></p>
<?php endif; ?>
</div>
<div class="song-wrap-right"></div>
</div> <!--end of song-name-wrap-->
</div> <!--END OF VINYL-WRAP-->
<?php endwhile; endif; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php else: ?>
Yhtään artikkelia ei ole vielä julkaistu.
<?php endif; ?>
</div> <!--END OF ITEM-ROW-WRAP-->
Make $i var before the loop.
Up the value just before the loops closes: $i++
Set a Modulo check around the <div class="item-row-wrap"> (and the closing </div>)
Modulo tutorial
Not a complete answer but enough to get you started.
example
The example below shows how you should do this
<?php
$i = 0;
if (have_posts()) : while (have_posts()) : the_post();
if(get_field('artist-repeater')): while(has_sub_field('artist-repeater')):
if ($i % 3 == 0) {
echo '<div class="item-row-wrap"> <!--START of item-row-wrap-->';
}
$i++; // up the numer of looped
?>
DO your magic
<?php
if ($i % 3 == 0) {
echo '</div> <!--END OF ITEM-ROW-WRAP-->';
}
endwhile; //end have_posts()
endif;

WordPress - Pagination Not Working on Custom Loop

I've searched and searched and have not solved my problem. I seems like there are solutions but they are not working for my particular code.
What I would like to do is to have two loops - one that calls up the most recent post and acts as the main "featured post". Second is simply the second most recent post that is styled differently - then below the second or "sub post" I would like pagination.
Problem is... the pagination does not work. The numbers show up, but when I click on them nothing happens. Would appreciate any help!
Here is the code...
<div id="featuredpost">
<?php $my_query = new WP_Query('posts_per_page=1&cat=4');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<span class="subposttitle"><?php the_title(); ?></span><br>
<small>Posted in <?php the_category(', ') ?> on <?php the_time('l, F jS') ?>.</small>
<br><br>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<br>
<hr>
<br><br>
<?php endwhile; ?>
</div>
<div id="subposts">
<?php $my_query = new WP_Query('posts_per_page=1&offset=1&cat=4');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<span class="subposttitle"><?php the_title(); ?></span><br>
<small>Posted in <?php the_category(', ') ?> on <?php the_time('l, F jS') ?>.</small>
<br><br>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<br>
<hr>
<br>
<?php endwhile; ?>
<center>
<?php wp_pagenavi() ?>
</center>
</div>
pass multiple properties to wp_query as an array:
<?php $wp_query = new WP_Query(array('posts_per_page' => 1, 'cat' => 4));

How can I have multiple loops on one page in Wordpress?

I am using a nice jquery slideshow plugin I found and trying to get it to work into my Wordpress template. I have tried the code below in various formats but I can't seem to get it the way I want.
The first part is where the title and content of the post reads into the slider, using a specific category. I have 3 of these sections:
<div class="details_wrapper">
<div class="details">
<div class="detail">
<?php query_posts('cat_ID=7&showposts=1');
if (have_posts()) : while (have_posts()) : the_post();?>
<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>">
<?php the_title() ?></a><?php the_excerpt(); ?></h2>
<?php endwhile; endif;
?>
</div><!-- /detail -->
<div class="detail">
<?php query_posts('cat_ID=8&showposts=1');
if (have_posts()) : while (have_posts()) : the_post();?>
<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>">
<?php the_title() ?></a><?php the_excerpt(); ?></h2>
<?php endwhile; endif;
?>
</div><!-- /detail -->
<div class="detail">
<?php query_posts('cat_ID=9&showposts=1');
if (have_posts()) : while (have_posts()) : the_post();?>
<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>">
<?php the_title() ?></a><?php the_excerpt(); ?></h2>
<?php endwhile; endif;
?>
</div><!-- /detail -->
</div><!-- /details -->
</div>
Now this actually works, but I just need it to post the title and excerpt from one of the posts from the category noted. I was reading that I may need to add the wp_reset_query(); line somewhere to destroy the previous loop's query, but I'm not sure.
Here's the second part of the code where the post's featured image is retrieved:
<div class="item item_1">
<?php query_posts('cat_ID=7&posts_per_page=1'); ?>
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
</div><!-- /item -->
<div class="item item_2">
<?php query_posts('cat_ID=8&posts_per_page=1'); ?>
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
</div><!-- /item -->
<div class="item item_3">
<?php query_posts('cat_ID=9&posts_per_page=1'); ?>
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
</div>
Any help would be greatly appreciated :) Here's an example.
Have you tried using...
query_posts('cat_ID=9&posts_per_page=1');
Or I have used get_post before as while to get certain amount of post like so...
<?php
global $post;
$myposts = get_posts('posts_per_page=1&numberposts=-1&category=1');
foreach($myposts as $post) :
?>
<h6><?php the_title(); ?></h6>
<?php setup_postdata($post);?>
<?php the_excerpt(); ?>
<?php endforeach; ?>
</div>
If its just one post you want you wouldn't really need the foreach or while loop.
I used the method Tianbo84 suggested above both to query the posts AND the featured images from that post to finish the job :) Thanks Tianbo84! To my understanding, the get_posts and <?php endforeach; ?> lines were key... like opening a query and then closing it once the data was retrieved.

Resources