categories - Set colors depending on category

I have this function which outputs the last 6 posts of categories 1 and 2.

<ul>
<?php query_posts('cat=1,2&showposts=6'); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><strong><?php the_title(); ?></strong></a><br />
    <em><?php echo substr(get_the_excerpt(), 0,110); ?> ...</em>
    </li>
    <br />
<?php endwhile; ?>
</ul>

What I'd like to do is have the link to the article (for instance) red if it's from category 1 and green if it's from category 2. Can you help me?

I have this function which outputs the last 6 posts of categories 1 and 2.

<ul>
<?php query_posts('cat=1,2&showposts=6'); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><strong><?php the_title(); ?></strong></a><br />
    <em><?php echo substr(get_the_excerpt(), 0,110); ?> ...</em>
    </li>
    <br />
<?php endwhile; ?>
</ul>

What I'd like to do is have the link to the article (for instance) red if it's from category 1 and green if it's from category 2. Can you help me?

• categories
• wp-query
• query-posts

Share Improve this question asked Nov 12, 2013 at 17:45 MultiformeIngegnoMultiformeIngegno 29055 silver badges2626 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

Setting aside that you're incorrectly using query_posts(), the easiest solution is to add a call to post_class(), to output post-specific classes, including .category-{ID} and .category-{slug}:

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <li <?php post_class(); ?>><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><strong><?php the_title(); ?></strong></a><br />
    <em><?php echo substr(get_the_excerpt(), 0,110); ?> ...</em>
    </li>
    <br />
<?php endwhile; ?>

Then, you can use CSS to target li.category-{ID}.

This isn't really the most dynamic solution but you could do something like this:

<ul>
<?php query_posts('cat=1,2&showposts=6'); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

  <?php if($post->post_category == 1) : ?>
    <li style="color:red">
  <?php else : ?>
    <li style="color:green">
  <?php endif; ?>

        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><strong><?php the_title(); ?></strong></a><br />
        <em><?php echo substr(get_the_excerpt(), 0,110); ?> ...</em>
    </li>
    <br />
<?php endwhile; ?>
</ul>

Alternatively you could dynamically add a class for each category, here I'm basing it on slug but the best solution might be to base it on term_id Codex

<ul>
<?php query_posts('cat=1,2&showposts=6'); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <?php $cat = get_the_category(); ?>
    <li class="catColor-<?php echo $cat->slug; ?>">
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><strong><?php the_title(); ?></strong></a><br />
        <em><?php echo substr(get_the_excerpt(), 0,110); ?> ...</em>
    </li>
    <br />
<?php endwhile; ?>
</ul>

If you are familiar enough with wordpress / php you could take a shot at adding a custom field to your categories to add colors there. Here's How I did That