One of the things I seem to see a lot on the WordPress forums is general questions about, »how do i change the look of every second or third post«, »how do i ad an adsense block after the first post only« and so on.
I want to show you a really simple example here at first:
-
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
-
$loopcounter++; ?>
-
-
<div class=“post”>
-
-
<?php if ($loopcounter % 2 == 0) { ?>
-
<h1 class=“even”><?php the_title(); ?></h1>
-
<?php } else { ?>
-
<h1 class=“odd”><?php the_title(); ?></h1>
-
<? } ?>
-
-
<?php the_content(); ?>
-
</div>
-
-
<?php endwhile; ?>
Now, how does this code differ from a normal loop - it has the extra variable, $loopcounter.
$loopcounter++; is placed inside the loop, and the ++ part indicates that it should increase by one, each time the loop begins. That means, when first post in loop, the variable returns 1, when second post in loop it returns 2 etc..
The thing I want to change in the example above, is that i want to style the post title differently for every second post. I use a bit math for this and creates an if call. This call checks if the loopcounter number is even or odd and returns 0 or 1. If the returned value is 0, we want to apply the class »even« to the h1 - if its 1, we want to apply »odd«. Its that simple.
But i want a google adsense block after post number 3!
Ok? Well, you have the loopcounter variable, you just need to create a new if call.
-
<?php if ($loopcounter == 3) { ?>
-
<div class=“adsense”>ADSENSE BLOCK</div>
-
<?php } ?>
Continuing loop through 2 or 3 columns
I used this variable to let the posts continue throughout 4 columns on this site.
In this example I make it continue throughout 2 columns, »column1« and »column2«, where I want 10 posts in each.
-
<div id=“column1″>
-
-
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
-
$column1counter++;
-
if ($column1counter <= 10) { ?>
-
-
<h1><?php the_title(); ?></h1>
-
<?php the_content(); ?>
-
-
<?php } endwhile;?>
-
-
</div>
-
-
<div id=“column2″>
-
-
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
-
$column2counter++;
-
if ($column2counter >= 11 && $column2counter <= 20) { ?>
-
-
<h1><?php the_title(); ?></h1>
-
<?php the_content(); ?>
-
-
<?php } endwhile;?>
-
-
</div>
Here I use to if calls. »If the counter returns 10 or less«, and »If the counter returns a number between 11 and 20 (or 11, or 20)«.
It uses the same loop for both columns, which returns the exact same thing, but by using the counter variable and the if calls, we can control what we want it to output.
16 comments
MenZa Says:
That is a very nice feature - I might mess around with it in one of my themes :)
02/03-2006 | 14:43
Chris Says:
Hello! I am trying to do the different color “every other post” thing and my code looks different from yours (in the index.php file of the blix theme). Could you explain how to do this again, please? Do i only insert $loopcounter++ in my index.php or what else do i need to insert? Thanks for the guides, i have bookmarked them.
13/03-2006 | 23:57
Live WordPress theme list » Loop-counter basics Says:
[…] Link WordPress: Change look of every second post […]
28/03-2006 | 10:34
The undersigned » Blog Archive » From XHTML/CSS to WordPress Says:
[…] Codex: Template tags Codex: The loop Codex: Theme development Guide: Conditional tags Guide: Conditional tags - 2 Guide: Change look of every second post Guide: Most commented Guide: Widget integration […]
03/05-2006 | 19:44
Another approach to Wordpress title, h1 and link structure SEO Says:
[…] Undersigned.net loop counter script The optimal title plugin Lorelle SEO tips Daren on Title tag optimisation […]
03/07-2006 | 7:14
Flocking » Blog Archive » links for 2006-07-23 Says:
[…] WordPress: change look of every second post Change the look of every second post in WordPress (tags: wordpress code php) […]
23/07-2006 | 5:16
biggandyy Says:
Thanks, this is just what I was looking for to add to my Word Press blog. It was doable to manage it manually but this can nearly automate the entire process. I wonder if I can change the script so that each pass through the loop will display a random change rather than a set routine? I don’t see why not.
Thanks again!
18/01-2007 | 17:19
axafbtslgo Says:
feqbtrt
23/01-2007 | 18:39
Hot Links Thursday Says:
[…] If you use WordPress and have wondered how you can achieve the effect of having a different appearance for alternate posts, theundersigned.net has the answer. If you are new to WP, this might be a little advanced, but save the link for a time you feel more confident. […]
29/03-2007 | 18:19
alison Says:
Never see another Google text ad… ever!
Perhaps text ads are less annoying than banners, and perhaps they’re more effective, but I still don’t want to see them. No, I don’t care if it’s Google, the daahhhling of the “in” geek crowd, serving them up—they’re still ads. http://tinyurl.com/ynvakn
25/04-2007 | 14:29
Aussie Mum, Bree Says:
This is great for ads, thanks for the info. I will let you know if I have any problems. :)
11/08-2007 | 0:21
Aussie Mum, Bree Says:
That didn’t take long lol. Ok I got me some problems. What I want to do (if possible) is display a different ad block every single time or by random?
11/08-2007 | 1:22
Ramil Says:
Thanks for the tip. It’s really helpful!
08/09-2007 | 18:09
Leonaut.com Says:
WordPress: Change look of every second post…
One of the things I seem to see a lot on the WordPress forums is general questions about, »how do i change the look of every second or third post«, »how do i ad an adsense block after the first post only« and so on. I want to show you a really simp…
04/12-2007 | 12:06
WordPress » Wskazówki Blogging WordPress WordPress Pluginy » Jak dodać “coś” między postami ? Says:
[…] Drugi sposób na wyświetlanie “czegoś” między postami będzie polegał na prostej edycji kodu php naszej skórki. Porada pochodzi z serwisu The undersigned. […]
19/02-2008 | 16:43
Simon Says:
Thanks very much for this. Helped a lot!
22/02-2008 | 1:40
Leave a Reply