Change header background for category or pages

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 :)

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

I also need the code for the pages.

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

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

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 :)

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.

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?

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. :(

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 :)

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

No stress! :)

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?

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