18

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.

Improve this question
3
  • The real question is why would you want to do that? Having those extra classes doesn't matter in the grand scheme of things, and it's nice to have them for styling, if you want to reference them later.
    – Otto
    Commented Apr 28, 2011 at 21:08
  • 3
    @Otto - i can fully understand her/him. If you're going to play around with adding classes in eg. firebug, then it's really hard to handle this. FF is often buggy and the classname you're writing out of the viewport. I turn off lots of post- and body-classes during dev myself - it makes life easier.
    – kaiser
    Commented Apr 28, 2011 at 23:52
  • Ahh, yeah, I don't use Firebug. Its interface is deplorable.
    – Otto
    Commented Apr 29, 2011 at 18:59

9 Answers 9

Reset to default
33

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 );
}
Improve this answer
0
17

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 );
Improve this answer
4
  • Although a very good working solution, I still find 'no-js' is added as a class
    – henrywright
    Commented Jan 27, 2014 at 12:07
  • 1
    Regarding the no-js class - I think it might be a BuddyPress thing. I'll investigate!
    – henrywright
    Commented Jan 27, 2014 at 12:36
  • 1
    no-js or likewise js are usually dealt with using javascript/jquery, so I'm guessing it was a script that you'd need to dequeue
    – Bryan Willis
    Commented Dec 19, 2015 at 3:35
  • no-js will be added by the server, but removed with a script if javascript is allowed to run on the browser.
    – Davey
    Commented Apr 30, 2019 at 8:10
4

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.

Improve this answer
2
  • if you want to host your theme at the wp.org repo, then you don't have this choise (just a sidenote).
    – kaiser
    Commented Apr 28, 2011 at 23:46
  • 1
    LOL, I know... I've reviewed one or two Themes for the WPORG repository. :) I assumed from the question, though, that this Theme is for personal use, rather than general, public distribution.
    – Chip Bennett
    Commented Apr 29, 2011 at 0:51
3

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 );
}
Improve this answer
1

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 );
Improve this answer
1 
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().'"';
}
Improve this answer
1

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;
}
Improve this answer
1
  • This should be the correct and accepted answer, easy and works great.
    – Jodyshop
    Commented Sep 22, 2021 at 6:58
1 
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' );
Improve this answer
1
  • Welcome to WordPress Stack Exchange! Could you please edit your answer, using the edit link above and explain what this code does, where you would put this code, and how it's different or better than any of the previously posted answers? Code only answers are usually discouraged without any explanation.
    – Howdy_McGee ♦
    Commented Sep 5, 2018 at 21:34
0

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 );
?>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.