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.

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
    Apr 28 '11 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
    Apr 28 '11 at 23:52
  • Ahh, yeah, I don't use Firebug. Its interface is deplorable.
    – Otto
    Apr 29 '11 at 18:59
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 );
}
0
16

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 );
4
  • Although a very good working solution, I still find 'no-js' is added as a class Jan 27 '14 at 12:07
  • 1
    Regarding the no-js class - I think it might be a BuddyPress thing. I'll investigate! Jan 27 '14 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 Dec 19 '15 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
    Apr 30 '19 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.

2
  • if you want to host your theme at the wp.org repo, then you don't have this choise (just a sidenote).
    – kaiser
    Apr 28 '11 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. Apr 29 '11 at 0:51
2

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 );
}
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 );
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().'"';
}
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;
}
1
  • This should be the correct and accepted answer, easy and works great.
    – Jodyshop
    Sep 22 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' );
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
    Sep 5 '18 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 );
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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