65 | A Sidebar Template for a Page in the ‘One-Column’ Layout in Twenty Eleven

g+

This article describes the necessary coding to create a page template with a sidebar within a ‘one-column’ layout of Twenty Eleven; the example is for a right sidebar.

All changes have to be made in a child theme of Twenty Eleven.

Create your own page template from a copy of the sidebar-page.php template; call it sidebar-page-right-in-one-column.php; edit the Template Name and description.

<?php
/**
* Template Name: Sidebar right in Page in 'One-Column'
* Description: A Page Template that adds a right sidebar to a static page in the 'one-column' theme option
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

<div id="primary">
<div id="content" role="main">

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', 'page' ); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

</div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Then make a few edits to sidebar.php and functions.php, to include the new page template into the coding;

start by editing sidebar.php to look like ( http://pastebin.com/pdqsRY8x ):

<?php
/**
* The Sidebar containing the main widget area.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

$options = twentyeleven_get_theme_options();
$current_layout = $options['theme_layout'];

if ( 'content' != $current_layout || is_page_template('sidebar-page-right-in-one-column.php') ) :
?>
<div id="secondary" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

<aside id="archives">
<h3><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
</ul>
</aside>

<aside id="meta">
<h3><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</aside>

<?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->
<?php endif; ?>

Then add this section to functions.php to readjust the body_classes ( http://pastebin.com/nubXyyty ):

function twentyeleven_child_pagetemplates_body_classes( $wp_classes, $extra ){

$classes = array();

if( is_page_template( 'sidebar-page-right-in-one-column.php' ) ) :
// correction for the Sidebar Template 'right sidebar on page in one-column layout'
$classes[] = 'right-sidebar';
$classes[] = 'two-column';
$blacklist = array('one-column','content','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 );

Last thing is to set the max width for the .page-template-sidebar-page-right-in-one-column-php #page to 690px, to keep the narrower width for the new page template.

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

6 Responses to A Sidebar Template for a Page in the ‘One-Column’ Layout in Twenty Eleven

  1. Eproc comments:

    This has proved really helpful advice for me. I’ve just started building my own WP site http://whichmitersaw.net/ and really appreciate all the comments being made on this blog.

  2. powflow comments:

    ok I’ll reword that – in your new page template take out the line that says to get the sidebar and put it near the top just under the div tag with the id “content”

  3. powflow comments:

    Sorry, when I posted the reply my code was removed from it – you would need to take this piece of code: and place it just under this:

  4. powflow comments:

    Michelle,

    This isn’t a very elegant workaround but you could try placing the call for the sidebar higher in the page code so that it’s under the content division like this:

    After that you can add some lines to style.css to float the sidebar to the left like this:

    .page-template-sidebar-page-left-in-one-column-php #secondary {
    float: left;
    }

  5. Michelle Grant comments:

    Hey Michael, thanks this is just what I was looking for and I made it work for a left sidebar not a right one just by swapping left for right in the code above… except I have a problem! The sidebar appears to be below the other content area. The sidebar custom menu comes in under the page title, then any content that I add to the page pushes the menu further down the page… I am working on this locally so can’t show you what i mean!

    Any help much appreciated : )

    Michelle

    • Michael replies:

      Hi Michelle,

      troubleshooting check list:

      - the template file name is important for the ‘is_page_template()’ conditional statements;
      sidebar-page-left-in-one-column.php

      - in sidebar.php: this needs to be the changed line:
      if ( ‘content’ != $current_layout || is_page_template(‘sidebar-page-left-in-one-column.php’) ) :

      - in functions.php, this is the code rewritten for ‘left’:
      http://pastebin.com/DuFsSvXD

      the only other thing I can think of, is if you are also using the ‘theme extensions’ plugin which might interfere ?
      and there is always the odd chance of some css making trouble.

      unfortunately, working locally always has the side effect that you are virtually alone with any problems.

      cheers, Michael

Leave a 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=""> <strike> <strong>