Twenty Twelve Widget Taking Space

Question

There are some confusing information in your question and some important information missing

Did you set a static front page as it is suggested in your code
Do you need to achieve this on your front page or homepage
Why aren’t you using the front-page.php template included if you have set a static front page, that is actually exactly what you need. The main sidebar is removed from that template and works exactly like the full-width page template except for the two front-page sidebars, but these should not interfere with what you need to achieve. EDIT To create a static front page, read this article for more info: Creating a Static Front Page

If you need this on your homepage or if you need to change your page.php, it is going to be quite unpleasant frustrating job. I can help you with some tips and little code, but not full code, it is a quite code intensive modification

Have a look at the functions.php, lines 407 to 455. Twenty twelve uses custom body classes to add the full-width body class to the full-width.php template and most importantly, when there is no active sidebar

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

Lets use the index.php as example. If you add a widget to the main sidebar (sidebar-1), it will appear on all the site’s pages. Because the sidebar has a widget attached to it, the sidebar’s status will be active.

The following happens:

! is_active_sidebar( 'sidebar-1' ) returns false,
is_page_template( 'page-templates/full-width.php' ) returns false
Because of both statements returning false, the condition fails to execute, so the full-width class is not applied

What this means

Even if you remove the call to the sidebar or call the sidebar conditionally, it will only remove the sidebar content, but the white space will remain, as can be seen in your question. Even though the particular page is not calling the sidebar, the sidebar still has an active status due to the widget it have attached to it

THE LET DOWN – FLAW

The twentytwelve_body_class function is not pluggable, so it cannot just be simply be overwritten with a child theme. There is also no filter provided, so you can filter and modify the behavior of the body classes.

SOLVING THE PROBLEM

Please note: all these changes MUST be done in a child theme, never make changes to the original theme. I have taken the homepage (index.php) as example, change as necessary

METHOD 1

Probably not the best solution. Remove the call to the sidebar from your index.php (if you havent yet done so, just copy th index.php to your child theme and remove the sidebar call). Now, unset the original full-width class and register a new class, and call it maybe new-full-width. Something like this will do (Note: this needs to go into your child teme functions.php)

function wpse_alter_body_classes($classes) {
    foreach($classes as $key => $value) {
        if ($value == 'full-width') {
            unset($classes[$key]);
        }
    }

    if ( ! is_active_sidebar( 'sidebar-1' ) || is_home() || is_page_template( 'page-templates/full-width.php' ) ) {
        $classes[] = 'new-full-width';
    }

    return $classes;
}

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

You now need to look for all instances of full-width in the twenty twelve style.css, copy them to your child theme and change them all to new-full-width

METHOD 2

Better option than method 1. Simply just register a new special body class (say home-class) just for the home page. (Note: this needs to go into your child teme functions.php)

function wpse_alter_body_classes($classes) {

    if ( is_home() ) {
        $classes[] = 'home-class';
    }

    return $classes;
}

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

Once again, copy all instances of full-width from the style.css of twenty twelve to your child theme. Rename all instances of full-width to home-class

METHOD 3

If you are really adventurous, take the twenty twelve theme, rename it, and create your own new stand alone theme with your own customizations

METHOD 4

This is by far the easiest. Rethink and replan your complete setup as to align with the limitations of the theme.

TO CLOSE THE ANSWER

It is important to keep images and how they are added and displayed in mind. You also might need to look at the has-post-thumbnail class that is defined when the front-page.php template is used. Remember, always upload an image using full size, do not use the other three standard sizes

Related Posts: