Add body class for specific page (home)

dghez · April 7, 2016, 1:46pm

Hi everyone!
I’m new here and this is the first time I’m using roots.
My question is about the classes of the body. I went into the base.php and I found a function that comes from the extra.php.
I’m a newbie in php, so I don’t understand what’s happen here.
My goal is to add a class if I’m in the homepage, something like
<body class="<?php if(is_home()){echo "blockScroll"} ?>">
but here I’ve no idea how to achieve that!
Any help is appreciated

ben · April 7, 2016, 2:03pm

github.com

roots/sage/blob/8d7bcee4c46173d11dd8ea9a06021d8c27891b64/lib/extras.php#L7-L25


/**
* Add <body> classes
*/
function body_class($classes) {
 // Add page slug if it doesn't exist
 if (is_single() || is_page() && !is_front_page()) {
   if (!in_array(basename(get_permalink()), $classes)) {
     $classes[] = basename(get_permalink());
   }
 }


 // Add class if sidebar is active
 if (Setup\display_sidebar()) {
   $classes[] = 'sidebar-primary';
 }


 return $classes;
}
add_filter('body_class', __NAMESPACE__ . '\\body_class');

dghez · April 27, 2016, 8:58am

sorry for the delay and thanks for the tip. It solved my problem

mZoo · August 16, 2016, 3:57pm

I was having trouble with this as the menu I’m using, https://github.com/robinpoort/vanilla-js-responsive-menu, recommended adding no-js to the body tag.

I’m not sure if this is proper because I see other places where it is supposed to be a class of the HTML element.
At any rate, added this line to the body_class function:

$classes[] = 'no-js';

But the class wasn’t visible in the browser code.

I could see that it was being added to the $classes array:

Array
(
    [0] => home
    [1] => page
    [2] => page-id-8
    [3] => page-template-default
    [4] => logged-in
    [5] => admin-bar
    [6] => no-customize-support
    [7] => no-js
)
class="home page logged-in admin-bar no-customize-support no-js">

But:

<body class="home page logged-in admin-bar js-enabled customize-support">

Tried changing the class name (no-jsxxx) and lo and behold, there it was! This is because modernizr.js removes it and replaces with js if javascript is enabled in the browser.

strarsis · November 4, 2017, 9:29pm

How can I also use the controller variables?
I want to check for a specific field before applying a body class.

Thanks!

codemonkeynorth · May 30, 2022, 3:31pm

re:
$classes[] = basename(get_permalink());

this will be an issue if we have child pages eg /foo and /test/foo ? … won’t they same give the same class?

ben · May 31, 2022, 5:06pm

Have you tried it? If you’ve confirmed this behavior, what have you tried to do to solve your issue?