Title: Styling archive with CSS and functions.php
Last modified: August 21, 2016

---

# Styling archive with CSS and functions.php

 *  [isabeld](https://wordpress.org/support/users/isabeld/)
 * (@isabeld)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/styling-archive-with-css-and-functionsphp/)
 * Hoping someone with a little more php experience can help me out as I’m learning
   as I go! I have a site with custom styling for the blog archive pages. Each has
   a custom header image and ‘Read More’ button. This is controlled, as far as I
   can tell, by custom CSS and the theme’s functions.php file.
 * Here’s the functions.php code:
 *     ```
       if ( !function_exists( 'aspire_get_catid_from_single' ) ) { // Added in 2.9
         function aspire_get_catid_from_single() {
           static $catID;
           if (!isset($catID)) {
             $catIds = array();
             $cats = get_the_category();
   
             foreach ($cats as $cat) {
               if ($cat->cat_ID >= 29 && $cat->cat_ID <= 115) {
                 $catIds[$cat->cat_ID] =  $cat->cat_ID;
               }
             }
             if (count($catIds) > 1) {
               unset($catIds[29]);
             }
   
             $catID = array_shift($catIds);
           }
           return $catID;
         }
       }
       ```
   
 * Here is the CSS:
 *     ```
       /*############## PAGE TITLE ##############*/
       body.page-category #page .title h2.title {
         background: transparent none no-repeat scroll 0 0;
         display: block;
         text-indent: -9999px;
         margin: 0;
         height: 80px;
         width: 100%;
         padding: 0;
       }
       body.category-29 #page .title h2.title {
         background-image: url(images/category/category_header_allrecipes.gif);
       }
       body.category-30 #page .title h2.title {
         background-image: url(images/category/category_header_ancho.gif);
       }
       body.category-31 #page .title h2.title {
         background-image: url(images/category/category_header_salmon.gif);
       }
       body.category-32 #page .title h2.title {
         background-image: url(images/category/category_header_curry.gif);
       }
       body.category-33 #page .title h2.title {
         background-image: url(images/category/category_header_steak.gif);
       }
       body.category-34 #page .title h2.title {
         background-image: url(images/category/category_header_coffee.gif);
       }
       body.category-35 #page .title h2.title {
         background-image: url(images/category/category_header_anyday.gif);
       }
       body.category-110 #page .title h2.title {
         background-image: url(images/category/category_header_taconight.gif!important);
       }
   
       /*############## READ MORE ##############*/
       body.page-category #page .entry a.more {
         background: transparent none no-repeat scroll 0 0;
         display: block;
         text-indent: -9999px;
         margin: 0;
         height: 45px;
         width: 140px;
         padding: 0;
       }
       body.category-29 #page .entry a.more {
         background-image: url(images/category/category_button_allrecipes.gif);
       }
       body.category-30 #page .entry a.more {
         background-image: url(images/category/category_button_ancho.gif);
       }
       body.category-31 #page .entry a.more {
         background-image: url(images/category/category_button_salmon.gif);
       }
       body.category-32 #page .entry a.more {
         background-image: url(images/category/category_button_curry.gif);
       }
       body.category-33 #page .entry a.more {
         background-image: url(images/category/category_button_steak.gif);
       }
       body.category-34 #page .entry a.more {
         background-image: url(images/category/category_button_coffee.gif);
       }
       body.category-35 #page .entry a.more {
         background-image: url(images/category/category_button_anyday.gif);
       }
       body.category-taco-night #page .entry a.more {
         background-image: url(images/category/category_button_taconight.gif);
       }
       ```
   
 * These are controlling [this page](http://www.justcookfoods.com/category/taco-night-blend-recipes/),
   which should look similar to [this one](http://www.justcookfoods.com/category/no-19-salmon-blend/).
 * The category id’s I need styled are 29-35 and now 110 (the new category.) I changed
   the parameter in functions.php above to include categories up to category-115(
   it used to be up to 35), but the new category isn’t displaying properly.
 * I found that the body class tag on [the category page](http://www.justcookfoods.com/category/taco-night-blend-recipes/)
   isn’t complete, which is the first problem – it should include ‘page-category
   category-slug’. But even when I override that with the slug in Chrome’s inspect
   feature, the custom styling still doesn’t display.
 * At this point I’m stuck, and the developers who wrote this code aren’t answering
   my emails! Can anyone help?

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

 *  [linux4me2](https://wordpress.org/support/users/linux4me2/)
 * (@linux4me2)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/styling-archive-with-css-and-functionsphp/#post-5010297)
 * The code in your functions.php is set up to use the ID, not the slug, so I would
   try changing this line in your CSS:
 *     ```
       body.category-taco-night #page .entry a.more {
         background-image: url(images/category/category_button_taconight.gif);
       }
       ```
   
 * to this:
 *     ```
       body.category-110 #page .entry a.more {
         background-image: url(images/category/category_button_taconight.gif);
       }
       ```
   
 *  Thread Starter [isabeld](https://wordpress.org/support/users/isabeld/)
 * (@isabeld)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/styling-archive-with-css-and-functionsphp/#post-5010305)
 * Hi! Thanks for the edit – that is indeed in need of updating. 🙂
 * That still doesn’t change the ‘read more’ link to display the proper image, though.
   So I think there’s some other problem with the PHP that’s preventing that body
   class tag from working, or something else entirely…

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

The topic ‘Styling archive with CSS and functions.php’ is closed to new replies.

## Tags

 * [category styling](https://wordpress.org/support/topic-tag/category-styling/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [isabeld](https://wordpress.org/support/users/isabeld/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/styling-archive-with-css-and-functionsphp/#post-5010305)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics