Skip to main content

Ivan Teoh

Something personal yet public

Split Sidebar into Two Divisions

I decided to split sidebar into two divisions. So that I can use the primary sidebar as widgets and secondary sidebar as customize lists. Here is the original sidebar.php.

94-sidebar.php (Source)

<!-- begin sidebar -->
<div id="sidebar">
<ul>
    <!-- sidebar lists -->
</ul>
</div><!-- #sidebar -->
<!-- end sidebar --></pre>
The new <code>sidebar.php</code> will look like this. We remove the sidebar id
and replace with primary-side and secondary-side ids. Both elements will have
sidebar class.
<pre lang="phtml" line="7"><!-- begin sidebar -->
<div id="primary-side" class="sidebar">
<ul>
    <!-- primary lists -->
</ul>
</div><!-- #primary-side .sidebar -->
<div id="secondary-side" class="sidebar">
<ul>
    <!-- secondary lists -->
</ul>
</div><!-- #secondary-side .sidebar -->
<!-- end sidebar -->

In order to activate the widget sidebar, we need to register both primary and secondary sidebar in theme functions file, functions.php, as below.

94-functions.php (Source)

if ( function_exists('register_sidebar') )
{
    // Primary Sidebar
    register_sidebar(array(
        'name' => 'Primary Sidebar',
        'id' => 'primary-sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '',
        'after_title' => '',
    ));

    // Secondary Sidebar
    register_sidebar(array(
        'name' => 'Secondary Sidebar',
        'id' => 'secondary-sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '',
        'after_title' => '',
    ));
}

Lastly, we need to change the WordPress theme layout, layout.css. Both sidebar elements are right floated. Secondary-side element is cleared to right. So that it can drop below right floated primary-side element.

94-layout.css (Source)

div.sidebar {
    float: right;
    width: 210px;
    margin-left: -250px;
    padding: 20px;
}

div#secondary-side {
    clear: right;
}

Comments

Comments powered by Disqus