0

For my site, I need to have different header colors depending on the page it's on. Here's the code I have for my site that is working:

<?php if ( is_single() && is_post_type('product') || is_page(576) || is_single() && is_post_type('post')) : ?>
      <div class="header-inner">
      <style type="text/css">.header-inner { background-color:#861919!important; }</style>
<?php else : ?>
      <div class="header-inner" style="background-color:rgba(0,0,0,0.30);">
<?php endif; ?>

I am trying to modify the above to exclude certain product posts due to their design. I will note that most products use post-template.php, and the ones I need to have a transparent header are using product-specialty.php. My developer installed the plugin WP Post to be able to select the different templates. Here's my attempt at the modified code but it's resulting in nothing loading:

<?php if ( is_single(893,892,843,895,894,896) ) : ?>
       <div class="header-inner" style="background-color:rgba(0,0,0,0.30);">
<?php else( is_single() && is_post_type('product') || is_page(576) || is_single() && is_post_type('post')) : ?>
      <div class="header-inner">
      <style type="text/css">.header-inner { background-color:#861919!important; }</style>
<?php elseif : ?>
      <div class="header-inner" style="background-color:rgba(0,0,0,0.30);">
<?php endif; ?>

Any idea what I'm doing wrong there?

  • It's possible to do this without your conditional using only CSS, if you used the body_class function correctly, the body tag will have a css class with the page ID you can select against, and you get to avoid the inline style tags too – Tom J Nowell Dec 13 '18 at 17:19
0

Here is an alternative solution. I think it would be cleaner than adding all these if statements and page IDs. You can do this using CSS and the body class WP adds.

For example, go to one of your single pages and look at the class on the body tag. You should see something like page-id-###. Then just simply add a rule in your stylesheet or the CSS customizer.

Something like this...

body.page-id-123 .header-inner,
body.page-id-124 .header-inner,
body.page-id-125 .header-inner, {
    background-color:#861919!important;
}

Here is how you can target some of your other pages.

  • All Single Product Pages - body.single-product .header-inner {}
  • Specific Single Post - body.postid-### .header-inner {}
  • Blog Page - body.blog .header-inner {}
  • All Single Blog Pages - body.single-post .header-inner {}
  • Etc...

Just inspect each page and you should get the idea.

Create your own body class

If needed you could create your own body class by using the body_class filter, here is a basic example of how to use it. Of course you could do more by adding conditionals or checking for templates.

function my_custom_body_class($classes) {
    $classes[] = 'foo';
    return $classes;
}

add_filter('body_class', 'my_custom_body_class');
  • So unfortunately, I have over 100 products and then 70+ other pages, so trying to write out each one seems impractical, especially since we'll need to add new products (but not these specialty products that are referenced above) and locations all the time (both custom post types). Another issue is that we do have some jQuery so that when transparent, it goes to the red background on scroll - it's a sticky header. I do like the elegance of your solution, just not sure how to implement at this scale. – lushiris02 Dec 13 '18 at 18:47
  • Maybe I am missing something, won't you still have to maintain a list of pages using your conditionals? For example: is_single(893,892,843,895,894,896). Your best bet would be to find or create a class that is unique for each section or template used. Then you wouldn't have to keep track of specific pages, just templates used. Can you provide a few links to the different types of pages? – RiddleMeThis Dec 13 '18 at 18:52
  • That list of IDs is for specialty products which is a major change for another product like that. I'd be surprised if we add even just one in the next five years. Is there a way to add a specific class that would get added to the body that I could declare in that product-specialty.php template? – lushiris02 Dec 13 '18 at 18:56
  • Are you sure there isn't already a specific class on the body for that template? – RiddleMeThis Dec 13 '18 at 19:00
  • Yes - I was just searching for that. I think the plugin the other developer installed is mucking things up. I think I'm going to have to remove that and properly declare other templates for the posts to get the right classes. Really appreciate your help. – lushiris02 Dec 13 '18 at 19:02
1

You are just passing through multiple values instead of a list. Switch to an array.

Change this line:

<?php if ( is_single(893,892,843,895,894,896) ) : ?>

to:

<?php if ( is_single(array(893,892,843,895,894,896)) ) : ?>

More info: https://developer.wordpress.org/reference/functions/is_single/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.