Change html output for every third post wordpress?

CMS & WordPress
1

Is it possible to change the html output for every third post in a wordpress loop?

Like, I want t have 2 posts with 50% width, then 1 with 100% width, then 2 x 50% again etc.

here is my current loop:

				<?php
					$args = array(

						'post_type' => 'posts'

					); 
					$the_query = new WP_Query( $args );
				?>
				<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>	
				<article class="large-12 columns">
						<?php
							if(has_post_thumbnail()) {
							    the_post_thumbnail('mycustomsize');
							} else {
							    echo '<img src="'.get_bloginfo("template_url").'/img/placeholder.jpg" />';
							}
						?>
						<h1><?php the_title(); ?></h1>
						<p><?php the_field('main-content'); ?></p>
				</article>
				<?php endwhile; endif; wp_reset_query(); ?>

And this one gives all posts the same html output obviously. The only part I want to change is so that every third post the article element gets the class medium-12 instead of medium-6.

Can this be done?

2

You could set an private variable and set that to 1, and each iteration of it you can ++ it. Check for when it gets to 3, and when it does get to 3, change the class (and reset it back to 1).

3

or simply use %3 for the test

2 Likes
4

Thanks but as I am a noob at PHP I don’t know how to actually write this.
However, what I want to do has now changed, now i just want to change the outpot after three posts and then keep the new output for the rest of the posts.

Could you show me or point me in the right direction of how this could be done?