New to the community? Start here

Hide Sidebar When There is No Widget

I noted that in some themes, when I remove all widgets from the sidebar (Apparence -> Widgets), the sidebar disappear from the site and the content become 100% width. I want this!

But in some themes, even when I remove all widgets, it shows default widgets in the sidebar instead of hide it.

How to hide the sidebar when there is no widget? And let the content 100% width.

Thanks.

  • Patrick

    Hi there @Andreza

    I hope you had a great weekend!

    You'll actually find the code you need to add to the theme you want to modify in the functions.php of the Twenty-Twelve theme, as that is one of themes that has that behavior by default.

    Open that file and scroll down to around line 430 where you see this:
    function twentytwelve_body_class( $classes ) {

    You could use that code to create a custom function in your theme's functions.php file. For example:

    function my_custom_body_class( $classes ) {

if ( ! is_active_sidebar( 'sidebar-1' ) || is_page_template( 'page-templates/full-width.php' ) )
		$classes[] = 'full-width';
return $classes;
}
add_filter( 'body_class', 'my_custom_body_class' );

    Note that you would need to change the sidebar & template names to those actually used in your theme.

  • Imperative Ideas

    For all that WordPress coding standards are about readability over clever code, the TwentyX theme set often throws that notion right out the window. I think there's an easier to understand method for accomplishing your goal.

    What follows is an over-simplified example, which could be made much more robust. Details will only serve to confuse the issue for now though.

    I would create a folder structure like this inside of my theme or child theme:

    Now let's assume you are creating page.php or single.php, and you have a registered sidebar called "primary". If primary has widgets, you want to display the 2-column template, but if it doesn't you want a single-column (full width) page.

    Inside of page.php I would get my header, then run a conditional check for the primary sidebar. I would then put two files inside of "page templates" called "two-columns.php" and "one-column.php".

    If the sidebar was found to contain widgets, I would use get_template_part() to pull two-columns.php, else I'd pull one-column.php. The code itself might look something like this.

    Pastebin (with syntax hi-lighting)

    Raw paste for WPMUDev

    <?php

/**
 * This code checks for a named active sidebar, then runs the appropriate template as a result
 */

<?php get_header(); ?>
<div class="wrap">
        <section class="entry-content">

        <?php

                // Check to see if we have an active sidebar named "Primary"
                if ( is_active_sidebar('primary')) :

                        // Get the template "two-columns.php" inside of the "page-templates" folder and display its contents here

                        get_template_part("page-templates/two", "columns");

                // No active sidebar?
                else :

                        // Get the template "one-column.php" inside of the "page-templates" folder and display its contents here
                        get_template_part("page-templates/one", "column");

                // End the conditional
                endif;

        ?>

        </section>
</div>

<?php get_footer(); ?>

    Typically, I would use this sort of conditional as a back up, but my actual switch would be in the theme itself. Using something like CustomPress or ACF, you can add a radio button box with layout options to a page template. Selecting "Two Columns, Left" would place a value of "2c-l" in the option table (this is exactly how Justin Tadlock does it over at Hybrid Core). I could then test for that and test for the presence of the sidebar. Unless both conditions were true, I'd display a full width page.

    We're getting well into the realm of custom theme development now though. I'm happy to advise but it's probably getting beyond the scope of WPMUDev.

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.