Skip to main content
added 405 characters in body
Source Link
RiddleMeThis
  • 3.8k
  • 8
  • 21
  • 30

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

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.

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');
added 15 characters in body
Source Link
Tom J Nowell
  • 60.6k
  • 7
  • 77
  • 147

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...

  • 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.

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.

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.

Source Link
RiddleMeThis
  • 3.8k
  • 8
  • 21
  • 30

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.