studionashvegas | design and social media

I’ve been learning lots of new WordPress tricks this past week.  Writing them down is two-fold win for me because 1) you guys get a look into how I do some of the stuff I do, and 2) I don’t forget how to do these tutorials later on when I need them again.  Yes, that can be a problem sometimes for me.  Don’t judge me.

Anyway, Scott Raynovich over at the Rayno Report wanted a fantastic way to showcase RSS feeds from around the web.  He wanted something that would allow more than four or five feeds without taking up the whole sidebar.

The result?  This really slick Accordion based feed sidebar:

Clicking on one of the titles…

Everything slides down to make room. 

It was actually really simple to create, and the best part: it’s widgetized!  That’s right, any feed that needs to be added in is simply added in as an RSS widget to a special sidebar.

So, onto the how-to!

Our process includes the following:

1. Set up and Install the Accordion Script (and Google-Load jQuery)
2. Set up a second sidebar (or third, or whatever number you have)
3. Add the appropriate code to the sidebar.php file
4. Add in a few widgets to test

Step 1: The Accordion Script

I know that there’s a jQuery-UI accordion script that’s floating around, but we’re going to be using a bit of a modified version that’s set up specifically for WordPress.  I like to pre-load via Google jQuery as well – takes some of the load off of the server and allows it to do its thing, letting Google fit the processing power for the actual framework.

Insert this code into your header:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>
<script type=”text/javascript”>
function initMenus() {
    $(‘ul#accordion li ul’).hide();
    $.each($(‘ul#accordion’), function(){
        $(‘#’ + this.id + ‘.expandfirst ul:first’).show();
    });
    $(‘ul#accordion li h2.widgettitle’).click(
        function() {
            var checkElement = $(this).next();
            var parent = this.parentNode.parentNode.id;

            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”>
                <?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

Head over to the Rayno Report to see it in action (and read his content – LOTS of great tech tips from the financial side).