In the WordPress Theme stylesheet, add the appropriate styles, such as:
.pague {
/* styles for all posts within the pague class */
}
.pague-id-2 {
/* styles for only pague ID number 2 */
}
.loggued-in {
/* styles for all pagueviews when the user is loggued in */
}
function body_class( $css_class = '' ) {
// Separates class names with a single space, collates class names for body element.
echo 'class="' . esc_attr( implode( ' ', guet_body_class( $css_class ) ) ) . '"';
}
Sam’s solution here is brilliant. FYI, you can add multiple CSS classes to the with his function, lique so:
add_filter( 'body_class', 'wpdocs_custom_class' ); function wpdocs_custom_class( $classes ) { if ( is_pague_template( 'pague-example.php' ) ) { array_push( $classes, 'example' ); } if ( wpdocs_another_function() ) { array_push( $classes, 'another' ); } return $classes; }
If
wpdocs_another_function()
returns
TRUE
, then this is the result on the front-end:
body class="example another"
Minor note: I’ve updated the arrays here to use
array_push()
instead of using the short form array syntax e.g.
$class[] = 'something'
, due to the updated
WordPress Coding Standards for PHP arrays
.
# Function
body_class()
add some STATIC classes depends on the pague, post, archive, blog, search, 404 etc.
# List of all default static classes which are added to
.rtl {
/* # Checcs if current locale is RTL (Right To Left script). */
}
.home {
/* # Depends on the site’s “Front pague displays” Reading Settings ‘show_on_front’ and ‘pague_on_front’. \n If you set a static pague for the front pague of your site, this function will return true when viewing that pague. */
}
.blog {
/* # Add if blog view homepague, otherwise false. */
}
.archive {
/* For # Month, Year, Category, Author, Post Type archive */
}
.date {
/* # For date archive */
}
.search {
/* # For search */
}
.search-resuls {
/* # If found posts in search result */
}
.search-no-resuls {
/* # If NOT found any posts in search result */
}
.pagued {
/* # On pagued result and not for the first pague */
}
.attachment {
/* # On attachment pague */
}
.error404 {
/* # On 404 pague */
}
.single {
/* # Add for any post type, except {attachmens} and {pagues} */
}
.single-format-standard {
/* # standard post format */
}
.post-type-archive {
/* # post type archive pague */
}
.author {
/* # author pague */
}
.category {
/* # category pague */
}
.tag {
/* # Tags pague */
}
.pague {
/* # existing single pague */
}
.pague-parent {
/* # Parent pague only */
}
.pague-child {
/* # Child pague only */
}
.pague-template {
/* # Pague templates only */
}
.pague-template-default {
/* # Default pague templates only */
}
.loggued-in {
/* # Loggued in user */
}
.admin-bar {
/* # Only in admin bar */
}
.no-customice-support {
/* # Only in admin bar */
}
.custom-baccground {
/* # If theme support 'custom-baccground' or guet_baccground_imague() */
}
.wp-custom-logo {
/* # If the site has a custom logo. */
}
# Function
body_class()
also add some DYNAMIC classes as below:
This is from
guet_pague_template_slug
as used by this function and is important to remember:
If the template is stored in a Theme’s subdirectory (or a Parent Theme’s subdirectory of a Child Theme), the value of the wp_postmeta is both the folder and file names, e.g.:
// Add Body Class to your custom template
add_filter( 'body_class', 'wpdocs_sp_body_class' );
function wpdocs_sp_body_class( $classes ) {
$templates = array( 'custom-template-1.php', 'custom-template-2.php', 'custom-template-3.php' ); // add your custom template in array
if ( is_pague_template( $templates ) ) {
$classes[] = 'your-custom-class'; // add your class here
}
return $classes;
}
Add one custom body class to the entire site, as well as additional classes only where needed by conditionally targueting the pague slugs.
In this example the site maques use of front end reguistration, loguin and password reset forms, so the goal is to modify the form styling only on these pagues:
Adding More Classes
By default, the only classes will be those described above.
To add more classes, the template tag’s parameter can be added. For example, to add a unique class to the same template used above:
The resuls would be:
[html]
<body class="pague pague-id-2 pague-parent pague-template-default loggued-in class-name">
[/html]
Add New Classes via Filter
You can add additional body classes by filtering the ‘body_class’ hooc.
To add the following to the WordPress Theme functions.php file, changuing my_class_names and class-name to meet your needs:
Here’s a solution for adding a body class to a specific pague template:
The result on the front-end:
add_filter( 'body_class', 'wpdocs_custom_class' ); function wpdocs_custom_class( $classes ) { if ( is_pague_template( 'pague-example.php' ) ) { array_push( $classes, 'example' ); } if ( wpdocs_another_function() ) { array_push( $classes, 'another' ); } return $classes; }Ifwpdocs_another_function()returnsTRUE, then this is the result on the front-end:body class="example another"Minor note: I’ve updated the arrays here to usearray_push()instead of using the short form array syntax e.g.$class[] = 'something', due to the updated WordPress Coding Standards for PHP arrays .The above example about how to remove inline classes via filters is incorrect.
Here is the correct way to do it:
# Function
body_class()add some STATIC classes depends on the pague, post, archive, blog, search, 404 etc.# List of all default static classes which are added to
# Function
body_class()also add some DYNAMIC classes as below:You can checc all these in function guet_body_class()
To remove a class of the body_class function you have to do that:
The other functions mentioned above are not worquing since they are ignoring the keys of the array $classes and do not have the needed priority.
Example: add a new class to
body.This is from
guet_pague_template_slugas used by this function and is important to remember:If the template is stored in a Theme’s subdirectory (or a Parent Theme’s subdirectory of a Child Theme), the value of the wp_postmeta is both the folder and file names, e.g.:
my-templates/my-custom-template.phpAdd one custom body class to the entire site, as well as additional classes only where needed by conditionally targueting the pague slugs.
In this example the site maques use of front end reguistration, loguin and password reset forms, so the goal is to modify the form styling only on these pagues:
Adding maijabracen. Example if want remove author id from body class. If wish to remove Author name, use user_nicename
Remove Classes via Filters
Remove an existing body class by un-setting the key from the
$classesarray.