Foursquare vs. Gowalla… annnnnd fight!

            if($(‘#’ + parent).hasClass(‘noaccordion’)) {
                $(this).next().slideToggle(‘normal’);
                return false;
            }
            if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
                if($(‘#’ + parent).hasClass(‘collapsible’)) {
                    $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
                }
                return false;
            }
            if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
                $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
                checkElement.slideDown(‘normal’);
                return false;
            }
        }
    );
}
$(document).ready(function() {initMenus();});
</script>

The first script tag loads jQuery, the second the accordion script.  Notice how we’re targeting ul#accordion as the feed sidebar, and h2.widgettitle as the trigger.

Step 2: Adding a Second Sidebar into the Functions

Head into the theme editor and navigate to your theme functions file (functions.php).  We’re going to 1) make sure there’s widgetized sidebar code inside and 2) make sure that it calls for more than one sidebar.

If you have:

<?php
if ( function_exists(‘register_sidebars) )
    register_sidebar(array(
        ‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
        ‘after_widget’ => ‘</li>’,
        ‘before_title’ => ‘<h2 class=”widgettitle”>’,
        ‘after_title’ => ‘</h2>’,
    ));

?>

or something similar, you’re already widgetized.  Change that code to what comes next to get it multiple-sidebar ready.  If you aren’t widgetized, add in this bit of code at your own risk:

<?php
if ( function_exists(‘register_sidebars’) )
    register_sidebars(2,array(
        ‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
        ‘after_widget’ => ‘</li>’,
        ‘before_title’ => ‘<h2 class=”widgettitle”>’,
        ‘after_title’ => ‘</h2>’,
    ));

?>

This sets up two sidebars.  The second sidebar will be where our feeds go.

Step 3: Adding a Second Sidebar

Save your file and switch to sidebar.php.  If you’re widgetized you should see something like this:

  <ul id=”sidebar”>
            <?php     /* Widgetized sidebar, if you have the plugin installed. */
                    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
            <?php endif; ?>

   <!—OTHER SIDEBAR STUFF—>

   </ul>

Somewhere in that file (either before the if statement, or after), you want to add in this:

<li class=”feedreader”>
  <h2 class=”widgettitle”>RSS Feeds</h2>
  <ul id=”accordion” class=”collapsible”>
&
nbsp;               <?php     /* Widgetized sidebar, if you have the plugin installed. */
                    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(2) ) : ?>
            <?php endif; ?>
</ul></li>

This adds in a widget that will serve as the container for the accordion file.  Then, we have another unordered list that will contain the feed widgets we drop in.

You should have something that looks like this:

  <ul id=”sidebar”>
            <?php     /* Widgetized sidebar, if you have the plugin installed. */
                    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
            <?php endif; ?>

<li class=”feedreader”>
  <h2 class=”widgettitle”>RSS Feeds</h2>
  <ul id=”accordion” class=”collapsible”>
                <?php     /* Widgetized sidebar, if you have the plugin installed. */
                    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(2) ) : ?>
            <?php endif; ?>
</ul></li>

   <!—OTHER SIDEBAR STUFF—>

   </ul>

That will insert your new sidebar. 

Step 4: Adding Widgets

After that, the last thing to do is to add in some feeds to test out in the Widgets panel of the Appearance tab.  Add in two or three to get a test, then view the page.

Any styles can be applied to make things look better, and here’s what you can expect to be able to change:

ul#accordion – controls the entire accordion box

ul#accordion h2.widgettitle – controls what the title feed of the individual feeds looks like

ul#accordion li li – individual feed items

ul#accordion li a – individual feed link properties