• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Tutorial, WordPress

Foursquare vs. Gowalla… annnnnd fight!

CMDR Mitchcraft

Reading time: 5 minutes

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

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

Accordion, jQuery, Tutorial, WordPress
  • WordPress Heartbeat API: An Introduction

    WordPress Heartbeat API: An Introduction

    Reading time: 2 minutes

    If I were to mention to a casual WordPress user something about the WordPress Heartbeat API, most would have never even heard of it, much less know that it’s been in WordPress since version 3.6(!) with very little fanfare.  But, as it turns out, the Heartbeat API has gained traction in the developer community, as…

    WordPress
  • 50 Days to a Better WordPress Blog–Day 1: Font Readability

    50 Days to a Better WordPress Blog–Day 1: Font Readability

    Reading time: 4 minutes

    When it comes to typography online, there are a few simple ideas you can remember to help your users read your articles time and time again and always be begging for more, without them having to get new glasses every time.

    WordPress