[Resolved] Change header background for category or pages

Home Forums Support Change header background for category or pages

  • This topic has 18 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #107502
    anamoore

    Hy!

    I have GP premium.

    I use to clasify my articles by big categories or pages. I use only one header background for the entire site, but I want to have a representative site header image for each category when you click on it, and for each article from that category. Same to pages. How to do that?

    #107569
    Tom
    Lead Developer
    Lead Developer

    You can use CSS like this:

    .category-xx .site-header {
          background-image: url('CUSTOM IMAGE URL');
    }

    Replace xx with the ID of that specific category.

    Let me know if that helps or not 🙂

    #107624
    anamoore

    Hey

    It worked, but only for category blog page. I also want it set for the articles that are in it, when you click on them. I mean, for the articles that have the main category setted as ex: “Cars”.

    #107627
    anamoore

    I also need the code for the pages.

    #107675
    Tom
    Lead Developer
    Lead Developer

    WordPress doesn’t add the category class to the single posts (for some reason).

    You can manually add the classes to your single posts using a function like this: https://wordpress.org/support/topic/modify-body_class-output-to-show-category-slug-for-single-posts?replies=11#post-1396482

    As for pages, it’s very similar to the above:

    body.page-id-xx {
         background-image: url('');
    }
    #108231
    anamoore

    Hi, Tom!

    Unfortunately, I cant handle this…
    I tried inserting <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> in Index.php and then inserting category-cars {background: red;} in CSS Editor, but something its missing…

    First, on Homepage, there is a little background around the excerpts of posts from that category and I dont want that.

    Then, I click on the excerpt to view the post. Here, the post has the main background of the site, not the background from the command category-cars {background: red;} in CSS Editor`…

    #108374
    Tom
    Lead Developer
    Lead Developer

    Shouldn’t have to insert anything into index.php..

    This is the code you want to add into your child theme functions.php:

    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) {
    			echo $category->cat_name . ' ';
    			// add category slug to the $classes array
    			$classes[] = 'category-'.$category->slug;
    		}
    	}
    	// return the $classes array
    	return $classes;
    }

    Then your CSS should work 🙂

    #108460
    anamoore

    CSS stil don’t work. I think it should be somethhing like “if it’s single and in category 7 then take category site-header”, but don’t know how to write it.

    #108506
    Tom
    Lead Developer
    Lead Developer

    The above code if added to your functions.php file should add the category name to the body class on single posts.

    Can you link me to your site so I can see if the code is working?

    #108512
    anamoore

    Here

    1. Click on Cars category in menu. You will see a particular Mercedes header and a dark purple background. 2. Click on a post excerpt, you won’t see that header and background anymore. 🙁

    #108575
    Tom
    Lead Developer
    Lead Developer

    In your CSS, you have the custom class set to: .category-7

    Instead, you should use: .category-cars

    Then it should work.

    Let me know 🙂

    #108639
    anamoore

    Yay! It worked!
    Thank you very much, again, and sorry for stressing you 🙁

    #108667
    Tom
    Lead Developer
    Lead Developer
    #120576
    anamoore

    Hello!

    I updated the theme, and the code doesn’t work anymore.

    The code for functions.php was:

    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) {
    			echo $category->cat_name . ' ';
    			// add category slug to the $classes array
    			$classes[] = 'category-'.$category->slug;
    		}
    	}
    	// return the $classes array
    	return $classes;
    }

    I got some text on the header like: Warning: Missing argument 2 for add_category_to_single() in /home/roxiro5/public_html/roxirose.com/wp-content/themes/generatepress/functions.php on line 598
    Cars class=”single single-post postid-2006 single-format-standard logged-in admin-bar no-customize-support post-image-above-header post-image-aligned-center secondary-nav-above-header secondary-nav-aligned-right featured-image-active no-sidebar nav-below-header fluid-header separate-containers active-footer-widgets-1 nav-aligned-center header-aligned-center category-cars”>

    what should I do?

    #120674
    Tom
    Lead Developer
    Lead Developer

    Try this:

    add_filter('body_class','add_category_to_single');
    function add_category_to_single($classes) {
    	if (is_single() ) {
    		global $post;
    		foreach((get_the_category($post->ID)) as $category) {
    			echo $category->cat_name . ' ';
    			// add category slug to the $classes array
    			$classes[] = 'category-'.$category->slug;
    		}
    	}
    	// return the $classes array
    	return $classes;
    }
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.