50 | Twenty Eleven – New Page Template with Sidebar Correction


If you are creating a new page template for a child theme of Twenty Eleven, with a sidebar, you need to correct the body_class output to remove the css class .singular.

Add this to functions.php of your child theme:

add_filter('body_class', 'adjust_body_class', 20, 2);  
function adjust_body_class($wp_classes, $extra_classes) { 

if( is_page_template('new-sidebar-page-template-file-name.php') ) : 
// Filter the body classes     
	  foreach($wp_classes as $key => $value) {
	  if ($value == 'singular') unset($wp_classes[$key]);
// Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes ); 

If you created more than one new page template with sidebar, change this one line in the code to something like:

if( is_page_template('new-sidebar-page-template-file-name.php') || is_page_template('another-sidebar-page-template.php') || is_page_template('further-sidebar-page-template.php') ) :

The above codes are similar to what I used in this recent article.

This entry was posted in Tips & Tricks, Twenty Eleven and tagged , , . Bookmark the permalink.

17 Responses to Twenty Eleven – New Page Template with Sidebar Correction

  1. TimothyJ comments:

    Thanks so much for this. Very helpful! I still prefer this modifying and using this theme over any of the new ones. So to find this is just gold.


  2. Mike comments:

    Thanks for this. Works.

  3. Glenn Dixon comments:

    Thanks so much for this article! 🙂 Yes, I’m using 2011 as a base lol

  4. Will Stevens comments:

    Been scratching my head for a couple of hours trying to figure out why this was happening when my template file was identical. Added your code to my child functions.php file and it has worked a treat! Thanks!

  5. vletroye comments:

    In functions.php, there is a method twentyeleven_body_classes() since Twenty Eleven 1.0.

    This one is adding the css class .singular except for the home page and the page templates showcase and sidebar-page.
    The easiest is therefore to add your own page template as another exceptions. Ex.: I did it for my page-of-posts

    * Adds two classes to the array of body classes.
    * The first is if the site has only had one author with published posts.
    * The second is if a singular post being displayed
    * @since Twenty Eleven 1.0
    function twentyeleven_body_classes( $classes ) {

    if ( function_exists( ‘is_multi_author’ ) && ! is_multi_author() )
    $classes[] = ‘single-author’;

    if ( is_singular() && ! is_home() && ! is_page_template( ‘showcase.php’ ) && ! is_page_template( ‘sidebar-page.php’ ) && ! is_page_template( ‘page-of-posts.php’ ))
    $classes[] = ‘singular’;

    return $classes;
    add_filter( ‘body_class’, ‘twentyeleven_body_classes’ );

    • alchymyth replies:

      this works, and would be a good option within a cloned, renamed copy of the theme. as it stands, it ignores the importance of creating a child theme. as Twenty Eleven is the default theme of wp3.4, keeping it unedited can be important in case of serious problems. without a child theme, you are also having the risk of accidentally updating your theme and losing the customisations.

  6. Houston comments:

    Thanks, I got this to do what I want for the single blog post page by changing if( is_page_template('page.php') ) : to if( is_single('') ) :

  7. Kaye comments:

    I want to do this as well. I used this…

    // Add specific CSS class by filter TO REMOVE the body class for the left sidebar

    add_filter('body_class', 'adjust_body_class', 20, 2);
    function adjust_body_class($wp_classes, $extra_classes) {

    if( is_page_template('page.php') ) :
    // Filter the body classes

    foreach($wp_classes as $key => $value) {
    if ($value == 'left-sidebar') unset($wp_classes[$key]);


    // Add the extra classes back untouched
    return array_merge($wp_classes, (array) $extra_classes );

    BUT – the body class of left-sidebar is still being put into the site (and yes I made sure I was looking on a ‘page’).

    I want to remove the body class .left-sidebar for the entire site… all possible template files.

    I am working with a 2011 child theme http://ratest3.com/sample-page/

    • alchymyth replies:

      answered in the WordPress.org support forum; possibly use is_page() in the conditional statement. however, there would be other ways of controlling the width of pages without sidebar…
      good luck and cheers, alchymyth

  8. Ollie comments:

    Looking all over for this! Thanks this is much better than the messy CSS override solution I was using.

  9. Brittney comments:

    Thanks, I thought I was going crazy doing something wrong. This worked perfectly!

  10. dprogramb comments:

    Thanks. Worked like a charm.

  11. Jack comments:

    Thanks. Would have been lost without this fix.

  12. Ian comments:

    Thank you. Was just about to go back to 2010!

    What I don’t get is why sidebar-page.php works but if you make a duplicate with a new filename and template name it doesn’t work.

    It shouldn’t be necessary to use the workaround you posted here. I’m really annoyed with WordPress for this one. They must do something similar to what you did somewhere. They need to update their instructions on making new template pages.

    • alchymyth replies:

      I partly agree – it seems that the default theme is not meant to be easy but more a showcase of what is possible, or something to stretch the user’s patience. A read-me instruction manual for the Twenty Eleven would definitvely be a great idea.

  13. Lesle comments:

    Thank you so much for this–I was losing patience and this tip fixed my site!

  14. Pingback: WordPress Community Roundup for the Week Ending January 21 - Charleston WordPress User Group


    24/01/2012 | […] Twenty Eleven – New Page Template with Sidebar Correction […]

Leave a Reply to Brittney Cancel reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.