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]);
	  }
      
endif; 
// 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.

Page Template Sidebar Overwrite Theme Options in Twenty Eleven

example of left and right sidebars in static pages of Twenty Eleven
Sidebar on the left or on the right within one Twenty Eleven child theme

Twenty Eleven already comes with a page template to add a sidebar to static pages. However, this sidebar will always be on the same side as the sidebar on the front  page, ruled by the ‘theme options’.
On some pages, you might want to show the sidebar on the opposite side.
This freedom of choice is possible with some special page templates and some coding in functions.php of the theme.

The following codes refer to a child theme of Twenty Eleven.

If you don’t want to follow the steps outlined in the Codex, you can download a ready-made child theme from quirm.net.

First step: in your child theme folder, create two new page templates – one for a fixed sidebar on the left, and the other for the sidebar on the right.

To begin with, copy the code of sidebar-page.php, and save it as sidebar-left-page.php and sidebar-right-page.php, resp.

The file names are important as they refer to the same names in the code for functions.php.

Second step: Change the line ‘ * Template Name: Sidebar Template’ to ‘ * Template Name: Left  Sidebar Template’ and ‘ * Template Name: Right Sidebar Template’, resp.; save the files.

Third step: add the following code to functions.php of your child theme:

function twentyeleven_child_pagetemplates_body_classes( $wp_classes, $extra ){

  $classes = array();

  if( is_page_template( 'sidebar-left-page.php' ) ) :
  // correction for the Left Sidebar Template
    $classes[] = 'left-sidebar';
    $blacklist = array('right-sidebar','singular');
    // Filter the body classes
    foreach( $blacklist as $val ) {
      if (!in_array($val, $wp_classes)) : continue;
      else:
      foreach($wp_classes as $key => $value) {
        if ($value == $val) unset($wp_classes[$key]);
      }
      endif;
    }
  endif;

  if( is_page_template( 'sidebar-right-page.php' ) ) :
  // correction for the Right Sidebar Template
    $classes[] = 'right-sidebar';
    $blacklist = array('left-sidebar','singular');
    // Filter the body classes
    foreach( $blacklist as $val ) {
      if (!in_array($val, $wp_classes)) : continue;
      else:
      foreach($wp_classes as $key => $value) {
        if ($value == $val) unset($wp_classes[$key]);
      }
      endif;
    }
  endif;

return array_merge($wp_classes, (array) $extra, $classes );
}

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

That code will correct the body_classes of the theme, which are central to the layout of your site.

Finished.

Now you will have two more page templates available in the ‘page attributes’ section when you create or edit a static page.

The sidebar position of these pages will be independant of the theme options (as long as one of the ‘content with sidebar’ options is ticked).

Twenty Eleven – Sidebar and Other Adaptations for Hand-held Devices

As the title says: how can you keep the sidebar on narrow screens such as the iPhone® or iPad® and set a minimum width for your site, using (a child theme of ) Twenty Eleven?

The solution lies in the responsive structure of the stylesheet.

This adaptation to the styles needs to be added at the end of style.css of (your child theme of) Twenty Eleven; some example styles, to set a lower limit to the page width, etc:

/* =Responsive Structure for narrow screens
* to keep min width and sidebar
-------------------------------------------- */
@media (max-width: 800px) {
     #page {
	   min-width: 500px;
         }
/* keep the sidebar - for right sidebar */
	.right-sidebar #main #content {
		margin: 0 29% 0 1%;
		width: 70%;
	}
	.right-sidebar #main #secondary {
		float: right;
		margin: 0 1% 0 1%;
		width: 24%;
	}
/* keep the sidebar - for left sidebar */
	.left-sidebar #main #content {
		margin: 0 1% 0 29%;
		width: 70%;
	}
	.left-sidebar #main #secondary {
		float: right;
		margin: 0 -1% 0 2%;
		width: 24%;
	}
/* correction for 'showcase' template */
	.page-template-showcase-php #main #primary.showcase {
		float: right;
		margin: 0 2% 0 2%;
		width: 96%;
	}
	.page-template-showcase-php #main #primary.showcase #content {
		margin: 0 6% 0 6%;
		width: 88%;
	}
	.page-template-showcase-php section.recent-posts {
		float: right;
		margin-right: 0pt;
		margin-left: 31%;
		width: 69%;
	}
	.page-template-showcase-php #main .widget-area {
		float: left;
		margin-right: -22.15%;
		margin-left: 0pt;
		width: 22.15%;
	}
/* correction for singular posts/pages without sidebar */
	.singular #main #content {
		margin: 0 8% 0 8%;
		width: 84%;
	}
/* keep floating footer widgets side-by-side at this size */
     #colophon #supplementary .widget-area {
          float: left;
          margin-right: 1%;
          width: 32%;
     }
}

/*to keep image alignment in narrow browsers*/
@media (max-width: 650px) {
  .alignleft { float: left; }
  .alignright { float: right; }
}

The whole css got a bit longer than expected to care for the ‘showcase’ template, and all possible layout options.

Adjust the ‘minimum width’ to fit the screen width of the targeted hand-held device.
If you are using it with an alredy customized child theme of Twenty ten, you may need to adjusts some of the values and/or add more styles.

Not actually widely tested with iPhone®, iPad® or any other tablet PCs – all feedback is very welcome.

Twenty Eleven – Sidebar on Single Posts and Pages

The new default theme of WP3.2 – Twenty Eleven – is a very versatile theme.
However, the ‘missing’ sidebar on single posts or pages is quite disturbing for some users, loosing their advertising space or the main navigation.
To get the sidebar back is not that simple – style.css is quite complex, and the layout of a single post or page is done with a clever use of a specially introduced css class in the body tag.

First step

Create a child theme.

– create a new sub-folder under the /wp-content/themes folder, for instance: twentyelevenchild;
– add a style.css file to that folder; content:

/*
Theme Name: Twenty Eleven Child
Author: alchymyth
Description: a child theme, based on the 2011 theme for WordPress
Author URI: http://wordpress.org/
Template: twentyeleven
*/

@import url(../twentyeleven/style.css);

– add a functions.php file to that folder; to be used later;
– optional: add a screenshot.jpg image to that folder, depicting the design of your child theme.

Second step

Add the call of the sidebar back.

Edit single.php and/or page.php and add

<?php get_sidebar(); ?>

before the line

<?php get_footer(); ?>

Third step

Suppress the .singular body_class from the single post or page.

To achieve this, add a filter to your new functions.php in your child theme folder.

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
// List of the classes to remove from the WP generated classes
$blacklist = array('singular');
// Filter the body classes
  foreach( $blacklist as $val ) {
    if (!in_array($val, $wp_classes)) : continue;
    else:
	  foreach($wp_classes as $key => $value) {
	  if ($value == $val) unset($wp_classes[$key]);
	  }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}

(resources:
http://dev-tips.com/featured/remove-an-item-from-an-array-by-value
http://wordpress.stackexchange.com/questions/15850/remove-classes-from-body-class )

Fourth step

Fine-tuning of style.css

For instance:

.single #author-info {
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin: 2.2em 0% 0 0%;
	padding: 20px 35.4%;
}

There might be some more details which can be changed while customizing the styles of the child theme.

edit: thanks to member smijos of the wordpress support forum:
some more styles, for the comment section, to make the theme look good:

#respond {
width: auto;
}
.commentlist {
width: auto;
}
.commentlist > li.comment {
margin: 0px 0px 20px 102px;
width: auto;
}

PS: A Few Different Cases

(updated and expanded)

this all concerns this line of code:

if( is_single() || is_page() ) :

1) if you rather use the sidebar-page template that comes with the theme, to control if and when to show a sidebar on a static page, simply don’t edit page.php, and remove

|| is_page()

from that line.

2) Zeaks pointed out that the code also effects single attachment pages.

if you want the sidebar in these pages, edit image.php and add

<?php get_sidebar(); ?>

before the ‘get_footer’ line; also adapt the style of

.image-attachment div.attachment

.

if you want your single attachment pages without sidebar, change to:

if( (is_single() && !is_attachment()) || is_page() ) :

PPS

If you don’t like coding, please do still create the child theme; however, for the rest, there is a plugin available:
‘Twenty Eleven Theme Extensions’