[Resolved] New Page Header Not Working Properly

Home Forums Support [Resolved] New Page Header Not Working Properly

Home Forums Support New Page Header Not Working Properly

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #378439
    Paul

    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.

    #378602
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #378944
    Paul

    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!

    #379237
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #379696
    Paul

    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!

    #379761
    Ria

    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.” πŸ™‚

    #379813
    Tom
    Lead Developer
    Lead Developer

    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.

    #379885
    Paul

    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.

    #380004
    Tom
    Lead Developer
    Lead Developer

    Can you link me to one of the single posts within that category?

    #380300
    Paul

    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.

    #380314
    Ria

    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. πŸ™‚

    #380453
    Tom
    Lead Developer
    Lead Developer

    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! πŸ™‚

    #380557
    Paul

    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!

    #380717
    Tom
    Lead Developer
    Lead Developer

    Perfect! πŸ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.