Hacking jQuery Slider into WordPress Theme

I have just finished converting most (all?) of my posts from various blogs around the intertubes into WordPress. My previous blog on this domain was running Oxite. I created a theme called ‘Titus’ (yeah, I know) for Oxite that included a little jQuery ‘Slider’ plugin that I wrote. The control shows my last ‘n’ number of twitter posts, one at a time in a rotating fashion. I named it slider because I originally intended for the content to ‘slide’ up from the bottom continuously. Instead, I decided to fade them in/out. I was too lazy to rename it after I decided on my desired effect. After moving to wordpress, I was slightly upset that I was losing my hard work. However, this was a jQuery plugin so I didn’t see why this couldn’t just plug into my WordPress theme. I’m NOT a PHP developer, nor do I pretend to know how to do anything in WordPress. That said, I forged forward in my attempt to get this plugin working. You should see this plugin working right now on this site (unless you are reading this through RSS).

First let’s define the content of my plugin. I have a Javascript file containing my plugin, a CSS file containing the styling I’m using on the site, a little HTML markup to add my ‘placeholder’ for twitter feed, and of course the dependency on jQuery.

Installing jQuery into your Theme

First let’s tackle the jQuery item. A current version of the WordPress distribution includes jQuery. The trick is to include jQuery in your site. After a little investigation I found that jQuery was already ‘registered’ in WordPress code, but does not, by default, render to the browser. Somewhere in /wp-includes/script-loader.php you’ll find:

$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2');

This line registers the script we want in a dictionary with the key ‘jquery’. After digging further, I found a funcation called ‘wp_enqueue_script’ in /wp-includes/functions.wp-scripts.php.

/**
 * Enqueues script.
 *
 * Registers the script if src provided (does NOT overwrite) and enqueues.
 *
 * @since r16
 * @see WP_Script::add(), WP_Script::enqueue()
*/
function wp_enqueue_script( $handle, $src = false,
                            $deps = array(),
                            $ver = false,
                            $in_footer = false ) {
   global $wp_scripts;
   if ( !is_a($wp_scripts, 'WP_Scripts') )
      $wp_scripts = new WP_Scripts();
   if ( $src ) {
      $_handle = explode('?', $handle);
      $wp_scripts->add( $_handle[0], $src, $deps, $ver );
      if ( $in_footer )
         $wp_scripts->add_data( $_handle[0], 'group', 1 );
   }
   $wp_scripts->enqueue( $handle );
}

I put two-and-two together and with a little trial and error, I added the following line to /wp-content/themes/inove/header.php right before the call to wp_head():

<?php wp_enqueue_script('jquery'); ?>

This method gets the script location from the dictionary and renders a script tag with the location details.

Installing the slider jQuery Plugin

If the core did not register our script in the dictionary, we can provide the location details ourself with a second parameter. That is precisely what I needed to do to get the slider.js file added to the template. I added the following line just after the previous line I added in header.php.

<?php wp_enqueue_script('slider',
                      (get_bloginfo('template_url') . '/js/slider.js') ); ?>

The contents of this file are:

function($) {
   $.fn.twitterClient = $.fn.twitterClient = function(params) {
      var t = $.extend({}, $.fn.twitterClient.defaults, params);
      $(this).append('<ul id="twitter_update_list"><li></li></ul>');
      $.getScript("http://twitter.com/javascripts/blogger.js");
      $.getScript("http://twitter.com/statuses/user_timeline/"
                   + t.userName
                   + ".json?callback=twitterCallback2&count="
                   + t.tweetCount,
                   function() {
                      var list = $("ul#twitter_update_list");
                      stopTick(list);
                      list.items = $("li", list);
                      list.items.not(":eq(0)").hide().end();
                      list.currentitem = 0;
                      startTick(list);
                  }
      );
      startTick = function(list) {
         list.tick = setInterval(
            function() { tickFunction(list) },
            (t.delaySeconds * 1000)
         )};
      stopTick = function(list) {
         clearInterval(list.tick);
         };
      tickFunction = function(list) {
         if (list.pause) return;
         list.pause = true;
         $(list.items[list.currentitem]).fadeOut("slow",
            function() {
               $(this).hide();
               list.currentitem = ++list.currentitem % (list.items.size());
               $(list.items[list.currentitem]).fadeIn( "slow",
                  function() {
                     list.pause = false;
                  });
        });
     };
     this.each( function() {
                 if (this.nodeName.toLowerCase() != "ul") return;
                }).addClass(t.cssClass)
             return $("ul#twitter_update_list");
     };
     $.fn.twitterClient.defaults = {
         userName: null,
         tweetCount: 10,
         delaySeconds: 5,
         cssClass: "twitterClient"
     };
})(jQuery);

Next, I needed to add my styles for the twitter stream into my template. A method intuitively similar to that for scripts was found called ‘wp_enqueue_style’ that allowed me to register my CSS for rendering:

<?php wp_enqueue_style('slider',
                     (get_bloginfo('template_url') . '/js/slider.css') ); ?>

The contents of this file were:

/*ID:   slider  Elements: slider UL, slider LI, slider LI A */
#slider {
      position: relative; top: 5px;  width: 470px;  color: #bbbbbb;
}
#slider ul, #slider li{
   margin:0;  padding:0;  list-style:none;
}
#slider li {
   width:470px;  height:70px;  overflow:hidden;
}
#slider li a {
   text-decoration: none;
}

I saved the header file and closed it.

Add the jQuery plug-in Placeholder

All of our infrastructure is in place. Now I need to add a placeholder, and tell jQuery to call my plugin against the placeholder. Luckily, this style already has the ability to add content to the header region of the template. I simply went into WordPress addmen, and went to “Current Theme Options” under ‘Appearance’ and added the following to the “Banner” section:

<!-- Slider -->
 <div id="slider"><div id="twitterClient"></div></div>
 <script type="text/javascript">
  jQuery(document).ready(function($) {
    $("#twitterClient").twitterClient({
                        userName: "tobint",
                        tweetCount: 10,
                        delaySeconds: 5
                        });
    });
 </script>
<!-- /Slider -->

I also checked the boxes above to display this content for registered users, commenters, and visitors. I saved the file header options and viewed my site. Much to my glee, everything worked just great. My next steps are to turn this into a widget so others can just add this to any registered sidebar for a given theme.

Let me know if you have any questions.

Posted in: technical / Tagged: jquery, slider, theme, wordpress

Review: Bose Wave music system with SoundLink

My parents sent me a Bose® Wave® music system with SoundLink for Christmas. It arrived a bit early so I took it into my office and set it up. I listen to music while writing software into the early hours of the morning. This isn’t something I would have bought for myself, but it was a well-appreciated gift as I’m listening through some small Altec Lansing speakers currently.

I took a couple of notes about the product below:

Aesthetics – The system looks like an oversided alarm clock. If I were frozen in the 80’s to be thawed out today, I would have reason to believe that nothing had changed as far as alarm clocks go. That said, this is more than just an alarm clock so this is slightly forgiven. I was surprised to see that the SoundLink device was an external device. It seems to me that a SoundLink receiver could easily be internalized into the main radio appliance. While the Wave music system is more than an alarm clock, you wouldn’t know that much by the clock interface on the front. The big LED numbers with an AM/PM indicator and accompanying LED indicator of the source seem out of touch with the realitiy of a device this costly in this modern era. Compare the aesthetics of this device vs the elegance of other devices costing the same. I think you’ll agree that ‘looks’ were likely the last thing on the Bose technicians’ minds.
Setup – This was likely one of the easiest devices I’ve set up in ages. I expected there to be, at the minimum, some software to install and some cumbersome UI to work through to get sound pumping from my computer to the appliance. This wasn’t the case. I literally plugged the power and the SoundLink device into the appliance, plugged the USB transmitter into my computer and I was off to the races! That said, I was confused why the SoundLink device had a DC power input, but no DC power cord. Perhaps there is something I’m missing in why the input is needed but it wasn’t a big deal since the system works without one.
Use – The appliance itself has no buttons on it which bothers me a bit. Perhaps Bose was trying to avoid the complete appearance that this was just an alarm-clock radio. That said, the concern is that if I lose my remote control, I’m screwed till I find a replacement. Since this device is sitting on my side desk (literally right beside me) the effect of using my remote control to use the device seems absurd. This wouldn’t be so bad if Bose had thought to make the remote control dockable to the system and allow you to use the remote as a front or top panel control when docked as such. Setting the time and alarms on the system is also very archaic. This uses that same tired ‘rewind/fast forward’ type alarm setting that your clock radio does — again reinforcing that this is just an expensive version of the same. Apart from that, I was happy with how easily my music just seemlessly streams from my computer to the appliance. I don’t need to configure my software. I just run my normal apps (Zune Software, iTunes, etc) and it just works!
Sound Quality – When I first plugged this in, I was quite happy with the sound. However, shortly into my first song, I started hearing frequent cracking and popping. I didn’t have the device cranked. I’m at work so I couldn’t possibly put it above 50% output on my computer with 30-50 on the device itself without the music starting to waft out of my office and into the hallways. That said, the cracking and popping was actually louder than the music which makes the device output more annoying than soothing. I tried listening to a variety of music from classical to heavy metal. I tried adjusting the volumn. I even tried cranking it a bit higher at other times of the night when no one else is here. No matter the volumn levels on the computer or the radio, the crackling and popping persists making this device practically useless for my purposes. Looking at the website, this appears to be a regularly enough occuring event that they included it in the FAQ. Their solution was to ‘reset’ the device by recycling the power. I tried this and the popping persisted. Lest you think this is was just a bad unit, start searching the internet for other unhappy users and you won’t have to look far. On top of the cracking and popping there appears to be an occasional ‘skip’ in sound. I haven’t yet determined if this is caused by the SoundLink transmission or the radio itself.
Summary – The Bose Wave radio is, in my opinion overpriced for what it provides. The aesthetics are behind the times. Their is no ‘wow’ feature to the device and that unfortunately includes the sound which is the primary purpose of the system. The remote-only controll of the device is scary. There is a lot of wasted potential here.

My recommendation to you :

Buy a regular clock radio. At least if it crackles and pops, you won’t be out so much money.

My recommendations for Bose:

Integrate the SoundLink receiver into the main appliance or make it work over Bluetooth or WiFi. No reason to have a proprietary extra device just for transmission — particularly since it doesn’t appear to be doing your sound quality any good.
Make the remote control dockable/lockable into the top of the system so it can be used as a front/top panel input on the device itself .
Bring the front-instrumentation of the device into the modern era with some music visualization options and a less static LCD-centric display.
Fix the primary purpose of the system. There is absolutely no reason why I should spend several hundred dollars to hear this when there are many other lower-cost music-listening options at my disposal.
Allow me to set alarms a bit more reasonably than scrolling through a 60-minute-times-24-hour-rolling interface. Perhaps put Bluetooth (again) in the device and let me set it through my phone or computer. Or just give me an easy hour-then-minute-then-am/pm interface.

Posted in: product reviews / Tagged: bose, radio, review, wave

Experiencing Orchard