Support » Themes and Templates » custom css for category pages

  • Resolved vyww

    (@vyww)


    I wanted to add custom CSS for specific categories in my WordPress, everything seemed to be working perfectly at first. But when I installed some plugins like Lazy Load and W3 Cache, the custom CSS would disappear on the entry page itself and revert back to the default template.

    I have since uninstalled the plugins, but the custom CSS does not return. Is there a way to fix this? Thank you! 🙂

    My code (all in a child theme) for the category pages:

    .category-photography .container {
    	max-width: 1024px;
    }
    body.category-photography {
        background-color: #FDFDFD !important;
    }
    .category-photography #page-container {
    	border: 0px;
    	background: #FDFDFD;
    	box-shadow: none;
    }
    .category-photography h1.entry-title {
    	display: none;
    }
    .category-photography .below-content {
    	display: none;
    }
    .category-blog .container {
    	max-width: 450px;
    }
    body.category-blog {
    	background-color: #f0eeeb;
    	background-image: url('http://www.vyee.5gbfree.com/wp-content/uploads/2013/05/water-lilies-claude-monet-re_mini.jpg');
    	background-repeat: repeat-y;
    	background-position: top center;
    	background-attachment: fixed;
    }
    .category-blog .post .below-content {
    	background: #FDFDFD !important;
    	border: 1px dotted #efefef !important;
    }
    .category-blog #logo #searchform #s {
    	position: relative;
    	top: -90px;
    }
Viewing 15 replies - 1 through 15 (of 16 total)
  • Please share the link of your website to check this in detail.

    Ah sorry about that! This is the category page and this is the entry page.

    It used to display the same custom CSS before, so I’ve no idea what happened.

    I reviewed both the links.

    As per my understanding you want to display background image on entry page.

    If yes, this is not working because there is no category class in body tag (category-blog) on entry page. (see the view source of entry page)

    Now to implement this, you have to add category-blog class on entry page by adding following code in function.php file:

    add_filter('body_class','add_category_to_single');
    function add_category_to_single($classes, $class) {
    	if (is_single() ) {
    		global $post;
    		foreach((get_the_category($post->ID)) as $category) {
    			// add category slug to the $classes array
    			$classes[] = "cateogry-" . $category->category_nicename;
    		}
    	}
    	// return the $classes array
    	return $classes;
    }

    Hope this works. Code taken from here

    It says: Cannot redeclare origami_print_styles().

    Sorry about this, as I know nothing about php, but which part of functions.php should I place the code?

    In case it’s needed, here’s the functions.php:

    [Excessive code moderated. Please use a pastebin.]

    Just place it add the end of functions.php file just before “?>” (closing php tag, if there).

    If you still face similar problem, try by changing function name. (replace “add_category_to_single” with something like “custom_add_category_to_single”

    I’m not sure what’s wrong, but when I add the code (replacing it with the “custom_add_category_to_single”), I get this on the website:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘add_category_to_single’ not found or invalid function name in /home/vyee/public_html/wp-includes/plugin.php on line 173

    Warning: join(): Invalid arguments passed in /home/vyee/public_html/wp-includes/post-template.php on line 389
    class=””>

    I think you replace “add_category_to_single” once only, it was 2 times in the code (first 2 lines).

    I’m sorry this is so much trouble! I pasted the code above, with the 2 replacements of “custom_add_category_to_single” and it says:

    Warning: Missing argument 2 for custom_add_category_to_single() in /home/vyee/public_html/wp-content/themes/origami/functions.php on line 457
    class=”archive category category-blog category-14 logged-in admin-bar no-customize-support custom-background”>

    I have checked by setting up origami theme on my local, it working fine for me. But after searching on google I found a solution at link, hope this work for you. Please replace:

    add_filter('body_class','add_category_to_single');

    with

    add_filter('body_class','add_category_to_single', 10, 2);

    Oh dear I don’t know what’s wrong but I’ve added the codes

    add_filter('body_class','add_category_to_single', 10, 2);
    function add_category_to_single($classes, $class) {
    	if (is_single() ) {
    		global $post;
    		foreach((get_the_category($post->ID)) as $category) {
    			// add category slug to the $classes array
    			$classes[] = "cateogry-" . $category->category_nicename;
    		}
    	}
    	// return the $classes array
    	return $classes;
    }

    but the custom CSS still doesn’t show up on the entry page

    The function code works as expect ( I just tried it in my local ).

    But there is a typo in the function "cateogry-" should be "category-".

    Make sure you got post with your category assigned, and also make sure your CSS is using the right seclector, in this case it’s .category-{my-cat-slug}.

    Ah I think it was the typo! It works now, thank you so much for your patience 🙂

    On a separate subject, for your big bg image like that, try to make it light in file size ( optimize for web ), and consider using this

    body.category-blog {
    	background-color: #f0eeeb;
    	background-image: url("http://www.vyee.5gbfree.com/wp-content/uploads/2013/05/water-lilies-claude-monet-re_mini.jpg");
    	background-position: center center;
    	background-repeat: no-repeat;
    	background-size: cover;
    }

    It works perfectly on the entry page but strangely zoomed in on the category page?

    Ok, try adding this in too.

    background-attachment: fixed;

    Now it should work regardless of how tall the page element is.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘custom css for category pages’ is closed to new replies.