-
Posts
-
Hello. On our site we have two kinds of header and footer background colors and font colors depending on the page. We’ve been using the page-id option in our CSS to target specific pages with the colors we want, but as our pages increase it is becoming quite daunting to keep adding page-id’s to our CSS.
Would it be possible to create custom header, footer and page templates and then add the desired class to be output within the tag’s Class attribute and then target these tags in our CSS? Below is a guide on how to do this in a generic theme sense, not specific to Enfold.
What you’d want to do is setup a template for product pages within your theme and then add the desired class to be output within the tag’s Class attribute. Then you’d need to set the product page to display using the new template. When cloned, the template should still be selected and the added class will be output on each page with said template applied. There are other ways to do this, of course, but, in my opinion, this is the most straightforward approach which should be applicable for most themes.
Odds are good that your theme will output the body tag within its header.php file with the following code: >. As such, you wouldn’t be able to add in the new class via the template file itself. So:
1. Duplicate header.php and name it header-products.php
2. Within the new header-products.php file, modify > to be >. This will add the class “ProductPage” to your Body tag’s Class attribute list.
3. Next you’ll need to create the Product Page template itself. To do so, duplicate the currently utilized page display template (for most theme’s this should be page.php). Or, if your theme already utilizes templates, duplicate the one which is being used to display products currently. Rename this template (or page.php copy) to template-product-page.php.
4. Within the newly created template, modify (or add in, if copying page.php) < ?php /* Template Name: Product Page */ ?> to the top of the file. This is the name which will be added to the list of templates for you to choose from within the page editor.
5. Also within the newly created template, customize the get_header(); call to read as get_header(‘products’);. Doing this will load the new header-products.php file we created in which we’ve added the desired additional class.
6. Lastly, you’ll need to select the new page template from the Page Attribute section when editing a product page.
Hey killyman,
Thank you for the inquiry.
Have you tried using the body_class filter to adjust or alter the class attribute/s of the body tag? This should allow you to inject unique value to the class attributes based on certain conditions and use it to define a different header style.
// https://developer.wordpress.org/reference/functions/body_class/
For example, if a page has a specific custom field or meta info, you can add a particular class attribute to the body tag that will alter the header style based on a predefined custom css.
Best regards,
IsmaelThanks Ismael. After looking at the link you sent I ended up adding the following code into the child theme’s functions.php file. It seems to work well enough. Newly added portfolio items and posts do not need any modifications to the code below because I’m using the has_tag and has_category functions. Only downside is that for new pages, I have to add the new slug names into the is_page code sections below where relevant. Is there a better option for when adding new pages? Thanks.
/* GREEN FOOTERS SLUG */ function green_footer_body_class_slug($classes) { // add 'green-footer' only to pages with slugs below. if ( is_page( array( 'about', 'work', 'news' ) ) ) $classes[] = 'green-footer'; // return the modified $classes array return $classes; } // add my custom class via body_class filter add_filter('body_class','green_footer_body_class_slug'); * ----------- GRAY HEADERS SLUG ----------- */ function gray_header_body_class_slug($classes) { // add 'gray-header' only to pages with slugs below. if ( is_page( array( 'about', 'work', 'people', 'contact', 'news', 'project-inquiries', 'media-inquiries' ) ) ) $classes[] = 'gray-header'; // return the modified $classes array return $classes; } // add my custom class via body_class filter add_filter('body_class','gray_header_body_class_slug'); /* ----------- GRAY HEADERS TAG ----------- */ function gray_header_body_class_tag($classes) { // add 'gray-header' only to pages with tags below. if ( has_tag( 'team' ) ) $classes[] = 'gray-header'; // return the modified $classes array return $classes; } // add my custom class via body_class filter add_filter('body_class','gray_header_body_class_tag'); /* ----------- GRAY HEADERS NEWS POSTS ----------- */ function gray_header_body_class_news($classes) { // add 'gray-header' only to news category posts below. if ( has_category( 'news' ) ) $classes[] = 'gray-header'; // return the modified $classes array return $classes; } // add my custom class via body_class filter add_filter('body_class','gray_header_body_class_news'); /* ----------- GREEN BACKGROUND FULL PAGES SLUG ----------- */ function green_bg_body_class_slug($classes) { // add 'gray-header' only to pages with slugs below. if ( is_page( array( 'contact', 'project-inquiries', 'media-inquiries' ) ) ) $classes[] = 'green-bg'; // return the modified $classes array return $classes; } // add my custom class via body_class filter add_filter('body_class','green_bg_body_class_slug');Hi,
Thank you for the update.
You can actually combine all filters in a single callback function.
function avf_adjust_body_class_slug($classes) { if ( is_page( array( 'about', 'work', 'news' ) ) ) { $classes[] = 'green-footer'; } if ( is_page( array( 'about', 'work', 'people', 'contact', 'news', 'project-inquiries', 'media-inquiries' ) ) ) { $classes[] = 'gray-header'; } if ( has_category( 'news' ) ) { $classes[] = 'gray-header'; } if ( is_page( array( 'contact', 'project-inquiries', 'media-inquiries' ) ) ) { $classes[] = 'green-bg'; } if ( has_tag( 'team' ) ) { $classes[] = 'gray-header'; } return $classes; } add_filter('body_class','avf_adjust_body_class_slug');Only downside is that for new pages, I have to add the new slug names into the is_page code sections below where relevant. Is there a better option for when adding new pages? Thanks.
Have you tried adding custom fields to the pages? You can apply the appropriate class attribute based on the value of a custom field/s added in the page.
// https://wordpress.org/support/article/custom-fields/
This plugin should help.
// https://wordpress.org/plugins/advanced-custom-fields/
Best regards,
Ismael
- You must be logged in to reply to this topic.