0

I am using the twenty twelve theme and in this theme I used the Main Sidebar for widgets. I used the code below to make the widgets disappear in my homepage ( front page ). The code works however, the widget area is still taking the space. How can I stretch my content to fill the whole width?

<?php If ( !is_front_page ) { get_sidebar() } ?>

Before Applying the code the widget is still visible see image below:

The Image Before the code

After Applying The Code Above it removes the widget but the widget is still taking up space.

After Applying the Code

1

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

  • I have done what you said but nothing happens. I created a child theme twentytwelve-child folder inside it is style.css and index.php. In index.php I deleted the get_sidebar(); and replaced with the code in method 1 and I tried method 2 as well. I went to style.css to where I followed this codex.wordpress.org/Child_Themes then replace all full-width with the new classes. But nothing really happens. Is it because I need to change the page.php as well? PS:I have set a static page already and I need to achieve this only in homepag – John Robertson Sep 11 '14 at 2:28
  • I have found the front-page.php please tell me how to use it – John Robertson Sep 11 '14 at 2:29
  • Please see: Creating a static front page Also see my updates in method one and two. The most important question is, what size did you upload your images at. – Pieter Goosen Sep 11 '14 at 4:34
  • I used WP Tiles plugin for the images and there's no problem with it. My problem is the widgets only – John Robertson Sep 11 '14 at 5:00
  • Have you verified that the content area's size does not change. If you have set a static frontpage as described in my link, it should work. Did you follow the instructions in the link provided – Pieter Goosen Sep 11 '14 at 5:06
0

You can write a plugin that will remove the widget and free up the space. Write this in a new plugin.

<?php
function remove_some_widgets(){
unregister_sidebar( 'sidebar-1' );
unregister_sidebar( 'sidebar-2' );
unregister_sidebar( 'sidebar-3' );
}
add_action( 'widgets_init', 'remove_some_widgets', 11 );
?>

where 'sidebar-1' stands for the main sidebar.

  • Hi thank you for the reply. I'm new with wordpress. By saying write this in a new plugin do you mean write that code in the functions.php? I hope you can reply I'll be sleeping now but will resume tomorrow – John Robertson Sep 10 '14 at 13:16
  • 1
    Also, I want to appear the widgets to all my posts and pages except the homepage and I think by using that function it will delete the sidebar causing all posts and pages not to have the widgets, right? – John Robertson Sep 10 '14 at 13:17

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.