different post style every 4th post WordPress
- SOLVED
Hi,
What i'm trying to achieve is to remove the margin-right:10px in every 4th post so that there are 4 portfolio items are listed per row. So the reference of "Het Assebroek" should be on the first row.
Second I would like to switch the image and the brown text block on every even (second, fourth, sixth) row.
Anyone has an idea how to achieve this?
This is the url i'm working on: <strong>http://www.nono.be/huisstijlen-en-drukwerk/</strong>
Thanks for the quick response.
Filip
Answers (6)
Maor Barazany answers:
Before your loop, add a counter - <?php $count = 0;?>
Then inside the loop, at the end, increase it by one -
<?php $count++; ?>
Then add an if to the div that contains the two rectangles of each post (if you supply your code I can tell you exactly where).
This if statement will add a css class named - "fourth" to every 4nd post,
<div class="grid_3 <?php if ($count%4 == 1) echo 'fourth';?>" id="post-<?php the_ID(); ?>">
This if statement will will add a css class "second" to every 2nd post,
<div class="grid_3 <?php if ($count%4 == 0 && $count%2 == 1) echo 'second';?>" id="post-<?php the_ID(); ?>">
Then add in your css the definition you want for second and fourth class.
You may need to add !important in your css, i.e.:
.second {margin-right: 2px !important;}
Filip Van Reeth comments:
The code:
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?>>
<div class="square-info">
<div class="v-outer">
<div class="v-middle">
<div class="v-inner">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
<p><?php $key="Label"; echo get_post_meta($post->ID, $key, true); ?></p>
</a>
</div>
</div>
</div>
</div>
<div class="img"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a></div>
</div>
<?php endwhile; ?>
Maor Barazany comments:
Try replace with this:
<?php
$count = 0;
while (have_posts()) : the_post();
$fourth = ($count%4 == 1)) : 'fourth' : '';
$second = (($count%4 == 0 && $count%2 == 1)) : 'second' : ''; ?>
<div <?php post_class('$second', '$fourh') ?>>
<div class="square-info">
<div class="v-outer">
<div class="v-middle">
<div class="v-inner">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
<p><?php $key="Label"; echo get_post_meta($post->ID, $key, true); ?></p>
</a>
</div>
</div>
</div>
</div>
<div class="img"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a></div>
</div>
<?php $count++; ?>
<?php endwhile; ?>
and see if it adds the css classes second and fourth where needed. If so, add the css to handle how it looks.
Maor Barazany comments:
Nilesh shiragave solution adds inline css to your themes, this is not very recommended, better to handle the style in the css. I suggested you the code above.
Filip Van Reeth comments:
I get a white page when i paste the code
Maor Barazany comments:
It's a matter of syntax, I'm checking for the exact one, will paste soon
Maor Barazany comments:
Sorry, here the the correct one
<?php
$count = 0;
while (have_posts()) : the_post();
$fourth = (($count%4 == 0)) ? 'fourth' : '';
$second = (($count%2 == 0 )) ? 'second' : ''; ?>
<div <?php post_class("$second $fourth"); ?>>
<div class="square-info">
<div class="v-outer">
<div class="v-middle">
<div class="v-inner">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
<p><?php $key="Label"; echo get_post_meta($post->ID, $key, true); ?></p>
</a>
</div>
</div>
</div>
</div>
<div class="img"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a></div>
</div>
<?php $count++; ?>
<?php endwhile; ?>
Maor Barazany comments:
btw, my last code will bring you the second and fourh also to the post number 0, so you can change in the beginning this -
$count = 0;
into this
$count = 1;
Filip Van Reeth comments:
Thx,
But it still does not swith the brown block and image on the second, fourth row (see image). So the image of costumize should come first, than the brown block, than the image of allegre bamboline, the brown block, ...
Here is the CSS:
#content .row .archive .post {
float: left;
margin: 0px;
margin-right: 10px;
padding: 0px;
width: 230px;
}
#content .row .archive .post.fourth {
margin-right: 0px;
}