Add Classes to Page Header addon

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?

I can see the use for sure.

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

Glad you like it! 🙂

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’);

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?

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.

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 {

}