How do I style alternating WordPress posts? - php

Question

I have some posts displaying from a specific category but need them to have a little different styling on every second post.
This code I have displays all posts in a list with the same styling.
How do I edit this code and make it so I can edit the styling of ONLY every second post?
As it stands there's text on the left and an image on the right - the second posts just need to switch sides - it's simple styling but I'm unsure how to break the posts up to edit #case-left & #case-right are the two divs that need to switch.
Thanks in advance.
<?php // PAGE LINK/TITLE
if (is_page()) {
$cat=get_cat_ID($post->post_title); //use page title to get a category ID
$posts = get_posts ("category_name=case-study&posts_per_page=10");
if ($posts) {
foreach ($posts as $post):
setup_postdata($post);
?>
<div class="serve-inner-split">
<div id="case-split">
<div id="case-left" class=" serve-left">
<div id="case-study-content">
<h1 class="case-study-title"><?php the_title(); ?></h1>
<p><?php //PULLS IN EXCERPT
$my_excerpt = get_the_excerpt();
if ( '' != $my_excerpt ) {
// Some string manipulation performed
}
echo $my_excerpt; // Outputs the processed value to the page
?>
</p>
READ CASE STUDY
</div>
</div>
<div id="case-right" class="serve-grey">
<?php
if ( has_post_thumbnail() ) { // PULLS IN IMAGE check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
</div>
</div>
<?php endforeach;
}
}
?>

Answer 1

<?php // PAGE LINK/TITLE
if (is_page()) {
$cat=get_cat_ID($post->post_title); //use page title to get a category ID
$posts = get_posts ("category_name=case-study&posts_per_page=10");
if ($posts) {
$counter = 1;
$class = '';
foreach ($posts as $post):
setup_postdata($post);
if($counter%2 == 0) {
$class = "even-no";
} else {
$class = '';
}
?>
<div class="serve-inner-split <?php echo $class; ?>">
<div id="case-split">
<div id="case-left" class=" serve-left">
<div id="case-study-content">
<h1 class="case-study-title"><?php the_title(); ?></h1>
<p><?php //PULLS IN EXCERPT
$my_excerpt = get_the_excerpt();
if ( '' != $my_excerpt ) {
// Some string manipulation performed
}
echo $my_excerpt; // Outputs the processed value to the page
?>
</p>
READ CASE STUDY
</div>
</div>
<div id="case-right" class="serve-grey">
<?php
if ( has_post_thumbnail() ) { // PULLS IN IMAGE check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
</div>
</div>
<?php $counter++; ?>
<?php endforeach;
}
}
?>

Answer 2

Ok, so when editing your question I saw that you want to style it so that the divs switch places. You can do that like this in php
<?php // PAGE LINK/TITLE
if (is_page()){}
$i = 0;
$cat=get_cat_ID($post->post_title); //use page title to get a category ID
$posts = get_posts ("category_name=case-study&posts_per_page=10");
if ($posts) {
foreach ($posts as $post):
setup_postdata($post);
$i++;
if ($i % 2 == 0):?>
<div class="serve-inner-split">
<div id="case-split">
<?php if ( has_post_thumbnail() ):?>
<div id="case-right" class="serve-grey">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<div id="case-left" class=" serve-left">
<div id="case-study-content">
<h1 class="case-study-title"><?php the_title(); ?></h1>
<p><?php //PULLS IN EXCERPT
$my_excerpt = get_the_excerpt();
if ( '' != $my_excerpt ) {
// Some string manipulation performed
}
echo $my_excerpt; // Outputs the processed value to the page
?>
</p>
READ CASE STUDY
</div>
</div>
</div>
</div>
<?php else: ?>
<div class="serve-inner-split">
<div id="case-split">
<div id="case-left" class=" serve-left">
<div id="case-study-content">
<h1 class="case-study-title"><?php the_title(); ?></h1>
<p><?php //PULLS IN EXCERPT
$my_excerpt = get_the_excerpt();
if ( '' != $my_excerpt ) {
// Some string manipulation performed
}
echo $my_excerpt; // Outputs the processed value to the page
?>
</p>
READ CASE STUDY
</div>
</div>
<?php if ( has_post_thumbnail() ):?>
<div id="case-right" class="serve-grey">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif;
?>
<?php endforeach;
wp_reset_postdata();
} ?>
But in my opinion, that's kinda unnecessary. You can also do it like this:
<?php // PAGE LINK/TITLE
if (is_page()){}
$i = 0;
$cat=get_cat_ID($post->post_title); //use page title to get a category ID
$posts = get_posts ("category_name=case-study&posts_per_page=10");
if ($posts) {
foreach ($posts as $post):
setup_postdata($post);
$class = '';
$i++;
if ($i % 2 == 0){
$class = 'right_image'
}
?>
<div class="serve-inner-split <?php echo $class; ?>">
<div id="case-split">
<div id="case-left" class=" serve-left">
<div id="case-study-content">
<h1 class="case-study-title"><?php the_title(); ?></h1>
<p><?php //PULLS IN EXCERPT
$my_excerpt = get_the_excerpt();
if ( '' != $my_excerpt ) {
// Some string manipulation performed
}
echo $my_excerpt; // Outputs the processed value to the page
?>
</p>
READ CASE STUDY
</div>
</div>
<?php if ( has_post_thumbnail() ):?>
<div id="case-right" class="serve-grey">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach;
wp_reset_postdata();
} ?>
And then float the image the other way (or use absolute positioning or whatever suits you), with the '.right_image' class in the css.