Panels are created with the.panel class, and content inside the panel has a.panel-body class. In some cases, the site may use the body class attribute for functionality such as opening of some sort of menu by adding class to the body element. In that case, you may want to define a prefix for your page style classes such as page-, so only those are replaced by swup.By default option is set to ' and all classes of body element are replaced during the transition. Bodyclass Use the bodyclass option to add a class to the body of each editor instance. This class can be used to override the styles added by the contentcss option. The bodyclass will be removed if the editor is removed and will not be included in any content retrieved from the editor. Initializes a new instance of the Body class. Body(IEnumerable) Initializes a new instance of the Body class with the specified child elements. Body(OpenXmlElement) Initializes a new instance of the Body class with the specified child elements. Body(String) Initializes a new instance of the Body class from outer XML.
Over the last month, whilst I’ve been working with WPZOOM in their support forum, I’ve found one of the things that has helped me the most when answering people’s requests for help is the amazing function, body_class.
It was introduced back in WordPress 2.8, but it doesn’t really get the respect it deserves; body_class is awesome.
If you don’t know what it is, it’s essentially a piece of code you can add to the <body> element which adds various unique classes to your posts, pages, archives, custom post types etc. Why is this handy? It lets you add CSS to specific posts/pages/whatever. And that’s really handy.
Installation
The installation bit of body_class is really easy. You’ve just got to change your opening <body> tag to <body <?php body_class(); ?>>. And that’s it!
Before we go any further, though, we’re going to add a little custom code to our functions.php file which adds classes for custom post types. Hat tip here to WPEngineer.
So what’s so useful?
In the support forum world, this is really handy because it lets you answer the questions like “can I have a different colour background on this post only?”
Without body_class, the answer is “um, sure; you just need all these conditional template tags”. With body_class, though, you just need to grab the post ID off the site (as it’s listed as one of the classes applied to body) and tell the client to add a line of code to their custom stylesheet:
And that’s literally all there is to it. This post uses it! It’s made my life so much easier answering support tickets, but let’s look at a more common real life example.
Real life usage: menu highlights
This technique’s used on CSS-Tricks, too!
I’m using body_class here on Shout in order to get the menu to highlight depending on what page you’re on on the site. As I want the highlight to show on posts, custom page templates and pages, sometimes with a combination of the two, WordPress’ built in menu builder and the .current class it adds to the “current” page wouldn’t work here — I need to be able to effectively have custom control over which type of content highlights each menu.
With body_class, I can!
If you’ll excuse the cheesyness, you’ll see why I love this function so much. I’ve got the menus set up so that when the body_class adds its classes to certain types of pages, for example the “contact” item highlights when the class .pagename-contact is active, the “articles” item highlights when one of .archive, .single-post or .pagename-articles (the custom page template used for the archives) are active.
I’ll walk you through a simplified version of the code. There’s not really much to this:
First off, we’ve got the original menu. This uses the id #main-nav and uses something like the following:
We’ve then get the “current menu item” style which is something like:
As you can see, this just adds a couple of borders and changes the background. So that’s the “current” style sorted. So how do we integrate this with body_class to get this to show when on the pages, posts etc we want?
This bit’s simple — you’ve just got to find the unique classes body_class adds to the particular content types you want to highlight on the menu.
For me, it was things like .single-post and .home, but body_class lets you select content types right down to categories and the IDs of individual posts. All that’s left now is just adding those unique classes to the .current CSS we created earlier, ending up with something like this:
And then you’ve got your highlights sorted! If you want to see exactly how I’ve done it here on Shout, then check out the live site in Firebug/Chrome Web Tools.
Wrapping up
Hopefully this tutorial has been helpful in showing you how to get started with one of my favourite little functions built into WordPress. If you’ve used it recently, please share in the comments!
Displays the class names for the body element.
Contents
- Related
Parameters Parameters
(string|string[])(Optional)Space-separated string or array of class names to add to the class list.
Default value: '
More Information More Information
This function gives the body element different classes and can be added, typically, in the header.php’s HTML body tag.
Basic Usage
The following example shows how to implement the body_class template tag into a theme.
The actual HTML output might resemble something like this (the About the Tests page from the Theme Unit Test):
In the WordPress Theme stylesheet, add the appropriate styles, such as:
Source Source
Body Classic
File: wp-includes/post-template.php
Body Classic Champion
View on Trac
Bodyattack Les Mills Review
Related Related
Uses Uses
Body Class Css
| Uses | Description |
|---|---|
| wp-includes/formatting.php:esc_attr() | Escaping for HTML attributes. |
| wp-includes/post-template.php:get_body_class() | Retrieves an array of the class names for the body element. |