WordPress.org

1. shedwannits
   Member
   Posted 2 years ago #

   Hello,

   i would like posts to have different repeating backgrounds depending on what category they belong to.

   All posts from every category appear on one page, with the most recent post appearing first. Each post uses the same div id, so I can't define the background property as anything in CSS - that's what should change depending on the category of the post.

   So I did some research into using PHP and CSS to create variables - I got as far as using style.php instead of style.css and that worked fine.
   I understand how to declare variables in PHP but something just doesn't work.

   What I would like to happen:

   Category backgrounds are uploaded to img folder eg art_bg.jpg

   CSS background property of div in style.php is a variable:
   background: url(img/<?= $category; ?>_bg.jpg);

   Variable is declared in style.php (in the same place where the browser is instructed to interpret the code as CSS):
   $category = (don't know!);

   This is the stage where I am stuck! If the value isn't in quotes, the stylesheet breaks. Template Tags can't be used outside The Loop, but I need the Template Tag the_category to appear in the variable declaration for my idea to work - even if they did, I don't think they would be recognised in quotes!

   Any ideas? Can my CSS/PHP plan be followed through? Would appreciate any help, this is doing my head in rather! :)

   Thanks,

   James :)

2. shedwannits
   Member
   Posted 2 years ago #

   somehow managed to overlook googling:

   "different background each category wordpress"

   which returned a page that suggests that each category have its own div, and conditions be included in The Loop to state which div should be used for each category.

   think this might be the answer to my problem but still trying it out.

3. t31os
   Member
   Posted 2 years ago #

   Do this....

   <link rel="stylesheet" href="yourpath/style.php?cat=<?php echo get_the_category(); ?>" type="text/css" media="screen" />

   Appending a URL to the end, then in style.php... do the checks...

   <?php
   switch($_GET['cat']) {
     case '1':
     ?>
     .someclass {some css stuff}
     <?php
     break;
     case '2':
     ?>
     .someotherclass {some css stuff}
     <?php
     break;
     case '3':
     ?>
     .someotherclassagain {some css stuff}
     <?php
     break;
   } ?>

   Or if you prefer the if else way....

   <?php
   if($_GET['cat'] == '1') { ?>
   .catclass {css stuff}
   <?php
   } elseif($_GET['cat'] == '2') { ?>
   .catclass {css stuff}
   <?php
   } ?>

   Hope that helps..

4. shedwannits
   Member
   Posted 2 years ago #

   hi t31ios thanks very much for your speedy reply

   I decided to go for the if statements within the loop and have separate divs for categories but thanks again for your help, it's good to know it can be done.

   james

5. t31os
   Member
   Posted 2 years ago #

   You could also do this where you call the stylesheet...

   <link rel="stylesheet" href="yourpath/style.php?cat=<?php if(is_category('somecat')) { echo 'somecat';}
   elseif(is_category('anothercat')) { echo 'anothercat';} // and so on...
   ?>" type="text/css" media="screen" />

   That way you get use of the WP functions...

   And again just check in style.php using if else or switch/case, whichever you prefer..

   This being an alternative to using get_the_category(), which i think actually outputs linked categories, not just the cat name...

6. Gilligan
   Member
   Posted 2 years ago #

   I find it cleaner and simpler to have a separate CSS for each category via a functions.php in the themes directory.
   e.g.
   

   function cat1style_css() {
   if (is_category('1')) {?>
   <link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') ?>/cat1.css" /> <?php }
   }
   add_action('wp_head', 'cat1style_css');
   
   function cat2style_css() {
   if (is_category('2')) {?>
   <link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') ?>/cat2.css" /> <?php }
   }
   add_action('wp_head', 'cat2style_css');

   With this technique you can achieve a true cascade if you order the category functions properly. You may name the stylesheets and functions whatever you wish, for even more simplicity. (is_category variables should be numeric according to the cat#.)

   ref: themeshaper.com

7. t31os
   Member
   Posted 2 years ago #

   You could wrap that all into 1 function, but it really depends on your usage of the function(s) i guess.

   You could also check if the file exists before including it.. again this depends what you want...

Topic Closed

This topic has been closed to new replies.