Different style for different cat headings on homepage

  • Hi folks

    I’m trying to colour the background of the excerpt titles on my home page according to the category they are in. (I’ve tried to search for this, but I’m not even sure what to call it so I’m hoping someone can help me.)

    I want the headings on index.php to have a different background colour according to their category, to fit in with the colour coding on the rest of the site. Here is an example of what I’d like to do:

    Here is my current code:`
    <div class=”titlehousekeeping”><span class=”cat_title”><?php the_category(‘, ‘); ?> »</span>

    <span class=”title”>” rel=”bookmark”><?php the_title(); ?>

    </span>
    </div>
    `
    I can’t just put

    <span class="titleculture">Culture >> Lorem Ipsum </h3>, <span class="titlebusiness">Business</h3>

    in a list in the excerpt query, as there may be more posts with culture than business, and I want it to be the most recent posts rather than one from each category (I have 7 categories).

    I’m pretty sweet with css but I’m very much a newbie to php, so I’m not sure how to call a different css style for the title according to the category it’s in.

    What I hoped, was perhaps there is some way to call the word into the php file Like:

    <div class="title<?php get_cat_name(''); ?>"> to get <div class="titleculture"> instead of <div class="titlehousekeeping">.

    But that doesn’t work.

    I hope I’ve been clear enough, any help is really appreciated!

    Thanks
    Charlette

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

  • Hi Charlette – take a look at that in_category() function
    https://codex.www.ads-software.com/Template_Tags/in_category

    <?php if ( in_category('children') ) {
   $cat_name = 'children';
} elseif ( in_category('culture-and-opinion') ) { // category slug
   $cat_name = 'culture';
} elseif ( in_category('food-and-culinary') ) {
   $cat_name = 'food';
} elseif ......
?>
    That code goes inside the WordPress loop, before this next statement
<div class="title<?php echo $cat_name; ?>">

    There are implications if a post is assigned to more than one category – the first in_category statement that tests true will become the category name for that post.

    Thread Starter canchuckwood

    (@canchuckwood)

    Hi stvwlf, thanks so much for replying to my post!

    I understand the "<?php if ( in_category('children') ) {" part, but not the "$cat_name = 'children';" part.

    I’m after putting a different class of html code between the php, like the example above, or this example which I am trying to do in single.php:

    <?php 

if ( in_category( 'housekeeping' )) {
<div id="pagehousekeeping" class="clearfloat">
} elseif ( in_category( 'gardening' )) {
	<div id="pagegardening" class="clearfloat">
} else {
	<div id="page" class="clearfloat">
}
?>

    Or am I going about the colour coding in a complicated way? Here is my draft site so far: housewife.sunstonemedia.co.nz.

    Like I said, I really know very little about php so I’m a cut and paste-r at the moment, not very good at troubleshooting.

    Thanks again for any help you’re able to give!
    Charlette

    use this code 

    this goes just before the output statement, below
<?php if ( in_category('housekeeping') ) {
   $id_name = 'pagehousekeeping';
} elseif ( in_category('gardening') ) {
   $id_name = 'pagegardening';
} else {
   $id_name = 'page';
} ?>
    output statement
<div id="<?php echo $id_name; ?>" class="clearfloat">

    Would
    <span class="<?php the_category(', '); ?>"><?php the_category(', '); ?> ?</span>
    Or something similar Work?

    no

    Oh. Fail D: I was hoping something simple would work. lol

    Thread Starter canchuckwood

    (@canchuckwood)

    @stvwlf – Thanks so much! That works brilliantly :~) Really appreciate your time and help.

    @coldtraffic – I tried something similiar, hoping it would be simple! No such luck :~)

    Hello!
    Im trying to do something like this but with more id’s to change, cause i need to change the font color of the title, a background color witch its in a another div and a icon, in another div too.
    how can i use this code and change more than one id of one div?

    Im very newbie with php! sorry!
    Thanks in advance

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Different style for different cat headings on homepage’ is closed to new replies.