DISQUS

Berchman.com: Thesis Tutorial: Sidebars However You Like Them

  • michaelmindes · 4 months ago
    An extremely helpful instruction. It took me awhile, because I was getting hung up on a call error that basically said I was calling a function that didn't exist.

    What I needed to do was use:

    <?php dynamic_sidebar(sidebar_3); ?>

    Instead of:

    <?php sidebar_3(); ?>

    That fixed everything for me...
  • Don Campbell · 7 months ago
    Another great article.
    This one will come in handy for a project I'm working on - thanks Bert!
  • Nicky · 7 months ago
    Thanks for the tutorial. Somehow, I'm not able to get it work.

    I created the third sidebar, I can see it in admin menu of Wordpress.

    I changed two things in the code you provided above -

    1) I used is_page('About') since I want to try it out on About page.

    2) I removed the call since I've only created third sidebar.

    The default scheme is s1-content-s2 and I want to have content-s3 on About page.

    Any idea what went wrong ? Any help would be great :)
  • berchman · 7 months ago
    Hi Nicky,
    If I understand your comment #2 correctly you are not calling the sidebar?
    How are you calling sidebar 3?
  • Nicky · 7 months ago
    Hmm, I left in your code above as it is. Isn't it for calling sidebar 3?
  • Nicky · 7 months ago
    Oops, missed the statement in above comment ->>
  • Nicky · 7 months ago
    Sorry for back to back comments. It seems wordpress isn't displaying the statement. I'm using

    (without hyphens)
  • Jenn · 7 months ago
    What is the code to insert to get rid of the default sidebars entirely? In other words, there is a template for a page without sidebars, but if I want to create a custom page without sidebars, how do I tell Thesis not to insert the sidebars that has been set up as a default using the Options page? Thanks in advance.
  • berchman · 7 months ago
    Hi Jenn,
    You would follow the above code for the custom page template but do not call the sidebars at all. Depending on how you want the page width handed, etc. you would control that in you custom.css file. Hope this helps.
  • Rick · 7 months ago
    Hey man, thanks for the great info. Honestly though, all I'm looking to do is to hide the sidebars completely on a page, in order to create a type of landing page. Is there not some simple way to do this?
  • Damon · 7 months ago
    @Rick

    On the right side of the create/edit page page, there is a box that lets you select a template. By default there is a no-sidebars option.
  • Rick · 7 months ago
    @Damon - Thanks so much! You're the man. I knew there was some simple solution. You see, these are the types of options in Thesis that really make me love it. I can do some of the php hooks and stuff, but these little options save me sooooo much time. Now, I need to figure out how to hide the nav bar on this page too and I'll be set to have a landing page within my blogsite as well.
  • George Serradinho · 6 months ago
    Wow and thanks for the tips and tricks. I like the way you explained all the details in full. I think I will be using this in my next project which will be starting later this year, you have given me an idea.

    With WP 2.8, when released, will allow you to use many instances of widgets. That is what I understood.
  • rumblepup · 6 months ago
    This is what I've been looking for. It's much easier and a more elegant solution to use included widgets and additional sidebars than hand jamming each and every custom page. Thank you seƱor!
  • Alan Mairson · 6 months ago
    Thanks for a great post, but I have a rather simple sidebar question: I now have one sidebar, but need two. I want Sidebar #1 (my existing) to appear on the right side - and Sidebar #2 (the new one) to appear on the left. The built-in Thesis options don't let me do this. Can you tell me how I can?
    Thanks in advance for whatever help you can provide....
  • berchman · 6 months ago
    Hi Alan,
    There are 2 ways to go about this. Simplest would be to copy down whatever widgets/customization you have in sidebar #1 and mirror that in sidebar #2. Then create a new sidebar #1 with whatever widgets you would like. Then in Thesis layout you could order your layout:

    [sidebar-1 (new sidebar)] [ content-area ] [sidebar-2 (current sidebar)]

    This should be the simplest way to do what you want. However....

    If you want multiple layout options I would follow the directions in my other tutorial regarding multiple custom page templates. You are going to want to create a layout where you place your current sidebar to appear on the right and the new one on the left. You hand code it so you have have the order come out however you like.

    Let me know if you have any questions.
    Hope this helps.
  • Alan Mairson · 6 months ago
    I went ahead and did it the easy way -- just copying the widgets. Thanks for replying & for a great site.
  • Anton · 6 months ago
    Hi Berchman,

    I am new to Thesis Theme. I've just used it one week ago. One problem that bothers me is that my sidebar widgets did not display on Internet Explorer browser.

    I don't know yet what has been caused. Please let me know if you can find sometimes to check it.

    Your reply is highly appreciated.
  • berchman · 6 months ago
    Hi Anton,
    When I just visited your website I see the sidebars. However I am using Google Chrome. :-)
    Have you fixed it?
  • Nick · 6 months ago
    Hi Berchman,

    Is there a way to remove a sidebar from a post? I'm using a 2 sidebar setup, and would like to be able to remove one or both from posts in certain categories.

    Thanks!
  • berchman · 6 months ago
    I would follow my other tutorial to create a custom page template. In that tutorial you can see how you could create a page layout that does not include any sidebars.
    Let me know if you have any questions.
    Hope this helps.
  • Nick · 6 months ago
    Thanks, I've been getting good use out of that tutorial. Making a custom template for a post is what's hanging me up.
  • Paul B · 6 months ago
    ok, so using to show an example didn't work :)

    What I was trying to point out is that if you only put the php sidebar into a div with ID sidebars, Thesis will not style it as a normal side bar.

    If it is embedded the same way as a built-in sidebar, the built-in CSS will catch hold of it.

    It would need to be embedded in several layers for this to happen:
    <div id "sidebars"
    <div class "sidebar"
    <ul "sidebar_list"
    <php sidebar_whatever();
    </ ul
    </ div
    </ div
  • Gregory Banse · 6 months ago
    Smashing tutorial - thank you!
  • Kaz Clark · 6 months ago
    I have successfully registered sidebars and they are showing up in my Appearance. I've got lost in the "call" code above though. If I want to call sidebar 1 (standard) and sidebar 3 (custom) on particular page how do I do that? I don't have custom page templates as just use wordpress pages; so trying to simplify it and have got here ...... I think my referencing re custom template etc wrong as jst wanting to change sidebars i.e. on a particular page to call two particular sidebars. The other bits of code above have not sunk in as to why I personally would need them "Not Found" etc; maybe I am missing huge point but I don't have custom pages, just would like to customise my sidebars! Feel close, but not on the nose! Thanks!

    function custom_sidebar_01() {
    if (is_page('places')) { ?>






    <?php } }
    remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
    add_action('thesis_hook_custom_template', 'custom_sidebar_01');
  • Shane Arthur · 6 months ago
    Very nice.

    That three column example page you created is exactly what I need. I need a homepage that has three columns with no "bloglike" functionality. In other words, I want the three columns to act like a static website would if just coded with html and css. I need to continuously update the three columns with javascript code. Is this possible with your example and if so, how would I add the javascript to each column on a continual basis.

    thank you for your time.
    Shane
  • kazclark · 6 months ago
    Hi - I wonder if any of you kindly sidebar gurus may have an idea re an issue I am having. I managed to get the template working (a huge win for me!) but my widgets are loading up oddly. First my sidebars stacked on one side but then I css's them float left, float right; and they went in my format sb/content/sb. But widgets loading middle down on my sb3 and top up on my sb4! I do wonder if I did my template wrong for the sb/content/sb format; or if the css call not supposed to be used for separating the sbs like I have. Have popped this on a slow burn but am really out of ideas as not knowing what I don't know! Thanks very much.
  • berchman · 6 months ago
    Hi Kaz,
    Do you have a URL where I can look at your example? You can email me if you like.
    Hope this helps.
  • Mandy · 6 months ago
    I was wondering how I can reduce the space between my widgets in the sidebar. I don't know much about css but I think it's got something to do with padding? Any help appreciated...
  • berchman · 5 months ago
    Mandy, you will want to edit the css that governs widgets. Widgets are put into an unordered list in the sidebar. Each widget is in a line item and you will want to adjust the margin and padding on that element.
  • Yvonne, My Halal Kitchen · 6 months ago
    Hello,

    any suggestions about how to fix this nasty problem: myhalalkitchen.com

    If you scroll down, you'll see all my sidebar widgets (2 columns worth) where they don't belong. Can you offer any suggestions on how to fix this?

    thanks!
  • berchman · 5 months ago
    Yvonne, Looks like you got it sorted out. I was going to suggest looking at the width of your content area in the css.
  • Kaz Clark · 5 months ago
    Hi - thought following email it may be helpful to show you where am with code; and leave a page up for you to see. My standard format is sb, content, sb and in this example I tested calling sb 3&4 to the custom template Chateaux; so close and yet feel so far!

    In custom functions:

    function custom_sidebar_01() {
    if (is_page('chateaux')) { ?>



    <?php the_title('', ''); ?>








    Not Found
    Sorry, but you are looking for something that isn't here.










    <?php } }
    remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
    add_action('thesis_hook_custom_template', 'custom_sidebar_01');


    In custom css:

    div#sidebar_3.sidebar, div#sidebar_4.sidebar {
    width: 195px;
    }

    div#sidebar_3.sidebar {
    float: left;
    }

    div#sidebar_4.sidebar {
    float: right;
    }

    Have a feeling the custom css wrong but can't seem to get it to play - don't know right references for sb order i.e content, sb, sb or sb, sb, content or, as in my case sb, content, sb.

    You can see the funky results here:

    http://www.mamanmedoc.com/chateaux/

    Would be so great to crack this as been at this on and off for 2 months and not nailing it!

    Thanks
  • robyn · 5 months ago
    Okay, so if I read correctly...

    I have 2 SB on my front page. I want 1 on all other pages. In order to accomplish this, I must create a page template without sidebars and then add on in using custom_functions.php. Correct?
  • berchman · 5 months ago
    Hi Robyn,
    Yes that is the way to go.
  • robyn · 5 months ago
    Thank you!
  • escalatoraccident · 5 months ago
    Hey Berchman,

    First off, thanks so much for the tutorial. I appreciate you taking the time to help.

    I'm running into some problems and I posted my question and all my code on the forum. I'd dig it if you could check it out.

    http://diythemes.com/forums/customization/9441-...

    Thanks in advance for any help.
  • ilya · 4 months ago
    Hi,

    I followed this tutorial to the T, but when php reaches the line: <?php sidebar_3(); ?>

    it quits.

    I can see thesis or wordpress re-catches itself becuase I don't get a blank page, but, there is no trace of my extra sidebar...

    where is the function sidebar_3() defined? Is registering it sufficient? I have the feeling the function sidebar_3 should also be defined no? Am I missing something?

    thesis 1.5.1 wordpress 2.8.3
  • berchman · 4 months ago
    hi ilya,
    If you look above you define the sidebar in custom_functions.php ( I have spaced out some tags so they will show):

    / * CUSTOM SIDEBARS * /

    register_sidebars(1,
    array(
    'name' => 'Sidebar 3',
    'before_widget' => '< li class="widget %2$s" id="%1$s" >',
    'after_widget' => '< / li >',
    'before_title' => '< h3 >',
    'after_title' => '< / h3 >'
    )
    );

    Once you have that defined and have setup your function as I assume you have done you need to make sure that the page you are wanting the custom sidebar on has the "custom template" option selected in the edit page for that specific page. Otherwise Thesis will not know that you want to run a custom template on that page and swap out the sidebars.
    Let me know if you have any questions.
    Hope this helps.
  • ilya · 4 months ago
    Hi Berchman,

    Thanks for the quick reply. I really apreciate it.

    It seems I was not really on track: was testing with a custom sidebar that contains a subnavigation element. I was checking it on a page that did not have subpages... Doh.

    I get my example to work with the call
    dynamic_sidebar('Sidebar 3');
    or
    dynamic_sidebar(3);

    but not with:

    sidebar_3();
    This outputs something, but does not "load" the sidebar with the defined widgets..

    I have declared the third sidebar as you have done above.

    Could it be a dependance on a php version?
  • ilya · 4 months ago
    All right, i succeeded what I wanted to do. And because this tutorial helped me achieve it I will share what I have done with you.

    I wanted a thesis two column layout, with the Sidebar on the right.
    On my "pages" I wanted a three column layout, with subnavigation on a sidebar to the left of the content column.

    How did I achieve that? :

    I started out playing around with a three column layout. Jotting down the values from layout.css

    I then reverted the main layout to the two column layout, with the values that I needed.

    Then I created the custom template, as in this tutorial.

    Except I did not create a "third" sidebar, simply used as much of the thesis framework in place.

    So this is my custom page template function:

    function custom_page_with_navigation() {
    if (is_page()) {
    echo ' <div id="column_wrap">';
    thesis_content_column();
    thesis_get_sidebar(2);
    echo ' </div>';

    echo ' <div id="sidebars">';
    thesis_hook_before_sidebars();
    if (thesis_show_multimedia_box())
    thesis_multimedia_box();

    thesis_get_sidebar(1);

    thesis_hook_after_sidebars();
    echo ' </div>';
    } }

    I had to dig around a little in the thesis files. Basically I copied the functionality from
    thesis_wrap_columns() in lib/content_box.php
    thesis_sidebars in lib/sidebars.php
    thesis_build_sidebars in lib/sidebars.php

    Now all I had to do was to add the stylesheet information to get it to display properly:

    custom.css to the rescue

    first I had to mention there is a column_wrap div coming, with a certain width:
    .custom #column_wrap { width: 74.1em;}

    Then I had to mention that the content div needs to be smaller and float to the right. But only when it is inside a columnwrap, otherwise it would do it on every page...

    .custom #column_wrap #content { width: 55em; float: right; }

    Finally just mention that there is also a sidebar_2:

    .custom #sidebar_2 { width: 19em; border: 0; float: left; }

    And that is it..

    Of course this is not really usefull when you have all kinds of templates, but then one is probably better off with multiple template files, but then one has to duplicate more thesis framework functions. I would hope a future release has even more custom templating options...

    anyway, just thought I would share this. feel free to wrap this in a new tutorial if you feel this comment is too long :)
  • berchman · 4 months ago
    Great to hear that you succeeded.
  • askjayson · 4 months ago
    Hey Bercham, thanks so much for taking the time to write and share this tutorial with us. I am learning Thesis for a client and have a quick question. (I am still waiting for the login from the client to the Thesis support forums, otherwise I would post there as well).

    I simply want to display 3 column layout on the home page and keep the 2 column layout on all other pages. How can I call an addition default side bar? I can hide the sidebars with CSS, but dont want to write custom.css for all pages. Any quick simple ideas? Thanks so much in advance for your time.

    All the best,
    Jayson

    PS: I am a pretty savvy WP developer/designer, love to stay in touch.
  • ilya · 4 months ago
    I wanted to achieve something similar. I achieved as follows:
    - use thesis to calculate and render the 3 columns. Copy the CSS code.
    - use thesis to settle on the 2 column layout
    - use open-hook to add a wrapper around the content so CSS knows it is the homepage, and tweak the css for the homepage "exception".

    hope this helps...
  • berchman · 4 months ago
    Following up on Ilya I believe it depends on your layout.

    column, content, column
    or
    content, column, column, etc.

    This, I think will help you determine the best approach (i'm guessing
    that one line of css will do the trick depending on your layout).
    Let me know if you have any questions.
  • Mike · 4 months ago
    Hi Berchman,

    This tutorial seems great but i cant see sidebar 3 in my php code on my testscreen, so it doesnt show on that page?

    It's like:
    register_sidebars(1,
    array(
    'name' => 'Sidebar 3',
    'before_widget' => '<li class="widget %2$s" id="%1$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3>',
    'after_title' => '</h3>'
    )
    );

    doesn't work for me.

    This is the page where normal sidebar 3 must come
    The link is http://www.mikevsnet.be/?page_id=146

    Where did i go wrong?

    Thx

    Ps: do you also css for IE6(not for free ofcours)?
  • berchman · 4 months ago
    Hi Mike,
    I cannot see all the code you posted. Perhpaps it was stripped out in
    posting.
    Here is the code you need. I have put spaced in the tags so that the
    code stays in tact. Be sure to remove them:

    / * CUSTOM SIDEBARS * /

    register_sidebars(1,
    array(
    'name' => 'Sidebar 3',
    'before_widget' => '< li class="widget %2$s" id="%1$s" >',
    'after_widget' => '< / li >',
    'before_title' => '< h3 >',
    'after_title' => '< / h3 >'
    )
    );

    Hope this helps.
  • Mike · 4 months ago
    Hi Berchman,

    I don't know what spaced in the tags mean?
    What part do i have to remove?

    sorry for my english

    thx
  • berchman · 4 months ago
    Hi Mike,
    No problem.
    There are spaces between the < and the > of all the tags. This is so
    the website does not 'process' them and make them disappear.
  • Mike · 4 months ago
    Hi Berchman,

    It still don't work for me:

    here is my code

    /* CUSTOM SIDEBARS */

    register_sidebars(1,
    array(
    'name'=>'Sidebar 3',
    'before_widget'=>'<li class="widget %2$s" id="%1$s">',
    'after_widget'=>'</li>',
    'before_title'=>'<h3>',
    'after_title'=>'</h3>'
    )
    );
    /* TEST FOR SPECIFIC PAGE FOR SIDEBAR TUTORIAL */

    function custom_sidebar_01() {
    if (is_page('test')) { ?>
    <div id="content">
    <div class="post_box">
    <div class="headline_area">
    <?php the_title('<h1>', '</h1>'); ?>
    </div>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="format_text">
    <?php the_content( ); ?>
    </div>
    <?php endwhile; ?>
    <?php else : ?>
    <h2>Not Found</h2>

    Sorry, but you are looking for something that isn't here.


    <?php include (TEMPLATEPATH . "/searchform.php"); ?>
    <?php endif; ?>
    </div>
    </div>
    <div id="sidebars">
    <div id="show-only-3-and-4">
    <?php sidebar_3(); ?>
    <?php sidebar_4(); ?>
    </div>
    </div>
    <?php } }
    remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
    add_action('thesis_hook_custom_template', 'custom_sidebar_01');

    Maybe this helps to see my problem

    Thx mate

    Greetings from belgium
  • jennybuttler · 3 months ago
    Question....
    I know that this is possible to do with static pages, but is it possible to do this on category pages. I have some premade templates for wordpress, blogger, etc. that I sell, I am currently on blogspot transferring over to Wordpress and have deciced upon thesis. However, I am a complete nin-com-poop when it comes to this whole hook thing. I would like some sidebars to have certain widgets displayed on certain category pages??? possible, no?
  • berchman · 3 months ago
    Indeed. You could build a function that tests for certain categories, and if the result is positive render the custom layout you would like. Sounds like I need to do another tut. :-) Let me know if you have questions.
  • Susan · 2 months ago
    I'm having the same problem as Mike, above. Using the code in the same way, in custom_functions.php. It's reading the custom template, but the page code stops at <div id="show-only-3-and-4"> and I get a PHP fatal error: Call to undefined function sidebar_3() in /wp-content/themes/thesis_16b/custom/custom_functions.php on line 90. I've checked and rechecked my code against yours, looked at all the pages and tutorials you reference and just can't get it to work.
  • berchman · 2 months ago
    Hi Susan,
    I would check the names of each of your functions and calls to them.
    Typically there is something not matching properly when you see these
    errors.
    Hope this helps.
  • andimac · 1 month ago
    I have managed to get the function created like you have in your test page... and added the "register" code in custom_functions.php... but the widgets I add in the admin widgets manager don't show up. What have I done wrong? - Andi
  • BigSea · 1 month ago
    I'm having the same issue, Andi (and my name is also Andi -too funny). Everything is working but my sidebars are not showing.

    I know Wordpress so well and Thesis is like learning a new language!
  • Daniel Richard · 3 months ago
    I was looking at Copyblogger's site where he has the 2 sidebars shown throughout his blog, but on specific pages his sidebars were removed.

    Was that done using the same method as shown here?
  • File Search Engine · 2 months ago
    thanks ... i am a newbie to thesis theme ... this is helpful :)
  • berchman · 2 months ago
    You are welcome.
  • paynemike · 4 weeks ago
    Great post, Bert!

    Question for you: How can I have most of my website utilize a custom sidebar while the BLOG part of my website defaults to THESIS sidebar (i.e. multi-media box, widgets, etc)?

    My real estate site is http://www.sarasotahomesforsalenow.com

    I'd like the "MY BLOG" part of my site to be controlled by THESIS design options (if possible) or at least through custom_functions (if necessary).

    Thanks, Bert.
  • berchman · 3 weeks ago
    Hi Mike,
    You need to build some custom sidebars then build a custom page
    template that uses those custom sidebars. You can see how to do the
    custom page tutorial on my site here:

    http://www.berchman.com/thesis-tutorial-multipl...

    Hope this helps.
  • Damien Van Achter · 3 weeks ago
    Hi,

    I really would like to give acces to my blog (www.bloggingthenews.info ) to other authors than myself. But I don't have time and money to switch it to a Wordpress MU install.
    You show here that Thesis Theme allows to create multiple sidebars and assign sidebars to post/category/page .

    But, my point is to assign 2 custom sidebars/by Author (so if I have 20 authors on my blog, there will be 40 sidebars + the 2 general sidebars of the homepage)

    I'v installed the openhook plugin and, so far, it works pretty well

    Do you think it's possible ? Can you help me a bit (I'm a journalist, not a coder :-)
  • berchman · 3 weeks ago
    Hi Damien, with the right code syntax I think it is possible. In terms of helping fill out my contact form on the site with as much detail as possible. Hope this helps.
  • MaryAnnEpstein · 1 week ago
    Great tutorial but a little over my head. Or maybe I am just having a mental block about it.

    I need to make a page with two side bars totally different from the original side bars. I like choosing the no sidebar template, is there an easy place to get a template like that with page with sidebar 3 and 4.

    I know that once I do this the first time, I can use it in many ways.

    Help!!
  • MaryAnnEpstein · 1 week ago
    Do you have a video tutorial for this? or Do you know of one? I think I need to be talked through it, not have to read it.

    :)

    Mary Ann