Some themes include a body class field built into the theme options or Layout Settings like Genesis.

1. Body_class Wordpress Add Class
2. Body Class
3. Body Classifier (bcl)
4. Body Class Html

This will give every page a body class of only 'portfolio'. The first argument is the array of generated body classes that would normally appear. The second argument is an array of classes passed into the body class function (e.g. Bodyclass('portfolio'); would make the second argument in this function array( 'portfolio' )). A class is generally ascribed to an element that occurs multiple times (or, rather, to a style that you want applied multiple times). SINCE there's only ever one body, I've never added an ID or a class to it. Bodyclass (string string $class = ') Displays the class names for the body element. Body Class is a simple module that allows users to add custom body classes to any node through the node/add interface. The respective classes will be appearing in body tags Download using Drush drush dl -y bodyclass Enable using Drush drush en -y bodyclass Disable using Drush drush dis -y bodyclass Uninstall using Drush drush pmu -y bodyclass Similar module Node 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.

This enables you to create a custom class which will apply to all images on that specific post or page.

The custom class selector enables you to style all HTML elements with the same CSS code for that specific page or post only.

Elements outside of the content area, like your footer, header and sidebar, will not be effected by the CSS code you apply to this custom class.

Example – Genesis Custom Body Class

Located in your Layout settings on all Edit Post/Pages.

Example – Thesis Custom Class

Note: Custom classes cannot start with a number.

Thesis already creates a body class for pages (not posts) including pages for archives and categories.

You can grab the auto generated body class for pages from the source code.

If you use the field shown in the screenshot above, the default body class for pages will be overwritten with your custom class.

How To Use The Body Class

Simply create a unique name for your class in the Custom Body Class field and add it along with your declarations to your child theme’s style.css file.

Try using a CSS 3 Generator to create some fancy effects.

Simple Code Example

This code will create a frame around your site only on the page/post where you have created the custom class.

This code will change the font style and font color on the specific page or post you create the custom body class.

You see how easy it would be to display custom fonts on specific pages and posts in WordPress.

Add New Custom Body Class To Specific Page I.D

Simple paste this code into your child themes functions.php file and change the page i.d to suit your needs.

This code includes a custom body class named demo class which you can use to style the page with i.d of 007.

You can now view the body class in your source code.

Test your new custom class works by adding some demo CSS in your child themes style.css file:

Adding Body Class To Default Theme

If your theme doesn’t include a body class field built in, you can add this code with the parameter you want to use to your header.php file.

You’ll then need to add a custom function as well.

Simply paste this code in your child themes functions.php file and add your new body class to a specific page.

You can also add more classes to the template tag like this:

Header.php File

Here’s the body class template tag before adding the custom body class in the themes header.php.

The classes are restricted to the default template tags parameters.

Here are a few examples:

• home
• blog
• archive
• date
• single postid-(id)
• single-(post_type)
• page-id-(page_id)
• author
• category
• category-(slug)
• tag
• tag-(slug)

You can also view the output your custom body class creates in the View Source Code for that page/posts HTML using your browser.

Adding Styles To Your Custom Body Class

Once you have created the body class, you can then add your CSS declarations in your child themes style.css file.

You can use the body class selector and add your own declarations within the brackets.

Using Body Class To Style Images

Once you’ve added your body class, you can then add styles in your child theme.

This CSS code will add a red frame to all images on the page or post which contains the custom body class of custom-body-demo.

I’ll be adding more examples of CSS code snippets which you can use for styling all HTML elements on a specific page or post after creating a custom body class.

Resources

Filters the list of CSS body class names for the current post or page.

Body_class Wordpress Add Class

Contents

• Related

Parameters #Parameters

(string[])An array of body class names.

Body Class

(string[])An array of additional class names added to the body.

More Information #More Information

Note that the filter function must return the array of classes after it is finished processing, or all of the classes will be cleared and could seriously impact the visual state of a user’s site.

Body Classifier (bcl)

Source #Source

Body Class Html

File: wp-includes/post-template.php

Related #Related

Used By #Used By