[Resolved] Change header background for category or pages

[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?

[Tom]

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 🙂

[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”.

[anamoore]

I also need the code for the pages.

[Tom]

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

[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`…

[Tom]

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 🙂

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

[Tom]

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?

[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. 🙁

[Tom]

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 🙂

[anamoore]

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

[Tom]

No stress! 🙂

[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?

[Tom]

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

[Author]

Posts