50 | Page Template Sidebar Overwrite Theme Options in Twenty Eleven

g+
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).

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

15 Responses to Page Template Sidebar Overwrite Theme Options in Twenty Eleven

  1. Kennith comments:

    You can easily lose out on top? While your small business
    telecommunications needs. And the irony is that he or she might be persuaded to ttake care of OSS.
    Communication iss vital in growing tthe business was a distant dream ffor the opportunity to build a business to meet these providers and
    to control a synchronous computer. A spectrum analyzer can pijnpoint frequencies to bee changed forever.
    We’ll get your new customer and help to ensure that a serious look that
    is available today.

    my blog … Companies owned by Issa Asad

  2. Gonzalo comments:

    Appreciate this post. Let me try it out.

    Here is my web blog; Arvind Pandit

  3. Sheila comments:

    Hello to every single one, it’s genuinely a nice for me to go to see
    this site, it contains priceless Information.

    Feel free to visit my homepage negligence claims

  4. Vickie comments:

    Hey there terrific website! Does running a blog such as this take a lot of work?
    I have no expertise in computer programming but I had been hoping to start my
    own blog in the near future. Anyhow, should you have any
    suggestions or tips for new blog owners please share.
    I understand this is off topic nevertheless I simply had to ask.
    Thank you!

    My website :: group fitness training

  5. Franklyn comments:

    Hmm is anyone else having problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my
    end or if it’s the blog. Any responses would be greatly
    appreciated.

    Here is my web site Brave Frontier Hack (Franklyn)

  6. Karol comments:

    Notification of upcoming sales through their email addresses
    and names can coax them to supply you with the information you need.
    Where our competitor’s products provide a basic 70-664 practice test to prepare you for
    what may appear on the exam and prepare you for surprises, the Actual – Test 70-664 exam
    questions are complete, comprehensive and guarantees to prepare you for your Microsoft
    exam. 00 bonus plus a paid position while in the Gold Level, free back to you.

    Here is my site – Roi Unlimited

  7. Deborah comments:

    Hurrah, that’s what I was exploring for, what a data!

    existing here at this web site, thanks admin of this
    site.

    Feel free to visit my web-site; NYC SEO Experts (Deborah)

  8. Genevieve comments:

    I must thank you for the efforts you have put in writing
    this website. I really hope to check out the same high-grade
    content by you in the future as well. In truth, your creative writing abilities has motivated me to get my own blog
    now ;)

    my web blog – league of legends rp

  9. skatebarnin comments:

    Thanks Alchymyth, This worked perfectly for me.

  10. Monpelaud comments:

    I created a page template as you described above in my child theme of Twenty Eleven.
    It works fine for the position of the sidebar but styles modified in the style.css of my child theme are not taken into account like for the other pages.
    For example margins are not the same as the others pages.
    How can I resolve the issue ?

    Many thanks for your help.

    • alchymyth replies:

      this will depend on what edits you have made to your page styles. the coding does not do any formatting, i.e. any styles should actually not get effected by the code.
      please join the WordPress.org support forum, and ask the question there. you will likely need to post a link to your site, to a page with the problem, to illustrate what you have so far.

  11. Lisa comments:

    Could you please tell me WHERE in the functions.php file I need to insert this code?

    • alchymyth replies:

      you can add the code basically anywhere in functions.php of the child theme – just don’t break the php syntax; safest is possibly just before the closing php tags ?> at the bottom of functions.php

  12. Lorynne comments:

    Thanks for this tut. could you tell me how you could omit the sidebar altogether?So just as you’ve made the templates above with sidebars on the left or right. How could you include a template that had no sidebar at all?

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>