Adding a 2nd Sidebar in a specific Wordpress theme

Question

I learned how to add additional sidebars now I need to figure out how to add an extra sidebar besides the one already displayed in the theme Librio ( wordpress.org/extend/themes/librio ).

I absolutely have no idea where to look. The code is pure chaos and not self explanatory.

My sidebar.php contains the following code:

<div id="idontknow">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
</div>

Now if I duplicate and add the same code but with 'sidebar2' all I get is the 2nd sidebar being displayed INSIDE the 1st sidebar.

<div id="idontknow">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
</div>

<div id="ireallydont">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>
<?php endif; ?>
</div>

I don't want that. I want 2 separate sidebars side by side. Can somebody help me out, pretty please?

I tried to expirement with CSS and id=leftsidebar and id=rightsidebar, but it simply doesnt work.

Just to clarify again: I have 2 sidebars! I've even got the correct code in functions.php

if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'sidebar1',
    'before_widget' => '<div class="block">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
));
register_sidebar(array('name'=>'sidebar2',
    'before_widget' => '<div class="block">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
));

The problem is, like mentioned, the 2nd newly created sidebar is shown inside the 1st sidebar. I want the theme modified so that I have 2 separate sidebars.

Answer 1

You have to register a second sidebar.

create a file functions.php (maybe this file already exists) in your theme folder en add the following code:

    <?php
        register_sidebar(array('name'=>'sidebar'));
        register_sidebar(array('name'=>'sidebar2'));
    ?>

Now if you go to your wordpress admin section, you should see that there are 2 sidebars available where you can add widgets to.

Answer 2

Have you tried changing the id of your second sidebar div to id="sidebar2"? It's very hard to tell without seeing the site/code but there may be something in the CSS which is causing the two sidebars to overlap. Either that, or the first isn't being closed properly.

Answer 3

Did you put your sidebar divs inside the librio's sidebar div?

In other words, does your sidebar.php look like this?

<div id="sidebar">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>

    <!-- default librio sidebar stuff goes here -->

    <?php endif; ?>

    <div id="sidebar2">
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>

        <!-- second sidebar stuff goes here -->

        <?php endif; ?>
    </div>
</div>

When I did that, the second sidebar appeared as part of the default librio sidebar. When I moved the <div id="sidebar2"> stuff outside <div id="sidebar">, the second sidebar content appeared at the bottom of the page. You'll need to modify the CSS to move it somewhere else.

Answer 4

This is more of a CSS issue than anything else. I've replicated your setup and done the following to get two columns working.

My sidebar.php is:

<div id="sidebar">
  <div id="idontknow">
  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
  <?php endif; ?>
  </div>
  <div id="ireallydont">
  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>
  <?php endif; ?>
  </div>
</div>

I've registered both sidebars in functions.php (as Dextro suggested) and confirm they both work and show one below the other.

Then I made the following width changes in style.css:

• at line 173, I changed #content's width to 570px
• at line 303, I changed #sidebar's width to 300px

Then I added a new CSS rule:

#sidebar #idontknow,
#sidebar #ireallydont {
    width: 150px;float: left;
}

Now I have two columns side. You may want to adjust the widths and you'll definitely want to fix the sidebar background image.