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.

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

  1. Hermelinda comments:

    Inspiring quest there. What occurred after?
    Take care!

    my blog: 3D Printing

  2. Marietta comments:

    Good response in return of this diffiiculty with firm arguments and telling
    the whole thing about that.

    my homepage Seo services Cheap

  3. Drew comments:

    Asking questions are trujly pleasant thing if you
    are not understanding anything completely, but thus article
    provides good understandkng yet.

    Also visit myy homepage … Paving Stones Nottingham (Meghan)

  4. Manual comments:

    Great post. I was checking continuously this weblog and I’m
    impressed! Very helpful information particularly the remaining part :
    ) I dezl with such information much. I was seeking this certain information Guitar Lessons for Beginners Online a long time.
    Thanks and best of luck.

  5. Arturo comments:

    Another option to have a secure home is to change your
    lock rather than install a new. That is absolutely true, since you will be able to improve in each
    aspect. Are you looking for an effective way to protect your family and
    your home.

    my web page פורץ מנעולים 24 שעות בפתח תקווה

  6. daftar sbobet indonesia comments:

    Just wanna remark on few general things, The website design is perfect, the subject material is very great. “Earn but don’t burn.” by B. J. Gupta.

    daftarsbobet.blogsaya.com

  7. Fawn comments:

    Simply wwanna remark on few general things, The website design and style iss perfect, the
    subject matter is very good :D.

    Stop byy my blog best cheap seo service

  8. Ouida comments:

    At ATG , yow will discover pendant lighting ikea uk (classymend.flavors.me) lighting applicable for
    most hanging heights, so your whole residing spaces can be fully lit.

  9. Lan comments:

    It’s awesome in support of me flat to let london have a
    web page, which is beneficial for my experience. thanks admin

  10. Loretta comments:

    Samsung Gear Top Rate VR Headsets (Christy) has been used
    in a lot of business settings, such car showrooms, but with Samsung
    providing a range of content from Oculus, it is a simple choice for those with a Samsung handset.

  11. Michale comments:

    Mini-Pendant Lighting: Often used to brighten small rooms or
    particular areas in larger ones, mini-pendant lighting symbol (Felipa) lights are stand-alone lights, lower
    than 12” large, that narrowly focus consideration on particular options or
    areas.

  12. Jake comments:

    While some pendant lighting home depot lamps give excellent normal
    lighting for a complete room, some present extra directed gentle, which is good for use over work surfaces or the kitchen table.

  13. Eloy comments:

    Hi! I simply would like too ofver yoou a big thumbs up artificial wreaths for graves thee great information you have right here on ths post.
    I will be returning to your website for more soon.

  14. Tanesha comments:

    I as well think thus, perfectly inditd post!

    my web site Emergency Dental Treatment London

  15. Domingo comments:

    As a Green Keeper on a golf course, and landscaper with experience, I’m asked, continually, for help with people’s gardens.
    Do you want to eat outside in your outdoor kitchens
    Arizona. Crushed and made into soft, tumbled
    stone, glass becomes a practical and visually appealing second-hand product.

    Stop by my blog; backyard landscaping ideas (http://toboganium.com)

  16. skatebarnin comments:

    Thanks Alchymyth, This worked perfectly for me.

  17. 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.

  18. 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

  19. 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=""> <s> <strike> <strong>

*