Add custom classes to the WordPress BODY tag

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.