While designing WP Society website I had a need for different header color schemes on different pages. Basically I wanted to have light dark light color scheme on homepage and on few custom landing pages and dark light dark on the single post articles.
This can be achieved many different ways, for example by designing two different header templates and assigning them to different post types but since I had a megamenu dropdown inside my header this was not the best option as in future I would have to maintain two header templates so I opted to find different solution.
Quickly I came up on an idea to give my headers and footers classes (.header and .footer) so that I could easily call them with jQuery that would allow me to create condition based on body classes.
jQuery Version 1
In the first version I have created both .bg-light and .bg-dark styles and by default I’ve attached .bg-light to the header. Scripts then runs when document is ready, checks for post types and if condition is satisfied removed .bg-light and adds .bg-dark.
- Script runs when document is ready
- Checks if the body has the class
single-postorpagebut nothome. - If this condition is met it removes bg-light class from
headerandfooterand adds bg-dark class.
<script>
jQuery(document).ready(function($) {
// Check if body tag has either class 'single' or 'page', but not 'home'
if (($('body').hasClass('single') || $('body').hasClass('page')) && !$('body').hasClass('home')) {
// Add 'bg-dark' class next to 'header' class
$('.header').removeClass('bg-light').addClass('bg-dark');
$('.footer').removeClass('bg-light').addClass('bg-dark');
}
});
</script>jQuery Version 2
Second version is more advanced however less compatible with the some page builders. In this version we don’t add .bg-light class to either header or footer, rather we only add script which then runs when document is ready, checks for post types and if condition is satisfied to applies .bg-dark class to the header and footer and if condition is not satisfied applies .bg-light class.
- Script runs when document is ready
- Checks if the body has the class
single-postorpagebut nothome. - If condition above is met it adds bg-dark class to the
headerandfooterand if condition is not met adds bg-light class to theheaderandfooter.
<script>
jQuery(document).ready(function($) {
// Check if body tag has either class 'single-post' or 'page', but not 'home'
if (($('body').hasClass('single-post') || $('body').hasClass('page')) && !$('body').hasClass('home')) {
// Add 'bg-dark' class to elements with class 'header'
$('.header').addClass('bg-dark');
// Add 'bg-dark' class to elements with class 'footer'
$('.footer').addClass('bg-dark');
} else {
// Add 'bg-light' class to header in all other instances
$('.header').addClass('bg-light');
// Add 'bg-light' class to header in all other instances
$('.footer').addClass('bg-light');
}
});
</script>Although this looks like ultimately better solution I would recommend to first test which one works better for your page builder as some page builders won’t load jQuery into the builder editing framework rather only on the front page so you maybe wont have accurate live styling.
Understanding the code – Logical Operators
The table below explains the logical operators:
if (($(‘body’).hasClass(‘single-post’) || $(‘body’).hasClass(‘page’)) && !$(‘body’).hasClass(‘home’))
| Operator | Description | Example | True / False |
| && | and | (x < 10 && y > 1) | True |
| || | or | (x == 5 || y == 5) | False |
| ! | not | !(x == y) is true | True |
Logical operators are used to determine the logic between variables. In above Version 2 given example works this way: if <body> has class single-post or has class page and doesn’t have class home find class header and add class bg-dark. Else find class header and add class bg-light to it.
Adding Code Snippets to WordPress with Plugin (Recommended)
The easiest way to add snippets to the website is by the way of plugin and there are different plugins to achieve this, however I strongly recommend going with Code Snippets Pro. Annual license for 10 websites license cost $79 annually while lifetime license for 10 websites is $237.
Adding Code Snippets to WordPress with Plugin (FREE)
For the ones on the budget I will recommend to go with Fluent Snippets. Free snippet plugin developed by well know and respectable WP Manage Ninja team.
Once you install and navigate to Fluent Snippets, click Create Your First Snippet and here you can paste your snippet give it a name, description and select what type of snippet it is.
Further you have some advanced options where you can select from weather it will run front end, backend or everywhere and some basic conditional logic is available to chose from at the bottom.
Once you Create Snippet you will have to publish it from the Code Snippet page. This should do the magic.
