{"id":32760,"date":"2021-04-02T18:24:11","date_gmt":"2021-04-02T18:24:11","guid":{"rendered":"https:\/\/beastthemes.com\/?p=32760"},"modified":"2021-04-02T18:24:11","modified_gmt":"2021-04-02T18:24:11","slug":"tips-and-tricks-for-wordpress-body-class","status":"publish","type":"post","link":"https:\/\/beastthemes.com\/new\/2021\/04\/02\/tips-and-tricks-for-wordpress-body-class\/","title":{"rendered":"Tips and Tricks for Theme Developers about WordPress Body Class"},"content":{"rendered":"\n

looking for new ways to use CSS in your themes?<\/p>\n\n\n\n

WordPress automatically adds CSS classes that you simply <\/strong>can utilize in your themes. Several of those <\/strong>CSS classes are automatically added to the <body> section of each <\/strong>page on a WordPress site.<\/p>\n\n\n\n

In this article, we’ll <\/strong>explain the WordPress body class with tips and tricks for aspiring theme designers to utilize them in their projects.<\/p>\n\n\n\n

What is WordPress Body Class?<\/strong><\/h3>\n\n\n\n

Body class (body_class) may be a <\/strong>WordPress function that permits <\/strong>you to assign CSS classes to the body element.<\/p>\n\n\n\n

The HTML body tag normally begins during a <\/strong>theme\u2019s header.php file, which loads on every page. this enables <\/strong>you to dynamically find out <\/strong>which page a user is viewing then <\/strong>add the CSS classes accordingly.<\/p>\n\n\n\n

Normally most starter themes and frameworks already include the body class function inside the HTML body tag. However, if your theme doesn’t <\/strong>have it, then you’ll <\/strong>add it by modifying the body tag like this:<\/p>\n\n\n\n

1<\/div><\/td>
<body <?php body_class(<\/code>$class<\/code>); ?>><\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/div>\n\n\n\n

Depending on the sort <\/strong>of page being displayed, WordPress automatically adds the acceptable <\/strong>classes.<\/p>\n\n\n\n

For example, if you’re <\/strong>on an archive page, WordPress will automatically add archive class to the body element. It does that for almost <\/strong>every page.<\/p>\n\n\n\n

Here are some examples of common classes that WordPress might add, depending on which page is being displayed:<\/p>\n\n\n\n

1<\/div>
2<\/div>
3<\/div>
4<\/div>
5<\/div>
6<\/div>
7<\/div>
8<\/div>
9<\/div>
10<\/div>
11<\/div>
12<\/div>
13<\/div>
14<\/div>
15<\/div>
16<\/div>
17<\/div>
18<\/div>
19<\/div>
20<\/div>
21<\/div>
22<\/div>
23<\/div>
24<\/div>
25<\/div>
26<\/div>
27<\/div>
28<\/div>
29<\/div>
30<\/div>
31<\/div>
32<\/div><\/td>
.<\/code>rtl<\/code> {}<\/code><\/div>
.home {}<\/code><\/div>
.blog {}<\/code><\/div>
.archive {}<\/code><\/div>
.date {}<\/code><\/div>
.search {}<\/code><\/div>
.paged {}<\/code><\/div>
.attachment {}<\/code><\/div>
.error<\/code>404<\/code> {}<\/code><\/div>
.single postid-(id) {}<\/code><\/div>
.attachmentid-(id) {}<\/code><\/div>
.attachment-(mime-type) {}<\/code><\/div>
.author {}<\/code><\/div>
.author-(user_nicename) {}<\/code><\/div>
.category {}<\/code><\/div>
.category-(slug) {}<\/code><\/div>
.tag {}<\/code><\/div>
.tag-(slug) {}<\/code><\/div>
.page-parent {}<\/code><\/div>
.page-child parent-pageid-(id) {}<\/code><\/div>
.page-template page-template-(template file name) {}<\/code><\/div>
.search-results {}<\/code><\/div>
.search-no-results {}<\/code><\/div>
.logged-in {}<\/code><\/div>
.paged-(page number) {}<\/code><\/div>
.single-paged-(page number) {}<\/code><\/div>
.page-paged-(page number) {}<\/code><\/div>
.category-paged-(page number) {}<\/code><\/div>
.tag-paged-(page number) {}<\/code><\/div>
.date-paged-(page number) {}<\/code><\/div>
.author-paged-(page number) {}<\/code><\/div>
.search-paged-(page number) {}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/div>\n\n\n\n

As you’ll <\/strong>see, by having such a strong <\/strong>resource at hand, you’ll <\/strong>entirely customize your WordPress page by using just CSS. you’ll <\/strong>customize specific author profile pages, date-based archives, etc.<\/p>\n\n\n\n

That being said, now let\u2019s take a glance <\/strong>at how and when would you employ <\/strong>the body class.<\/p>\n\n\n\n

How to Add Custom Body Classes<\/strong><\/h3>\n\n\n\n

WordPress features a <\/strong>filter that you simply <\/strong>can utilize to feature <\/strong>custom body classes when needed. we’ll <\/strong>show you ways <\/strong>to feature <\/strong>a body class using the filter before showing you the precise <\/strong>use case scenario with great care <\/strong>everyone are often <\/strong>on an equivalent <\/strong>page.<\/p>\n\n\n\n

Because body classes are theme specific, you’d got to <\/strong>add the subsequent <\/strong>code to your theme\u2019s functions.php file.<\/p>\n\n\n\n

1<\/div>
2<\/div>
3<\/div>
4<\/div>
5<\/div>
6<\/div>
7<\/div>
8<\/div>
9<\/div><\/td>
function<\/code> my_class_names(<\/code>$classes<\/code>) {<\/code><\/div>
    <\/code>\/\/ add 'class-name' to the $classes array<\/code><\/div>
    <\/code>$classes<\/code>[] = <\/code>'wpb-class'<\/code>;<\/code><\/div>
    <\/code>\/\/ return the $classes array<\/code><\/div>
    <\/code>return<\/code> $classes<\/code>;<\/code><\/div>
}<\/code><\/div>
 <\/div>
\/\/Now add test class to the filter<\/code><\/div>
add_filter(<\/code>'body_class'<\/code>,<\/code>'my_class_names'<\/code>);<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/div>\n\n\n\n

The above code will add a class \u201cwpb-class\u201d to the body tag on every page on your website. That\u2019s not so bad, right?<\/p>\n\n\n\n

Now you can utilize this CSS class in your theme\u2019s stylesheet directly. If you are working on your own website, then you can also add the CSS using the custom CSS feature<\/a> in the theme customizer.<\/p>\n\n\n\n

Adding Body Class Using a WordPress Plugin<\/strong><\/h3>\n\n\n\n

If you are not working on a client project and don\u2019t want to write code, then this method would be easier for you.<\/p>\n\n\n\n

The first thing you need to do is install and activate the Custom Body Class<\/a> plugin.<\/p>\n\n\n\n

Upon activation, you need to visit Settings \u00bb Custom Body Class<\/strong> page. From here you can configure plugin settings.<\/p>\n\n\n\n

\"WordPress<\/figure>\n\n\n\n

You can select post types where you would like <\/strong>to enable body class feature and who can access it. Don\u2019t forget to click on the save changes button to store your settings.<\/p>\n\n\n\n

Next, you’ll <\/strong>head over to edit any post or page on your WordPress site. On the post edit screen, you’ll <\/strong>find a replacement <\/strong>meta box up the proper <\/strong>column labeled \u2018Post Classes\u2019.<\/p>\n\n\n\n

\"WordPress<\/figure>\n\n\n\n

Click to add your custom CSS classes. You can add multiple classes separated by a space.<\/p>\n\n\n\n

Once you are done, you can simply save or publish your post. The plugin will now add your custom CSS classes to the body class for that particular post or page.<\/p>\n\n\n\n

How to use The Body Class with Conditional Tags<\/strong><\/h3>\n\n\n\n

The real power of the body_class function comes when it’s <\/strong>used with the conditional tags.<\/p>\n\n\n\n

These conditional tags are true or false data types that check if a condition is true or false in WordPress. for instance <\/strong>, the conditional tag is_home checks if the page currently displayed is that the <\/strong>homepage or not.<\/p>\n\n\n\n

This allows theme developers to see <\/strong>if a condition is true or false before adding a custom CSS class to the body_class function.<\/p>\n\n\n\n

Let\u2019s take a glance <\/strong>at some samples of <\/strong>using conditional tags to feature <\/strong>custom classes to the body class.<\/p>\n\n\n\n

Let\u2019s say you would like <\/strong>to style your homepage differently for logged in users with the author user role. While WordPress automatically generates a .home and .logged-in class, it doesn’t <\/strong>detect the user role or add it as a category <\/strong>.<\/p>\n\n\n\n

Now, this is often <\/strong>a scenario where you’ll <\/strong>use the conditional tags with some custom code to dynamically add a custom class to the body class.<\/p>\n\n\n\n

To achieve this you’ll <\/strong>add the subsequent <\/strong>code to your theme\u2019s functions.php file.<\/p>\n\n\n\n

1<\/div>
2<\/div>
3<\/div>
4<\/div>
5<\/div>
6<\/div>
7<\/div>
8<\/div>
9<\/div>
10<\/div>
11<\/div>
12<\/div>
13<\/div>
14<\/div>
15<\/div>
16<\/div>
17<\/div>
18<\/div>
19<\/div>
20<\/div>
21<\/div><\/td>
function<\/code> wpb_loggedin_user_role_class(<\/code>$classes<\/code>) { <\/code><\/div>
 <\/div>
\/\/ let's check if it is homepage<\/code><\/div>
if<\/code> ( is_home() ) {<\/code><\/div>
 <\/div>
\/\/ Now let's check if the logged in user has author user role.  <\/code><\/div>
$user<\/code> = wp_get_current_user();<\/code><\/div>
if<\/code> ( in_array( <\/code>'author'<\/code>, (<\/code>array<\/code>) <\/code>$user<\/code>->roles ) ) {<\/code><\/div>
    <\/code>\/\/The user has the \"author\" role<\/code><\/div>
    <\/code>\/\/ Add user role to the body class<\/code><\/div>
    <\/code>$classes<\/code>[] = <\/code>'author'<\/code>;<\/code><\/div>
    <\/code>\/\/ Return the classes array<\/code><\/div>
    <\/code>return<\/code> $classes<\/code>;      <\/code><\/div>
} <\/code><\/div>
} <\/code>else<\/code> { <\/code><\/div>
\/\/ if it is not homepage, then just return default classes<\/code><\/div>
return<\/code> $classes<\/code>; <\/code><\/div>
}<\/code><\/div>
} <\/code><\/div>
 <\/div>
add_filter(<\/code>'body_class'<\/code>, <\/code>'wpb_loggedin_user_role_class'<\/code>);<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/div>\n\n\n\n

Now, let\u2019s take a look at another useful example. This time we are going to check if the page displayed is a preview of a WordPress draft.<\/p>\n\n\n\n

To do that we will use the conditional tag is_preview and then add our custom CSS class.<\/p>\n\n\n\n

1<\/div>
2<\/div>
3<\/div>
4<\/div>
5<\/div>
6<\/div>
7<\/div>
8<\/div><\/td>
function<\/code> add_preview_class(<\/code>$classes<\/code>) { <\/code><\/div>
if<\/code> ( is_preview() )  {<\/code><\/div>
$classes<\/code>[] = <\/code>'preview-mode'<\/code>;<\/code><\/div>
return<\/code> $classes<\/code>;<\/code><\/div>
}<\/code><\/div>
return<\/code> $classes<\/code>; <\/code><\/div>
}<\/code><\/div>
add_filter(<\/code>'body_class'<\/code>,<\/code>'add_preview_class'<\/code>);<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/div>\n\n\n\n

Browser Detection and Browser Specific Body Classes<\/strong><\/h3>\n\n\n\n

Sometimes you’ll <\/strong>encounter <\/strong>issues where your theme may have <\/strong>additional CSS for a specific <\/strong>browser.<\/p>\n\n\n\n

Now the great <\/strong>news is that WordPress automatically detects browser upon loading then <\/strong>temporary stores this information as a worldwide <\/strong>variable.<\/p>\n\n\n\n

You just got to <\/strong>check if WordPress detected a selected <\/strong>browser then <\/strong>add it as a custom CSS class.<\/p>\n\n\n\n

Simply, copy and paste the subsequent <\/strong>code in your theme\u2019s functions.php file:<\/p>\n\n\n\n

1<\/div>
2<\/div>
3<\/div>
4<\/div>
5<\/div>
6<\/div>
7<\/div>
8<\/div>
9<\/div>
10<\/div>
11<\/div>
12<\/div>
13<\/div>
14<\/div>
15<\/div>
16<\/div>
17<\/div>
18<\/div>
19<\/div><\/td>
function<\/code> wpb_browser_body_class(<\/code>$classes<\/code>) { <\/code><\/div>
    <\/code>global<\/code> $is_iphone<\/code>, <\/code>$is_chrome<\/code>, <\/code>$is_safari<\/code>, <\/code>$is_NS4<\/code>, <\/code>$is_opera<\/code>, <\/code>$is_macIE<\/code>, <\/code>$is_winIE<\/code>, <\/code>$is_gecko<\/code>, <\/code>$is_lynx<\/code>, <\/code>$is_IE<\/code>, <\/code>$is_edge<\/code>;<\/code><\/div>
 <\/div>
if<\/code> (<\/code>$is_iphone<\/code>)    <\/code>$classes<\/code>[] =<\/code>'iphone-safari'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_chrome<\/code>)    <\/code>$classes<\/code>[] =<\/code>'google-chrome'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_safari<\/code>)    <\/code>$classes<\/code>[] =<\/code>'safari'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_NS4<\/code>)    <\/code>$classes<\/code>[] =<\/code>'netscape'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_opera<\/code>)    <\/code>$classes<\/code>[] =<\/code>'opera'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_macIE<\/code>)    <\/code>$classes<\/code>[] =<\/code>'mac-ie'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_winIE<\/code>)    <\/code>$classes<\/code>[] =<\/code>'windows-ie'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_gecko<\/code>)    <\/code>$classes<\/code>[] =<\/code>'firefox'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_lynx<\/code>)    <\/code>$classes<\/code>[] =<\/code>'lynx'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_IE<\/code>)      <\/code>$classes<\/code>[] =<\/code>'internet-explorer'<\/code>;<\/code><\/div>
elseif<\/code> (<\/code>$is_edge<\/code>)    <\/code>$classes<\/code>[] =<\/code>'ms-edge'<\/code>;<\/code><\/div>
else<\/code> $classes<\/code>[] = <\/code>'unknown'<\/code>;<\/code><\/div>
    <\/code> <\/div>
return<\/code> $classes<\/code>;<\/code><\/div>
}<\/code><\/div>
add_filter(<\/code>'body_class'<\/code>,<\/code>'wpb_browser_body_class'<\/code>);<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/div>\n\n\n\n

You can then use classes like:<\/p>\n\n\n\n

\t\n.ms-edge .navigation {some item goes here}<\/code><\/pre>\n\n\n\n
If it is a small padding or margin issue, then this is often a reasonably <\/strong>easy way of fixing it.<\/p>\n\n\n\n
There are definitely more <\/strong>scenarios where using the body_class function can prevent <\/strong>from writing lengthy lines of code. for instance <\/strong>, if you’re <\/strong>employing a <\/strong>theme framework like Genesis, then you’ll <\/strong>use it to feature <\/strong>custom classes in your child theme.<\/p>\n\n\n\n
You can use the body_class function to feature <\/strong>CSS classes for full-width page layouts, sidebar content, header and footers, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"
looking for new ways to use CSS in your themes? WordPress automatically adds CSS classes that you simply can utilize in your […]<\/p>\n","protected":false},"author":1,"featured_media":32769,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[20,24],"tags":[31,32],"class_list":["post-32760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beginners-guide","category-wordpress","tag-body-class","tag-wordpress-body-class"],"_links":{"self":[{"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/posts\/32760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/comments?post=32760"}],"version-history":[{"count":0,"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/posts\/32760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/media\/32769"}],"wp:attachment":[{"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/media?parent=32760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/categories?post=32760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beastthemes.com\/new\/wp-json\/wp\/v2\/tags?post=32760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}