The Must Have for WordPress
The Must Have for WordPress
×
  • Home
December 5, 2019
WordPress

Add custom classes to the WordPress BODY tag

by Martin Jost
No comments
2 min Reading Time
819 Views
5 Score
2 Likes
Share on Facebook Tweet on Twitter Share on Linkedin Pin on Pinterest Send via E-Mail Send via WhatsApp

Anyone who develops their own theme with a customizable layout or settings a theme needs to add custom CSS class names to the BODY tag of the WordPress website.

Custom class names inside the BODY tag of the website give us great opportunities to easily customize a theme according to the selected option. An application example would be if we wanted to change the entire layout of the website from boxed to unboxed. Here we could put the CSS class name “has-boxed-layout” in the BODY tag of the website with a selected “boxed” layout.

How can I add my own class names to the WordPress BODY tag?

There are many use cases by adding or removing custom class names are useful. To do this, we should not enter the class names (hard-coded) in your theme’s header.php file. Instead we can an existing WordPress filter called body_class.

Depending on the case or option you choose, you can handle which class name is will be added inside the website BODY tag. In this case designing WordPress templates is more efficient. Insert the above code snippet, eg in the functions.php file of your theme.

How can I add custom class names to the WordPress admin BODY tag?

Also for this case, WordPress provides an own filter admin_body_class, which helping us to add specific class names inside the BODY tag, similar to the example above.

How can I add customized classes to the WordPress login page BODY tag?

Even for the WordPress login screen, we can use the filter login_body_class and output our custom class names depending on the plugin or theme options. This is useful e.g. if we want to customize the login screen.

Custom BODY-Tag classes give us more possibilities to customize WordPress according to our plugin or theme settings, without any conditions (hardcoded) and confusing included in all the template files.

Last updated: December 5, 2019

Add custom classes to the WordPress BODY tag Score: 5 / 5 (2votes)
Share on Facebook Tweet on Twitter Share on Linkedin Pin on Pinterest Send via E-Mail Send via WhatsApp
The Author
Published by
Martin Jost

View all posts by Martin Jost

Related Posts
G
PHP Get the absolute File Path (Document Root-Path) in WordPress

Wenn man als Webentwickler mit Dateien arbeitet, die auf dem Server liegen und diese innerhalb e ...

Read More
M
Javascript Minify and compress Javascript files in PHP

Loading time is an important factor in search engine optimization and for the user experience. E ...

Read More
A
WordPress Add WordPress images to the RSS feed

By default, if you have enabled the WordPress RSS feed, images will not be included in the RSS f ...

Read More
Read more
S
Previous Post
Set custom WordPress post format for custom post type
C
Next Post
Calculate the correct content width for the Gutenberg editor
Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Imprint
  • Privacy Policy
© 2016-2023 - wphave - The Must Have for WordPress
Login

Lost your password?

RequiredEssential cookies enable basic functions and are necessary for the proper functioning of the website.
  • Name: Cookie Status
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user's web browser allows cookies.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): cookie_status
  • Duration: 1 Minute
  • Name: Cookie Consent
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user agrees to allow opt-in cookies or not.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): cookieconsent_analytics, cookieconsent_marketing, cookieconsent_status
  • Duration: 1 Year
  • Name: Like Button
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user has already gave a like for a specific post.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): like_btn_{POST_ID}
  • Duration: 21 Days
  • Name: Post Rating
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user has already rate a specific post.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): rating_{POST_ID}
  • Duration: 7 Days
AnalyticsStatistics cookies collect information anonymously. This information helps us to understand how our visitors use our website.
  • Name: Google Analytics
  • Provider: Google LLC
  • Purpose: Google cookie for website analysis. Generates statistical data on how the visitor uses the website.
  • Privacy Policy: https://policies.google.com/privacy
  • Cookie Name(s): _ga, _gat, _gid
  • Duration: 2 Years