Title: Different CSS styles for multiple categories single post page
Last modified: August 20, 2016

---

# Different CSS styles for multiple categories single post page

 *  Resolved [wp-tej](https://wordpress.org/support/users/wp-tej/)
 * (@wp-tej)
 * [14 years ago](https://wordpress.org/support/topic/style-the_category/)
 * Hi,
 * I have been tearing my hair out on this issue and can’t seem to find a solution.
   Maybe some can share some tips or solve my problem.
 * Here goes:
 * I want to style categories in my css, but have not been able to achieve this.
   
   Each category has its own color assigned to it, which I want to be reflected 
   not just in the main navigation but also a single post page.
 * Once a user chooses a post to read they will then be taken to the single post
   page (see link). It is at this point I have an issue, included on the single 
   post page is the title of the post and the category which the post belongs to.
 * I want the the color assigned to each category added to the single post page.
   
   At frist it seemed that the “the_category” was the ideal tag to use here. But
   what I have noticed is the tag does not add a class or id and I have no idea 
   how to specify a class or id.
 * Any help or pointers would be much appreciated.
 * [http://dl.dropbox.com/u/7379788/Wp-problem/problem-wp.jpg](http://dl.dropbox.com/u/7379788/Wp-problem/problem-wp.jpg)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [14 years ago](https://wordpress.org/support/topic/style-the_category/#post-2741955)
 * The problem here is that **a post can belong to a number of categories**, like
   Sport and Basketball, if your posts have more than one category then you may 
   have problems, **if the first category is fine **then something like get the 
   first category{slug} from the post and use this as the post class:
 *     ```
       <?php
       /* Gets all the categories for the post as an ARRAY */
       $category = get_the_category();
       /* if we have categories get the first slug {nice_name} */
       $class = ($category) ? $category[0]->slug : '';
       ?>
       ```
   
 * Now we add our [Post_Class()](http://codex.wordpress.org/Function_Reference/post_class)
   name Category = “Basketball Teams” {slug} would be lowercase and no spaces **
   basketball-teams**, this code would be in the content or loop area:
 *     ```
       <article id="post-<?php the_ID(); ?>" <?php post_class( $class ); ?>>
       ```
   
 * Then in the style.css you would create a style
 *     ```
       .basketball-teams {
          background: #e0e0e0;
       }
       ```
   
 * If this you are using several categories per post, then you could think about(
   custom field, post meta boxes, or adding a category dropdown to be selected on
   each post, then use get post meta to set or return the category for style class.
 *     ```
       <?php
       /* Has a class name been set in the posts meta */
       $class = get_post_meta( get_the_id(), 'css_class' , true );
       if(! $class ) {
       	/* Gets all the categories for the post as an array */
       	$categories = get_the_category();
       	$class = ($categories) ? $category[0]->slug : '';
       }
       ?>
       ```
   
 * .
    ALL CODE HAS NOT BEEN TESTED
 * HTH
 * David
 *  Thread Starter [wp-tej](https://wordpress.org/support/users/wp-tej/)
 * (@wp-tej)
 * [13 years, 12 months ago](https://wordpress.org/support/topic/style-the_category/#post-2742057)
 * Hi Paul, thanks for your help.
 * I’ve found a solution.
 * [http://wpquestions.com/question/show/id/2303](http://wpquestions.com/question/show/id/2303)
 * Thanks
 * Tej

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Different CSS styles for multiple categories single post page’ is closed
to new replies.

 * 2 replies
 * 2 participants
 * Last reply from: [wp-tej](https://wordpress.org/support/users/wp-tej/)
 * Last activity: [13 years, 12 months ago](https://wordpress.org/support/topic/style-the_category/#post-2742057)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics