Trying to Alternate Post Categories and CSS Within The Same Loop WordPress
- SOLVED
Okay, first thing's first. My site is not like a typical blog. It's more of like a magazine website so I have many many MANY loops within a given page.
What I'm trying to accomplish is to have many different categories queried within the same loop, but give certain posts different css classifications.
For example, take this loop:
<?php
$j = 1;
$postslist = get_posts('showposts=20');
foreach ($postslist as $post) :
setup_postdata($post);
$image = get_post_meta($post->ID, 'image', $single = true);
?>
<?php if($j == 1) : ?>
<div id="css1">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php else : ?>
<div id="css2">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php endif; $j++;?>
<?php endforeach; ?>
What this above code does is pull the latest 20 posts from all the categories from within my blog, with the first post in the list being styled differently than following 19 posts.
Now what I'm trying to do is for example, I want the fourth listed post to be from category "interviews" and stryled a certain way. I want the 7th post to be from "photos" and styled a certain way. All the while neither post gets duplicated in the original loop's query.
Since Loop's original query pulls from all categories, I'm trying to avoid the highlighted posts 4 and 7 in this example to be duplicated.
There may be another way easier to do this. I'm ears and that's why I'm here.
My site can be seen here: http://bit.ly/cbeVm2
The column that I'm referring to is the middle column right below the slider.
I really appreciate you guys and this site. I'm pretty knowledgeable (but not an expert) of wordpress and their loops but every now and again I try to tweek my site just a little and run into a problem like this.
I really hope that this is making since. Thr loop code example above is not what's actually used on my site. Just drummed something up similar and simple. And whatever help I get here, I'll just modify.
Answers (2)
Jermaine Oppong answers:
The way I understand what youre asking for is a code that will make the 4th post <strong>restricted</strong> to the 'interviews' category and the 7th post to 'photos'. Try this:
<?php
$j = 1;
$postslist = get_posts('showposts=20');
foreach ($postslist as $post) :
setup_postdata($post);
$image = get_post_meta($post->ID, 'image', $single = true);
?>
<?php if($j == 1) : ?>
<div id="css1">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php elseif ($j == 4) :
$postslist = get_posts('showposts=1&category_name=interviews');
foreach ($postslist as $post) {
setup_postdata($post);
$image = get_post_meta($post->ID, 'image', $single = true);
?>
<!-- Enter your CSS styles -->
<?php
}// End loop on the fourth post
elseif ($j == 7) :
$postslist = get_posts('showposts=1&category_name=photos');
foreach ($postslist as $post) {
setup_postdata($post);
$image = get_post_meta($post->ID, 'image', $single = true);
?>
<!-- enter your CSS here -->
<?php
} // End loop on the 7th post
else :
?>
<div id="css2">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php endif; $j++;?>
<?php endforeach; ?>
Brennen Jones comments:
I'm away from my computer right now. Viewing this throug cell and you got exactly what I was saying and by reading your code, it looks like we're on right track. I'm actually pretty excited...i will get to computer within 2 hours and update my response if this works.
Jermaine Oppong comments:
Cool Brennen.
Brennen Jones comments:
Everything worked! I'm about to select you as the winner, but there's one small thing that maybe you can help me out with after the fact.
I used your code as stated and everything seems fine, however...
it seems to be writing over the posts. I'm going to give you an example of a list to 7.
1.
2.
3.
4.
5.
6.
7.
This is how the list looks normally. Now when I add your code, it's like this:
1.
2.
Interviews
4.
5.
Photos
7.
Posts 3. and 6. are wiped off the list entirely until a new post comes in to shift the list down.
I wasn't looking to replace those 2 posts, I was just trying to insert "Interviews" and "Photos" into the loop around the posts.
I hope this makes sense.
Either way, I thank you for helping me because for the most part, your code gets the job done and maybe there's some other work around for that I or we could figure out later.
Thanks again,
Brennen
Bob answers:
Create a category condition to style. For instance for a category called "photos"
Add something like this into the loop
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( in_category('photos') ) { ?>
<div class="THIS IS YOUR CSS STYLE NAME"> <---category photos style you add to your css
<?php } else { ?>
<div class="post"> <---regular css style for posts
<?php } ?>
Brennen Jones comments:
Thanks for your response but Jermaine had exactly what I was looking for.