Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
  • #5435

    I want to create a custom look for one of my categories that is different to other categories.

    I’ve copied the index.php file and called it category-6.php where 6 is the ID of the category I want to style differently.

    I’ve then copied the header.php and called it headeryoungstyle.php

    I’ve copied the bg.png file and changed the colors to my preferences and called it bgyoungstyle.png

    Now i’m a little lost. I want my new category-6.php to call my new headeryoungstyle.php and I want headeryoungstyle.php to use my new bgyoungstyle.png – how should I complete these steps?





    1) you can change the get_header() function in category-6.php so that it calls a specific header template. This codex page: tells you how to use the template name parameter.

    2) You can modify “header-{name}.php” and include/harcode the image or you can use a specific css class to call a different background image :)


    Cool – got me category file calling my new header now.

    Just need to include my new bgyoungstyle.png file now – i’ll have a try!



    OK – i’m in my new headeryoungstyle.php and have included my new background in the following code:

    where in the header file should i place it?



    If bgyoungstyle.png should replace bg.png on this category page you can use following css code in style1/2/3/4.css:

    background: url("../images/skin1/bgyoungstyle.png") repeat-x scroll 0 0 #FFFFFF;

    I assume you’re using this template for the category with the id “6”. You can change the background value (image path, color,etc.)


    More progress – I’ve copied the style1 file and called it style5 and have then changed the background image to my new background:


    background: #fff url(../images/skin1/bgyoungstyle.png) repeat-x 0 0;



    I’ve also commented out the old code that includes the style sheet in my new headeryoungstyle.php and have added :

    <link rel=”stylesheet” type=”text/css” href=”/author/wp-content/themes/newscast/css/style5.css” type=”text/css” media=”screen” />

    to my new headeryoungstyle.php

    but still the category is not showing the new background? Where did I go wrong?




    Just used your code and it works! If I could buy you a pint I would!!!

    Cheers Dude!



    Glad that I could help you :)


    One more quick thing. I also want to style the individual posts of the category so I made two copies single.php – single1.php and single2.php. I then deleted all the code from single.php and added:


    $post = $wp_query->post;

    if ( in_category(‘6’) ) {

    include(TEMPLATEPATH . ‘/single2.php’);

    } else {

    include(TEMPLATEPATH . ‘/single1.php’);



    Then I used the code you gave me to try and change the style of single2.php so I added the code below to style1.css:


    background: url(“../images/skin1/bgyoungstyle.png”) repeat-x scroll 0 0 #FFFFFF;


    But this doesn’t change the header in the posts? Any ideas?



    Instead of single2 fill in your post id or the template class (all classes are applied to the body tag). I can’t give you custom css code because I need a link to your (custom) single page first.


    This is link to the custom post in use (single2.php) – does that help? All I need to be able to do to is use my new header (bgyoungstyle.png) in single2.php




    Ok – I see the problem. Open up functions.php and add following code at the very bottom:

    function category_id_class($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
    $classes[] = 'category-'.$category->cat_ID;
    return $classes;
    add_filter('post_class', 'category_id_class');
    add_filter('body_class', 'category_id_class');


    Thanks so much!!! – Everything is working great!

    That’s two pints of beer I owe you now :o)



    How would I apply my custom header (bgyoungstyle.png) to a particular page template. I’ve created a new page template called ‘template-young.php’ which appears in the page ‘Template’ drop down box but i’m not sure how to get it to use my alternative header.

    Basically, I can use my alternative header in posts and categories and now want to use it in some pages to.




    Can you post a link to a “custom page template” please.


    I can’t access the page (login page appears instead)…


    Forgot I had the site locked while it’s still being built. You should be able to access it now.



    Ok – use:

    body. (Purchase code hidden if logged out) {
    background: url("../images/skin1/bgyoungstyle.png") repeat-x scroll 0 0 #FFFFFF;


    That worked great! Now I am able to style my categories, posts and pages differently ;o). Thanks for all your help! Just one thing though, now when I click on a menu item that should display only posts from one category it shows all posts from every category and also displays the home page slider. It’s doing this with all menu items that are categories. I’ve tried recreating the menu but it still shows every post for one category in the menu.

    For example if you look at:

    and click the menu item labeled ‘Clips & Cuttings’ this used to show only one post in the category but now it shows every post along with the home page slider :o( What can I do to fix this?


    Maybe you based your archive template on index.php? Use the standard archive.php to remove the slider…


    That was the cause – working fine now. Thanks! :o)


    Glad that it works now :)


    This was working perfect but something must have changed. The Homepage banner color was black which is how i’d like it but now it uses the navy blue banner (bgMediaRoom.png) which is for a specific category? I haven’t changed the CSS. I notice that when i comment out this line the Homapage banner becomes the correct black color again:


    background: url(“../images/skin1/bgMediaRoom.png”) repeat-x scroll 0 0 #FFFFFF;


    I can’t leave this line commented out as I need it to make this category navy blue. Any ideas?



    I don’t see how your body ended up getting a class like .category-6, if you remove this your problem is solved – the class doesn’t need to be on the body at all.


    Thanks, but if I do that then I lose all the work Dude and I did previously to make the headers change depending upon category. I found another solution so no need for help now.


    Sorry, I thought I found a way to fix it but sadly not. So the header background is now red on the home page and it should be the default black. How can I make it black on the homepage? The bg.png file hasn’t been changed and as far as I know I haven’t changed any of the CSS that effects the header background on the homepage.


    You can use:

    body.home {
    background: url("../images/skin1/bg.png") repeat-x scroll 0 0 #FFFFFF !important;


    Thanks so much Dude – that worked!



    Glad that it works now :)

Viewing 30 posts - 1 through 30 (of 30 total)

The topic ‘Different style for one category’ is closed to new replies.