[Resolved] Different Header on Different Pages / Posts

[Brent Wilson]

What is the best way to have a different header on different pages or posts on a website that has a sticky header set to use the navigation as the header? Primarily I would be looking to change the header background color on certain pages/posts.

[Ying]

Primarily I would be looking to change the header background color on certain pages/posts.

If just background color, CSS should do the job 🙂

[Brent Wilson]

Where would I apply that so that it only applies to certain pages/posts? Would I add CSS to a header element?

[Ying]

You can try something like this:

.page-id-10 nav#site-navigation {
    background-color: red;
}
.page-id-10 nav#sticky-navigation {
    background-color: blue;
}

You just need to switch the page ID for different pages.

[Brent Wilson]

And what if it is a certain taxonomy term of posts?

[Ying]

You mean single post page with certain taxonomy?

If so, CSS can’t target that as there’s no specific taxonomy class in the body tag.

You can try this PHP snippet to add category to single post’s body class:

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 you can use something like this:

.categoryname nav#site-navigation {
    background-color: red;
}
.categoryname nav#sticky-navigation {
    background-color: blue;
}

[Brent Wilson]

Would it be easier to create the header/navigation as block elements and then assign them to the pages/posts I want them assigned to? Or would it be challenging to get the block element headers to behave as sticky menus?

[Ying]

The current block element – site header replaces the site header, not the navigation.

When you are using navigation as header, it will create a new header but won’t affect your current navigation.

And it can’t turn to sticky navigation.

[Brent Wilson]

Okay, so I added the PHP to the child theme. How do I determine what the CSS category name should be for a certain taxonomy term? For example, on this post the term I want to target is taxonomy category slug camp_meeting_years and the individual taxonomy term is 2020: https://wordpress-483838-2431328.cloudwaysapps.com/events/fort-mcmurray-david-guzman/

[Brent Wilson]

<article id="post-247" class="dynamic-content-template post-247 events type-events status-publish hentry age-group-adults time-of-day-evening video-url-yes camp-meeting-year-12">

I did find this line when I went to view source for that post. I think the camp-meeting-year-12 is probably the class I want to target in order to target posts with the year 2020 taxonomy. So would the .categoryname in your sample CSS just be changed to .camp-meeting-year-12. Or do I need to add more classes or ids or something?

[Ying]

You can’t use the class attached to the article tag, it has to come from a parent element of the header which is body.

The link you attached is a custom post type, the previous PHP is for regular posts.

Try this one instead:

add_filter('body_class','add_category_to_single');
  function add_category_to_single($classes) {
    if (is_singular()  ) {
      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;
  }

And are you sure the taxonomy is the WP core category? Or is it a custom taxonomy?

[Brent Wilson]

Yes, it is a custom post type. And the taxonomy is a custom taxonomy as well.

[Fernando]

Hi Brent,

If that’s the case, you would need to alter the PHP code to something like this:

add_filter('body_class','add_category_to_singlee');
  function add_category_to_singlee($classes) {
    if (is_singular()) {
      global $post;
		
      foreach((get_field( 'customtaxonomy')) as $category) {
        // add category slug to the $classes array
        $classes[] = $category->slug;
      }
    }
    // return the $classes array
    return $classes;
  }

For this code to work, kindly set the Return Value of the custom taxonomy to Term Object: https://share.getcloudapp.com/9ZumrKDO

Kindly replace customtaxonomy in the code above with the field name of your custom field as well.

Hope this clarifies. 🙂

[Brent Wilson]

I am kind of in over my head on this PHP stuff. But I want to get this issue figured out.

I am getting an error when I try to save the PHP that Fernando provided above in the child theme:

Your PHP code changes were rolled back due to an error on line 14 of file wp-content/themes/clariio general child theme/functions.php. Please fix and try saving again.

Uncaught Error: Call to undefined function get_field() in wp-content/themes/clariio general child theme/functions.php:14
Stack trace:
#0 wp-includes/class-wp-hook.php(309): add_category_to_singlee()
#1 wp-includes/plugin.php(189): WP_Hook->apply_filters()
#2 wp-includes/post-template.php(836): apply_filters()
#3 wp-includes/post-template.php(595): get_body_class()
#4 wp-content/themes/generatepress/header.php(20): body_class()
#5 wp-includes/template.php(770): require_once('/home/483838.cl...')
#6 wp-includes/template.php(716): load_template()
#7 /home/483838.cloudwaysapps.com/cstaqaar

Here is the PHP I am trying to add:

add_filter('body_class','add_category_to_singlee');
  function add_category_to_singlee($classes) {
    if (is_singular()) {
      global $post;
		
      foreach((get_field( 'taxonomy_05r4ilvfz8h')) as $category) {
        // add category slug to the $classes array
        $classes[] = $category->slug;
      }
    }
    // return the $classes array
    return $classes;
  }

I am not totally confident that I have the right custom taxonomy entered. I have the taxonomy set up as a custom taxonomy. But I have added it as a custom field for this custom post type. So that taxonomy_05r4ilvfz8h is the ID for the custom field that is tied back to a custom taxonomy. Should I instead be using the slug for the custom taxonomy?

[Fernando]

To confirm, how are you adding the custom taxonomy? The code I provided may not be applicable as to how the custom taxonomy is added to your custom post type. If so, regardless if the slug placed is correct, the code still wouldn’t work.

Hope to hear from you soon. 🙂

[Author]

Posts