Wordpress loop count - wordpress

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;

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.

posts showing in same div Wordpress

All my posts are showing in the same div, rather than seperate ones,
<?php get_header(); ?>
<div class="mainwrap">
<div class="bloginner">
<!-- begin section -->
<section>
<div class="postswrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="commentsetall"><img src="<?php bloginfo('template_url'); ?>/images/ico_folder.png" alt="Posted" /><span class="commentfix"><?php the_time('F j, Y') ?> in <?php the_category(', ') ?> by <?php the_author() ?></span></div>
<h1><?php the_title(); ?></h1>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div class="clearfix"></div>
</div>
</section>
<!-- end section -->
</div>
<div class="clearfix"></div>
</div>
<?php get_footer(); ?>
Is there a clearfix im maybe missing to stop this from happening?
thanks
put the <div class="postswrap"> inside the loop.something like that:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="postswrap">
<div class="commentsetall"><img src="<?php bloginfo('template_url'); ?>/images/ico_folder.png" alt="Posted" /><span class="commentfix"><?php the_time('F j, Y') ?> in <?php the_category(', ') ?> by <?php the_author() ?></span></div>
<h1><?php the_title(); ?></h1>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<div class="clearfix"></div>
</div>
<?php endif; ?>

Wordpress Pagination

I have a wordpress site : There is a problem with the pagination.. When I click on 2'nd page it shows up the first one(index page). The other pages are working. Can you help me?
I looked up for errors in the loop but i didn't found anything!
this my index.php code
<?php get_header(); ?>
<div id="content">
<?php if(get_option('freshlife_featured_content_enable') == 'on') { ?>
<div id="featured-content">
<div class="heading">
<span class="heading-text"><?php _e('Featured Articles', 'themejunkie'); ?></span>
</div> <!-- end .heading -->
<ul>
<?php
$counter = 1;
query_posts( array(
'showposts' => get_option('freshlife_featured_post_num'),
'tag' => get_option('freshlife_featured_post_tags')
) );
if( have_posts() ) : while( have_posts() ) : the_post();
?>
<li class="featured-<?php echo $counter; ?>"><?php the_post_thumbnail('featured-thumb', array('class' => 'entry-thumb')); ?><span class="entry-date"><abbr title="<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . __(' ago', 'themejunkie'); ?></abbr></span><h2 class="entry-title"><?php the_title(); ?></h2></li>
<?php $counter++; endwhile; endif; wp_reset_query(); ?>
</ul>
</div> <!-- end #featured-content -->
<?php } ?>
<div class="heading">
<span class="heading-text"><?php _e('All Stories', 'themejunkie'); ?></span>
</div> <!-- end .heading -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH. '/includes/templates/loop.php'); ?>
<?php endwhile; ?>
<div class="clear"></div>
<?php if (function_exists('wp_pagenavi')) wp_pagenavi(); else { ?>
<div class="pagination">
<div class="left"><?php previous_posts_link(__('Newer Entries', 'themejunkie')) ?></div>
<div class="right"><?php next_posts_link(__('Older Entries', 'themejunkie')) ?></div>
<div class="clear"></div>
</div> <!-- end .pagination -->
<?php } ?>
<?php else : ?>
<?php endif; ?>
</div> <!-- end #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
It's hard to say without looking at the WP_Query generated by the requests.
But I do see something that might be causing problems, query_posts alters the main query, that could be messing with the pagination.
Try to use get_posts instead query_posts, so the main loop is not affected.
A more detailed explanation can be found here

WordPress Query Posts To Show All & Style Each One

I am trying to include every post onto my index page on WordPress and have each one of them be styled with the included CSS. I am able to query all of the posts and have them show up, but only the first post is actually styled. The rest inherit the base h1, h2, p and other generic styles, but they aren't inheriting the "box" class for each one. All of the information is being thrown into one 'box' class instead of starting a new 'box' class for each post like I would like it to do. Any help on this would be appreciated.
Here is my code I am using
<?php get_header(); ?>
<div id="index-float-left">
<div class="box">
<?php query_posts( 'showposts=-1' ); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<p class="post-date"><?php echo $post_date = get_the_date(); ?></p>
</div>
</div> <!-- END BOX -->
</div> <!-- FLOAT BOX BOX -->
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
There is a problem with "End Box" and "Fload Box Box". Can you try like this:
<?php get_header(); ?>
<div id="index-float-left">
<?php query_posts( 'showposts=-1' ); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="box">
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<p class="post-date"><?php echo $post_date = get_the_date(); ?></p>
</div>
</div> <!-- END BOX -->
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</div> <!-- FLOAT BOX BOX -->
<?php get_sidebar(); ?>

Resources