If you want the class in the body of every page then your header.php is the best place to put it. The opening tag of your <body> and you container div should be in the header.php. If you’re trying to figure out where the class is for a specific page, figure out what file that page is using. It’s probably using the home.php file which is the file your blog uses. Look in there first, delete the class from that file, and put it in the header.php wherever makes sense.
If the class isn’t in home.php, check what Template the page is using under Page Attributes for that page and edit that template file.
Hi awa, thanks for the response.
I did try to just add the class to the body of every page, but I’m using a responsive design, so when I visit the site on my mobile, it screws up. In my CSS I used a media query to add the body class only when visiting on a non-mobile device. I just can’t remember how I added the class to the body!
I tried looking for home.php but it appears I don’t have one. I looked in index.php instead, and nothing about the class was in there, either.
All my pages are using the same template theme so I’m sure it’s not the page attributes.
Any clue how I did that please!? 🙂
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re using a custom theme we won’t have any knowledge of how you added the class to the body. We don’t know where you did it either. I’m sorry we cannot be of much help.
What themes do on the WordPress repository is use the “body_class” function to generate the classes on the <body> element. Those themes are the themes we can support.
Hi Andrew, thanks for the reply.
My theme is just a silightly modified twentyeleven theme. I’ve looked at functions.php and this is what it has:
function twentyeleven_body_classes( $classes ) {
if ( function_exists( 'is_multi_author' ) && ! is_multi_author() )
$classes[] = 'single-author';
if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )
$classes[] = 'singular';
return $classes;
}
add_filter( 'body_class', 'twentyeleven_body_classes' );
So I can’t see where the “important-body-width” class is being added. Is there really no way for you to hazard a guess at which php file I’d have edited to get that there?
Thanks!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Maybe, in the bigger picture what do you want do with this class? Once you know how to generate it, or where it’s generated, what then?
I’d like to apply it to every other page of the site. Currently, for some reason, it only gets applied on the homepage. I’d like it to work on every other category, page, post, etc.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
This is the original Twenty Eleven header.php file by the way: http://themes.svn.wordpress.org/twentyeleven/1.7/header.php
Search for “<body” and you will find how the body classes are generated:
<body <?php body_class(); ?>>
Is there really no way for you to hazard a guess at which php file I’d have edited to get that there?
If your header.php file has this ‘<body <?php body_class(); ?>>‘ line of code then maybe you need to look into the template files that, for whatever reason, aren’t calling header.php.
Yeah, body_class is called in header.php. All the pages call header.php, but only the homepage has the class applied to it. This is really confusing!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Oh, so it’s one particular class that you’re looking for? You still classes generated on the <body> element on other pages?
Yeah, only a class called “important-body-width”. That’s right, all the other correct classes are called, but not that one!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’ve added that with JavaScript:
if (!(/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent)) {
(function($) {
$('body').addClass('important-body-width');
$('.main-page').waypoint(function(event, direction) {
$(".nav-container").toggleClass('nav-container--sticky');
})
})(jQuery);
}
Aha! I completely forgot about that code, I needed it to help some of the functionality of the responsive design.
Thanks a lot Andrew. I’d have taken ages to figure that out.
