• James posted an update 1 year, 2 months ago

    Here is an easy way in wordpress to add a class to the body element which you can then use to alter your design if wordpress is using a sidebar or not

    Simply add the following code to your theme function.php which will check to see if sidebar is active and if it is then it will add the class has-sidebar to the body.

    add_filter( ‘body_class’, ‘wpse_77719_sidebar_body_class’ );

    function has_sidebar($classes) {
    if (is_active_sidebar(‘ PLACE YOUR SIDEBAR ID HERE’)) {
    // add ‘class-name’ to the $classes array
    $classes[] = ‘has_sidebar’;
    }
    // return the $classes array
    return $classes;
    }
    add_filter(‘body_class’,’has_sidebar’);

    Now you can add css like this which will make the site-content 100% width if the sidebar is not active but if the sidebar is active the browser will instead use .site-content .has-sidebar and will make room for the sidebar by making the width of the content 70%!

    .site-content {
    width:100%;
    position:relative;
    float:left;
    }

    .site-content .has-sidebar {
    width:70%;
    position:relative;
    float:left;
    }

    .sidebar {
    width:30%;
    position:relative;
    float:left;

    }

    Easy!