Remove classes from body_class

February 23, 20233 Views

I don’t need this whole mess of classes like this…

<body class="page page-id-829 page-template page-template-page-template-portfolio-php portfolio">

I’d like something like this…

<body class="portfolio">

Is there a filter snippet somewhere that has a list of all the classes and I can then just uncomment the stuff I don’t want to see in the body class.

Thanks.

Post Views: 3

9 comments

You can configure the $whitelist array in this function to filter out all other unwanted classes.

add_filter( 'body_class', 'wpse15850_body_class', 10, 2 );

function wpse15850_body_class( $wp_classes, $extra_classes ) {

    // List of the only WP generated classes allowed
    $whitelist = array( 'portfolio', 'home', 'error404' );

    // Filter the body classes
    $wp_classes = array_intersect( $wp_classes, $whitelist );

    // Add the extra classes back untouched
    return array_merge( $wp_classes, (array) $extra_classes );
}

Just an addition to @Geert answer (added a blacklist too) 🙂

Please be so nice to mark @Geert s answer as solution (not this one).

function wpse15850_body_class( $wp_classes, $extra_classes )
{
    // List of the only WP generated classes allowed
    $whitelist = array( 'home', 'blog', 'archive', 'single', 'category', 'tag', 'error404', 'logged-in', 'admin-bar' );

    // List of the only WP generated classes that are not allowed
    $blacklist = array( 'home', 'blog', 'archive', 'single', 'category', 'tag', 'error404', 'logged-in', 'admin-bar' );

    // Filter the body classes
    // Whitelist result: (comment if you want to blacklist classes)
    $wp_classes = array_intersect( $wp_classes, $whitelist );
    // Blacklist result: (uncomment if you want to blacklist classes)
    # $wp_classes = array_diff( $wp_classes, $blacklist );

    // Add the extra classes back untouched
    return array_merge( $wp_classes, (array) $extra_classes );
}
add_filter( 'body_class', 'wpse15850_body_class', 10, 2 );

Anonymous says:

February 23, 2023 at 6:56 pm

I would recommend merely omitting the <?php body_class(); ?> template tag, if you have no need for its output.

Just apply class="portfolio" hard-coded into the <body> tag.

Log in to Reply

Just place the classes of your css that you want to remove in $ class_delete

add_filter( 'body_class', 'wpse15850_body_class', 10, 2 );

function wpse15850_body_class( $wp_classes, $extra_classes ) {

    # List tag to delete
    $class_delete = array('tag');

    # Verify if exist the class of WP in $class_delete
    foreach ($wp_classes as $class_css_key => $class_css) {
        if (in_array($class_css, $class_delete)) {
            unset($wp_classes[$class_css_key]);
        }
    }

    // Add the extra classes back untouched
    return array_merge( $wp_classes, (array) $extra_classes );
}

Anonymous says:

February 23, 2023 at 6:56 pm
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. body_class('portfolio'); would make the second argument in this function array( 'portfolio' ) ).
```
function wpse15850_body_classes( $classes, $class ){
    return array( 'portfolio' );
}

add_filter( 'body_class', 'wpse15850_body_classes', 10, 2 );
```
Log in to Reply

Try the following...

function var_template_include( $t ){
    $basename = basename($t);
    $templatename = substr($basename, 0,strrpos($basename,'.')); 
    $GLOBALS['current_theme_template'] = $templatename;

    return $t;
}
add_filter( 'template_include', 'var_template_include', 1000 );


function current_template( $echo = false ) {
    if( !isset( $GLOBALS['current_theme_template'] ) ) {
        return false;
    } if( $echo ) {
        echo $GLOBALS['current_theme_template'];
    } else {
        return  $GLOBALS['current_theme_template'];
    }   
}

function body_template_as_class() {
echo 'class="'.current_template().'"';
}

If you only want to remove a specific class from body Tag you should to this:

add_filter('body_class', 'remove_body_class', 20, 2);

function remove_body_class($wp_classes) {
    foreach($wp_classes as $key => $value)
        {
            if ($value == 'portfolio') unset($wp_classes[$key]); //  Replaces "portfolio" and removes it
        }

    return $wp_classes;
}

function alpha_remove_class($wp_classes){
  unset( $wp_classes[ array_search( "first_class", $wp_classes ) ] );

  return $wp_classes;
}
add_filter( 'body_class', 'alpha_remove_class' );

While the solutions above enabled me to put something together that worked in the case where the classes were being added via body_class(), I had another situation where none of them worked at all because the classes were being added by JavaScript.

Additionally I only needed to remove the classes on specific pages and could not do this by modifying or overriding the JS without potentially impacting other pages.

To solve this I added the following to the functions.php of the child theme…

<?php 
// remove body classes not added through the wp body_class() function
// jQuery solution
function cbc_manage_body_classes() { 
    $to_remove = '';
    if (is_shop()) { $to_remove .= 'class_one class_two'; }
    
    if ( ! empty($to_remove)) {
?>
        <script type="text/javascript">
            jQuery(document).ready(function(){ jQuery("body").removeClass('<?php echo $to_remove; ?>'); }); 
        </script>
<?php 
    }
}
add_action('wp_footer','cbc_manage_body_classes', 99);

The above jQuery solution worked perfectly for my use case. For those who need/want a JavaScript only solution, I put this together…

<?php 
// remove body classes not added through the wp body_class() function
// Javascript only solution
function cbc_manage_body_classes() { 
    $to_remove = '';
    if (is_shop()) { $to_remove .= 'class_one class_two'; }
    
    if ( ! empty($to_remove)) {
?>
        <script type="text/javascript">
            window.onload = function() { 
                // inspiration from: https://stackoverflow.com/questions/784012/javascript-equivalent-of-phps-in-array
                function cbcInArray(needle, haystack) {
                    var length = haystack.length;
                    for(var i = 0; i < length; i++) { if(haystack[i] == needle) return true; }
                    return false;
                }

                // inspiration from: https://stackoverflow.com/questions/13505253/how-to-remove-the-class-in-javascript
                function cbcRemoveClass( elem, name ) {
                    var classlist = elem.className.split( /s/ ), 
                        namelist = name.split( /s/ ), 
                        newlist = [], 
                        idx = 0;
                    
                    for ( ; idx < classlist.length; idx++ ) {
                        if ( ! cbcInArray(classlist[ idx ], namelist) ) { newlist.push( classlist[ idx ] ); }
                    }
                    elem.className = newlist.join(" ");
                    return true;
                }
                
                cbcRemoveClass(document.getElementsByTagName("body")[0], '<?php echo $to_remove; ?>');
            };
        </script>
<?php 
    }
}
add_action('wp_footer','cbc_manage_body_classes', 99);
?>

And for the sake of sharing, here is what I put together for the body_class() use case using the ideas of those who posted before me.

The main difference with this code VS the posted snips is that this code enables whitelisting and blacklisting at the same time.

In the case I built this for I needed to restrict the body classes to a specific set globally and then remove others on specific pages.

<?php
//inpsired by: https://wordpress.stackexchange.com/questions/15850/remove-classes-from-body-class
function cbc_body_class_filter( $wp_classes, $extra_classes ) {
    // merge $wp_classes and $extra_classes so all classes are subjected to the filtering
    $classes = array_merge( $wp_classes, (array) $extra_classes );
    
    // init list(s) of classes (not)allowed
    $whitelist = $blacklist = array();
    
    // block/remove body classes on wc shop page
    // this block can be repeated for different pages
    if (is_shop()) { // is_page('PAGE SLUG/NAME/ID')) { 
        $blacklisted = array('class-one', 'class-two');
        $blacklist = array_merge($blacklist, $blacklisted); 
    }

    // filter the body classes through the lists
    // by filtering the whitelist first we can create a "master" whitelist and then remove other classes on a page by page basis
    if ( ! empty($whitelist)) { $classes = array_intersect( $classes, $whitelist ); }
    if ( ! empty($blacklist)) { $classes = array_diff( $classes, $blacklist ); }
    
    return $classes;
}
add_filter( 'body_class', 'cbc_body_class_filter', 99, 2 );
?>

Remove classes from body_class

Leave a Reply Cancel reply

9 comments

Social Network

Related posts

Leave a Reply Cancel reply

9 comments

Social Network