Archived topic
New Page Header Not Working Properly
13 replies · Started by Paul on September 3, 2017
Hey guys,
The new page header feature set doesn't appear to be working properly.
I'm trying to get *single posts* to display a different page header background color depending on the *category* they are in.
Single posts with category 'student-articles' should have a blue page header, single posts with category 'general-articles' should have a green background page header, and single posts with 'newsletter' should have a yellow background in the page header.
I added three custom page headers: General Articles with a Green background, Student Articles with a Blue background, and Test with a Yellow background.
Then I assigned these to their respective Post categories 'general-articles', 'student-articles', and 'newsletters' (using Test page header).
Once done, nothing changes, all single posts keep their default appearance. However, the category *archives* do show the proper respective background colors:
- http://dev.ayurvedacollege.com/articles/category/general-articles/ has green header
- http://dev.ayurvedacollege.com/articles/category/student-articles/ has blue header
- http://dev.ayurvedacollege.com/articles/category/newsletter/ has yellow header
But this is not what I want. I want the *single posts* within a category to have the distinct page header styling; I don't really care about archive pages. You'll need to click on an individual post in any category to see that the styling isn't applied to the single post.
So I tried something different...
I set the Page Header Global setting to the General Articles page header and ALL single posts use that page heading style (Green background). So the Global page header setting works.
Next, I set the category 'student-articles' to use the Student Articles blue page header, but nothing changed; the posts in that category kept the Global General Articles styling with green background -- they should have a blue background.
I also tried the same with the yellow Test page header applied to posts with the 'newsletters' category. No go. The single posts in that category just have default single post styling.
Only the global setting works across single posts. Attempting to override the Global style with individual category page header settings does not work for single posts, only category archive pages.
I've commented out my entire child functions file to make sure that's not the culprit.
How to I apply page header settings to individual posts depending on category? I was under the impression that this is what the new Page Headers update was supposed to do.
Hi there,
The category Page Headers will only display on the category archive page - not the single posts within the category.
Currently that kind of functionality isn't possible, but I really like the idea as a future feature.
If all you're doing is changing the background color, you should be able to do it with CSS super easily.
Let me know if you need any help with that :)
Hi Tom,
Ah, that's what I was afraid of.
I'd really love to see this as a feature for single posts by category as the separate stylings would visually help readers know what "silo" they are reading the content in. Might also be cool feature to be able to use the post's featured image as the background image of the page header on that particular post too.
What would the CSS solution be for what I want to do?
I hope your office's new GP Gray #EAEAEA walls are coming along nicely!
You can already use the featured image as the background image of each individual post - just turn on the Background Image option and it will happen automatically.
I agree about the feature - I wonder how the UI would look. An option for all single posts within the category you're currently editing?
Each single post within a category should have that category slug in the <body> classes.
So you should be able to do this:
.category-slug .page-header-content {
background-color: #EAEAEA;
}Office looks and feels great! Ready to put in some serious work :)
Thanks for that CSS snippet Tom, I'll give it a try.
As for future feature to make the page header styling apply to single posts within that category, I think adding a checkbox within the Category editor: 'Apply Page Header styling to all single posts in this category.' would probably be easiest to understand.
Cheers!
I second Paul's suggestion "Might also be cool feature to be able to use the post’s featured image as the background image of the page header on that particular post too." :)
Hi Ria,
You can already do this - simply turn on the Background Image option, and leave the featured image/image tab sections empty while editing the actual Page Header.
Then it will use the current post featured image as the background.
Hi Tom,
The CSS example you provided above didn't work. The class for my category 'student-articles' isn't called. I tried !important at the end and that didn't make any difference.
'category-student-articles' does get called after the page header within the <article> element, but that comes after the GP page header section, so wouldn't have an effect on the page header's background color.
Can you link me to one of the single posts within that category?
Here's a post with the 'student-articles' category:
http://dev.ayurvedacollege.com/articles/cannabis-to-treat-anxiety/
Here's my CSS:
.student-articles .page-header-content {background-color: #1E72BD !important;}
Page Header Global Locations is set to "General Articles" page header with green background. This post should have a blue page header background though.
Thanks, Tom! That's a neat little trick I didn't know about. Works like a charm. I'll step out of Paul's thread now. :)
Right, I forgot that WP doesn't add the category slug to the body class in single posts. Try this: https://css-tricks.com/snippets/wordpress/add-category-name-body_class/
No problem, Ria! :)
Well hot damn! That did the trick, Tom.
Here's what I added to functions.php:
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) {
// add category slug to the $classes array
$classes[] = $category->category_nicename;
}
}
// return the $classes array
return $classes;
}Then I added these to style.css:
.student-articles .page-header-content {background-color: #1E72BD;}
.newsletter .page-header-content {background-color: #f1c40f;}Finally, I set the Global Page Header to my 'General Articles' preset so that a green background appears on all other categories single post page headers.
Cheers!
Perfect! :)
