Different CSS styles for multiple categories single post page

  • Resolved wp-tej

    (@wp-tej)


    14 years ago

    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Digital Raindrops

    (@adeptris)

    14 years ago

    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() 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

    (@wp-tej)

    13 years, 12 months ago

    Hi Paul, thanks for your help.

    I’ve found a solution.

    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.