Adding Custom Body Classes in DigiFusion

You can add custom body classes to your DigiFusion theme for more targeted CSS styling and JavaScript functionality. This is useful for creating page-specific styles or adding conditional styling based on various WordPress conditions.

Basic Custom Body Classes

Add this function to your child theme’s functions.php file:

function digifusion_child_custom_body_classes( $classes ) {
    // Add custom class to all pages
    $classes[] = 'custom-site';
    
    // Add class based on post type
    if ( is_singular() ) {
        global $post;
        $classes[] = 'post-type-' . $post->post_type;
    }
    
    // Add class for logged in users
    if ( is_user_logged_in() ) {
        $classes[] = 'user-logged-in';
    } else {
        $classes[] = 'user-logged-out';
    }
    
    return $classes;
}
add_filter( 'body_class', 'digifusion_child_custom_body_classes' );

Page-Specific Body Classes

To add classes based on specific pages or conditions:

function digifusion_child_page_specific_body_classes( $classes ) {
    // Add class for homepage
    if ( is_front_page() ) {
        $classes[] = 'is-homepage';
    }
    
    // Add class for blog page
    if ( is_home() ) {
        $classes[] = 'is-blog-page';
    }
    
    // Add class for WooCommerce pages
    if ( class_exists( 'WooCommerce' ) ) {
        if ( is_shop() ) {
            $classes[] = 'is-shop-page';
        }
        
        if ( is_product() ) {
            $classes[] = 'is-single-product';
        }
        
        if ( is_cart() ) {
            $classes[] = 'is-cart-page';
        }
        
        if ( is_checkout() ) {
            $classes[] = 'is-checkout-page';
        }
    }
    
    return $classes;
}
add_filter( 'body_class', 'digifusion_child_page_specific_body_classes' );

All these functions will add their respective classes to the <body> element, allowing you to target specific conditions with CSS or JavaScript. You can combine multiple functions or use only the ones you need for your specific requirements.

Adding Custom Body Classes in DigiFusion

Basic Custom Body Classes

Page-Specific Body Classes

Similar Articles