Add Classes to Page Header addon

Home Forums Support Add Classes to Page Header addon

Home Forums Support Add Classes to Page Header addon

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #245409
    mikei

    Hi Tom,

    I’m trying to use the Page Header addon for the first time). It’s great and super useful as usual), but it would be nice if you add classes as you did with the Sections.

    #245437
    Tom
    Lead Developer
    Lead Developer

    That would be kind of useful, although I could make the argument that you could generally use one of the built in classes in most cases? Any use cases for your own classes?

    #245440
    mikei

    Yes, I know (page-header-content generate-page-header generate-content-header). Maybe it’s rare, which I think is the case), in my particular case, I need to style it differently on different pages without any logic (can’t even use body classes). But I agree, maybe extremely rare case.

    PS. Actually, I can use body classes if I create more custom page templates. Solved).

    #245452
    Tom
    Lead Developer
    Lead Developer

    I can see the use for sure.

    Another alternative is to use the Simple CSS metabox for adding CSS specific to pages.

    #245461
    mikei

    No, not all headers are different. One header style for a group of pages, and another style for a group of pages. Two custom templates will work fine in my case. Thank you, the page header is awesome!)

    #245462
    Tom
    Lead Developer
    Lead Developer
    #516079
    Katie Jones

    I needed this, too – got it! 🙂 Here it is:

    function tu_add_body_classes($classes) {

    global $post;
    $page_header_id = get_post_meta($post->ID, “_generate-select-page-header”, true);
    $title = strtolower(get_the_title($page_header_id));
    $page_title_class = str_replace(” “, “_”, $title);
    $classes[] = $page_title_class;

    return $classes;
    }
    add_filter(‘body_class’, ‘tu_add_body_classes’);

    #518066
    Paul

    Thanks for this Katie Jones. But once this is added, how do you use it to add a class to any one specific page header? I’m not clear on that.

    BTW, I did have to escape the quotes with backslashes to get your code to validate. Like this:

    
    /* Add classes to GP Page Headers */
    function tu_add_body_classes($classes) {
    
    global $post;
    $page_header_id = get_post_meta($post->ID, “_generate-select-page-header”, true);
    $title = strtolower(get_the_title($page_header_id));
    $page_title_class = str_replace(\” \“, \“_\”, $title);
    $classes[] = $page_title_class;
    
    return $classes;
    }
    add_filter(‘body_class’, ‘tu_add_body_classes’);
    
    #518087
    Katie Jones

    Sure thing. 🙂

    This isn’t adding a class to the page header directly like @mikei asked for; instead, it’s adding a class to the body indicating what page header is being used, a slightly different approach that should accomplish the same thing. So, instead of styling the page header via .generate-page-header.custom-body-class, you style via .body-class-from-page-header .generate-page-header.

    You could also add a little more logic to this to make your own body classes for each page header; I just did the simple thing generating them from the page title.

    Yep, I think the quotes didn’t go through correctly in my post since I didn’t use the ‘code’ block – those should be the regular quotations instead of curly ones.

    #518163
    Paul

    Ah gotcha.

    Now I know what was throwing me off. I was looking in body tag for my blog’s page header name ‘blog_header’ (yes, I know I can target with .blog, but this was the window I already had open and knew it used a page header) BUT for whatever reason, the code snippet you posted didn’t use the name of the blog’s page header, but used the initial post’s blog page header name for the body class instead. So here I am looking for ‘blog_header’ in the body tag, not to be found, and on further inspection I found the class ‘course_event_header’ in the body instead which happens to be the generated class name for the first post which is a Course/Event that uses the Course Event Header. Weird huh?

    Upon looking at other pages/posts using different page headers, I can now see the proper page header class in the body tag of those respective pages.

    I thought I was going crazy for a moment! lol

    I’m wondering if Tom knows about this weird quirk?

    #518180
    Katie Jones

    Ah, if I understand correctly I don’t think that’s a quirk – it’s that this code is using the page header’s title, not the page title / post title / location (like Blog). That way you can style everywhere the page header appears at once.

    #518186
    Paul

    That’s not what I mean. On the blog index page itself, the code is creating the class name from the name of page header assigned to the first post that it sees in the feed rather than from the name of the page header that’s assigned to the blog index page.

    Reason I need to use classes on page headers is because I have three different sections of the site that need their own specific colors/styling.

    Would be nice if Tom could add CSS ID and CSS Class meta fields to the individual page headers to make this a whole lot easier.

    #518187
    Katie Jones

    Oh, that makes sense. Probably something to do with global $post.

    #518321
    Tom
    Lead Developer
    Lead Developer

    Each Page Header has a specific ID which you can target.

    For example, if you’re wanting to target a Page Header with the ID of 10, you would do this:

    #page-header-10 {
    
    }
    #518344
    Paul

    Tom, yes, I realize that. But what I’m trying to do is link groups of page headers with a common class so that all the page content under those grouped page headers could be styled the same way. Sure I can grab all the page header IDs and put them into CSS manually, but having to check the source code for each one is a bit tedious.

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