Different style for one category

30 posts from 3 voices

• Started 1 year ago by cheekykev
• Latest reply from Dude
• This topic is resolved

Tags:

No tags yet.

1. 

   cheekykev
   Member

   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?

   Thanks,

   Kevin

   Posted 1 year ago #
2. 

   Dude
   Dude

   Hey,
   1) you can change the get_header() function in category-6.php so that it calls a specific header template. This codex page: http://codex.wordpress.org/Function_Reference/get_header 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 :)

   Posted 1 year ago #
3. 

   cheekykev
   Member

   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!

   K

   Posted 1 year ago #
4. 

   cheekykev
   Member

   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?

   Thanks

   Posted 1 year ago #
5. 

   Dude
   Dude

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

   body.category-6{
       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.)

   Posted 1 year ago #
6. 

   cheekykev
   Member

   More progress - I've copied the style1 file and called it style5 and have then changed the background image to my new background:
   body{
   background: #fff url(../images/skin1/bgyoungstyle.png) repeat-x 0 0;
   color:#666;
   }

   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?

   Thanks

   Kev

   Posted 1 year ago #
7. 

   cheekykev
   Member

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

   Cheers Dude!

   K

   Posted 1 year ago #
8. 

   Dude
   Dude

   Glad that I could help you :)

   Posted 1 year ago #
9. 

   cheekykev
   Member

   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:

   <?php
   $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:

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

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

   Thanks

   Posted 1 year ago #
10. 

    Dude
    Dude

    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.

    Posted 1 year ago #
11. 

    cheekykev
    Member

    http://www.nicolamorgan.com/author/books/know-your-brain/

    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

    Thanks

    Kev

    Posted 1 year ago #
12. 

    Dude
    Dude

    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');

    Posted 1 year ago #
13. 

    cheekykev
    Member

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

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

    Kev

    Posted 1 year ago #
14. 

    cheekykev
    Member

    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.

    Thanks

    Kev

    Posted 1 year ago #
15. 

    Dude
    Dude

    Can you post a link to a "custom page template" please.

    Posted 1 year ago #
16. 

    cheekykev
    Member

    http://www.nicolamorgan.com/author/about-me/

    Posted 1 year ago #
17. 

    Dude
    Dude

    I can't access the page (login page appears instead)...

    Posted 1 year ago #
18. 

    cheekykev
    Member

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

    K

    Posted 1 year ago #
19. 

    Dude
    Dude

    Ok - use:
    

    body.page-template-template-young-php{
        background: url("../images/skin1/bgyoungstyle.png") repeat-x scroll 0 0 #FFFFFF;
    }

    Posted 1 year ago #
20. 

    cheekykev
    Member

    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: http://www.nicolamorgan.com/author/clips/
    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?

    Posted 1 year ago #
21. 

    Dude
    Dude

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

    Posted 1 year ago #
22. 

    cheekykev
    Member

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

    Posted 1 year ago #
23. 

    Dude
    Dude

    Glad that it works now :)

    Posted 1 year ago #
24. 

    cheekykev
    Member

    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:

    body.category-26{
    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?

    K

    Posted 1 year ago #
25. 

    Chris Beard
    

    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.

    Posted 1 year ago #
26. 

    cheekykev
    Member

    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.

    Posted 1 year ago #
27. 

    cheekykev
    Member

    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.

    http://www.nicolamorgan.com/author/

    Posted 1 year ago #
28. 

    Dude
    Dude

    You can use:
    

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

    Posted 1 year ago #
29. 

    cheekykev
    Member

    Thanks so much Dude - that worked!

    K

    Posted 1 year ago #
30. 

    Dude
    Dude

    Glad that it works now :)

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.