WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] custom css for category pages (17 posts)

  1. vyww
    Member
    Posted 1 year ago #

    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;
    }
  2. frizax
    Member
    Posted 1 year ago #

    Please share the link of your website to check this in detail.

  3. vyww
    Member
    Posted 1 year ago #

    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.

  4. frizax
    Member
    Posted 1 year ago #

    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

  5. vyww
    Member
    Posted 1 year ago #

    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.]

  6. frizax
    Member
    Posted 1 year ago #

    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"

  7. vyww
    Member
    Posted 1 year ago #

    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="">

  8. frizax
    Member
    Posted 1 year ago #

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

  9. vyww
    Member
    Posted 1 year ago #

    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">

  10. frizax
    Member
    Posted 1 year ago #

    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);
  11. vyww
    Member
    Posted 1 year ago #

    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

  12. paulwpxp
    Font hero
    Posted 1 year ago #

    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}.

  13. vyww
    Member
    Posted 1 year ago #

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

  14. paulwpxp
    Font hero
    Posted 1 year ago #

    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;
    }
  15. vyww
    Member
    Posted 1 year ago #

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

  16. paulwpxp
    Font hero
    Posted 1 year ago #

    Ok, try adding this in too.

    background-attachment: fixed;

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

  17. vyww
    Member
    Posted 1 year ago #

    Works great, thank you!! :)

Topic Closed

This topic has been closed to new replies.

About this Topic