Wordpress Sidebar Turned Apple-Flashy Using jQuery UI

Apple have always been Gods in terms of the way they present themselves and their products. I just love the sidebar on the Apple Startpage, and wanted to use the Accordion plugin in jQuery UI to achieve this! As if that's not enough for me, I want to be able to show and hide it at my pleasure as well. I'm gonna show you how!

Preface

This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to. If you want to run a local server on your computer with a wordpress installation, there is a tutorial on that here for Windows, and here for OS X.

Files you'll need.

We need a total of 6 files for this tutorial:

functions.php - This will hold a small line of code registering our sidebar.
index.php - We most definately need this file. Any guesses why?
jQuery - Here's version 1.2.6 for you.
jQuery UI (accordion) - We only need the Accordion plugin and the UI core, not the whole UI library.
sidebar.js - Contains all the jQuery code for the sidebar.
style.css - Needed to activate the theme, and contains all CSS.
images folder - I'll give you a list of images to fill this up with a bit later on, in the CSS part. For now, though, we only need 1 image that is in the HTML - the RSS icon! Place it in the folder 'images' and let's get started!

Don't forget to activeate your Wordpress theme (which should be aptly named sidebarTheme) in Dashboard! Right. To the tutorial! We're going to start off with the HTML and Wordpress we'll need. This will include the strcutre we'll need, Then we'll fill it up with the Wordpress code that will display posts and register and show our sidebar. It'll still look icky after this, so we'll fix it up with some pretty CSS that'll make it somewhat resemble the apple startpage, and make the sidebar look apple-y too. We do this before the JS so those without JS still see the pretty lookin' thing. Then, finally, my favourite - the jQuery. We'll animate it open and closed, and use accordion() and it's parameters to generate the hover effect.

Step 1 - HTML

Quickly open up functions.php, and put this in:

<?php
	if(function_exists('register_sidebar')){
		register_sidebar(array('name' => 'appleQuery'));
	} 
?>

functions.php is automatically picked up by PHP/Wordpress and executes the functions. This function asks Wordpress to register a new sidebar in the Dashboard to add widgets to it. That's not all though... We need to put that into our theme! I'll explain that after the HTML/Wordpress bit next. The array just names the sidebar, so that in Dashboard we can select which sidebar to edit (not really a problem... More of a good habit incase of numerous sidebars).

Copy or type this into your index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

	<?php wp_head(); ?>
	
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery-accordion-1.5.2.min.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/sidebar.js"></script>
</head>
<body>
	<div id="wrapper">
		<h1><?php bloginfo('name'); ?></h1>
		<div id="sidebar">
			<ul>
				<?php if(function_exists('dynamic_sidebar') && dynamic_sidebar()) : ?>
				<?php endif; ?>
			</ul>
		</div><!-- end div#sidebar -->
		<div id="content">
			<div id="topStories">
				<span id="sidebarToggleButton" class="sidebarOpen"></span>
				<strong>Top Stories</strong>
				<?php echo date('F j, Y H:i A e'); ?>
				<a href="<?php bloginfo('rss2_url'); ?>" title="RSS 2 feed"><img src="<?php bloginfo('template_directory'); ?>/images/rssIcon.gif" alt="" /></a>
			</div>
			<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
				<div class="post">
					<span class="postDate"><?php the_date('F j, Y'); ?></span>
					<h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
					<div class="entry">
						<?php the_content('(read more...)'); ?>
					</div>
				</div>
			<?php endwhile; ?>
			<?php endif; ?>
		</div><!-- end div#content -->
	</div>
</body>
</html>

Explanation

Ok... I know that's a lot. A lot a lot. But this tutorial doesn't specifically focus on Wordpress and HTML, but I'll pick out the interestings that you should probably understand.

The whole sidebar segment - This is the main part of what's important. What we're asking wordpress, is that if, in the entire local wordpress engine, the function dynamic_sidebar is present (which it is in functions.php), execute the function. The appleQuery specifies the name of the sidebar that we assigned it (in functions.php, remember?).
<?php echo date('F j, Y H:i A e'); ?> - This is some raw PHP to echo the current date and time of the user. It's only in here because it's on Apple! It's in the format of: (Month DD, YYYY 00:00 AM GMT).
<?php bloginfo('rss2_url'); ?> - Look in the head element... Do you see the same thing? Once again, it's on Apple's website. It's just the XML entries feed for the blog.
<span id="sidebarToggleButton" class="sidebarOpen"></span> - Nothing amazing... This is just the button that'll toggle the visibility of the sidebar. I've made it a span so it's not clickable for JSless browsers, but using the .click() function of jQuery people WITH JS can!

So with the HTML and Wordpress all up, I'd suggest going into your WP Admin, and adding a few widgets to your blog. For some reason, Search doesn't have a title, and the tag cloud widget doesn't disappear - Go figure! I used the following in mine:

Categories
Archives
Links
Pages
Meta

And it should look something like this:

Kinda ugly huh? Never fear, CSS is here!

Step 2 - CSS

Yes, fantastic CSS is here to save the day! We want to create something somewhat remenisce of this (photoshop mockup):

Like my little blur effect? I thought it fitted... Anyway. The blur will be the JS, but for now we want everything to be expanded, and shown, so that for the 1% of smart cookies that don't have JS enabled, the sidebar will still be visible and still look pretty. Very, very big, but nevertheless, there. It's a big chunk, so I've put it in another file, as to not fill this page up - Don't kill me! Copy or type this CSS into your style.css. You'll need all of these images:

Some things to note

I've done my best to stick to ems in terms of font-sizing, so the 75% just downsizes all text to 12px which becomes 1em. That's for another tutorial though!
In the h1 code I've used 'text-shadow'. This is CSS3. It just contributes to the applesque look!
#content - Has a background colour of white. Why you ask? The background will always be white anyway, what's the point? Well, my friends, when we get to the jQuery we need #content to become a blanket for the sidebar, and if there is no background set, it'll be transparent thus showing the sidebar.
#sidebarToggleButton - That's one hell of a name... This sets the button that will toggle the visibility of the sidebar to be correctly in position, but invisible to the JSless people. When we move onto the JS, the background images will be applied then, so they only show for the JS people!

Those 3 things are just about the only quirks in there. I've tested that code in FF, Safari 3 and Opera 9, and it all looks perfect! Here is how it should look:

Next we need to jQueryfy it.

Step 3 - jQuery Time!

I love jQuery! I love it that you can translate words to code so easily, and I always start off by doing the words. Here is a basic idea of what we want the script to do.

Hide the sidebar.
On clicking '.sidebarOpen', toggle the following:
- Remove the class 'sidebarOpen'.
- Add the class 'sidebarClose' (which we'll style next section).
- Animate the sidebar to slide out from under (literally, using position: relative;)
- Animate (this) to move X amount of pixels to the left (so that it stays in line with the sidebar).
Initiate the Accordion.

That all seems like a lot (but it's really not...) so I'll take you through it step by step. Open up the file you created called sidebar.js and start typing!

Step 3.1

As always, don't forget to wrap everything in jQuery's special document ready:

$(document).ready(function(){

	//jQuery code goes here

});

Put everything here on between the document ready!

Step 3.2

1	$("#sidebar").css({ left: "205px"});

This 'hides' the sidebar by manipulating the DOM level CSS. It doesn't really, it just gets swept under the rug. The literal rug being div#content. This wont actually work until we've added a little more CSS, but I'll cover after this section.

Step 3.3

$(".sidebarOpen").toggle(function(){
	$(this)
		.removeClass("sidebarOpen")
		.addClass("sidebarClose")
		.animate({right: "205px"}, 500);
	$("#sidebar").animate({left: "0px"}, 500);
}, function(){
	$(this)
		.removeClass("sidebarClose")
		.addClass("sidebarOpen")
		.animate({right: "0px"}, 500);
	$("#sidebar").animate({left: "205px"}, 500);
});

OK I can understand your confusion. This is a lot for a step by step instruction right?! Well yeah... But it's actually 2 very similar things. The first function in the .toggle() will:

Removes the class of 'sidebarOpen' (the classes are for CSS in the next section).
Adds the class of 'sidebarClose'.
Animates our little button to slide to the left alongside:
The sidebar sliding out itself, being animated with jQuery. Both are set to come out during half a second, so they should move together.

The thing is, is that the second function is exactly that, but in reverse! It:

Removes the class of 'sidebarClose'.
Adds the class of 'sidebarOpen'.
Animates our little button to slide back in to the right alongside:
The sidebar sliding back in.

See! Not so hard. It's just a lot of code to read over.

Step 3.4

Accordion time! Yay! We finally get to use the ever present jQuery UI. The way they've designed the widget makes it super simple to impliment:

$("#sidebar ul").accordion({
		header: 'h2',
		event: 'mouseover',
		activeClass: 'selected'
	});

It's just the one .accordion() function, applied to the ul within the #sidebar div. The parameters (one per line) are as follows (pretty self explanitory... But eh):

header - This defines the handles of each accordion 'drawer' - In our case, the h2 of each widget.
event - Defines when to change drawers, and we want the hover effect like Apple has, so we use mouseover
activeClass - This is handy for the little extra CSS we're about to endure. It gives the expanded drawer a class of 'selected'.

That's all the JavaScript code we'll be needing. It's all pretty straightforward, and easily modified to suit whatever you need!

Why this is so fantastic

I feel this hasn't been glorified enough yet! The amazing thing about the accordion plugin is that you don't have to edit any of the Wordpress generated code, which we haven't formatted ourselves at all (aside from the wrapping ul, but that's necessary regardless). Not only is it 100% unobtrusing and 100% unreliant on edited HTML code, but it's also a short quick function. Accordion does all the dirty work of selecting, animating, activating, changing classes, etc. It's great! Consider AccordionUI glorified! You should most probably have something similar to this (I've put the accordion in very lightly so you can see where it should be):

Step 4 - jQuery CSS

So obviously we're going to need a little extra CSS to cater for all the chopping and changing jQuery does for us. Things needing additional styling are:

#sidebarToggleButton - Using the classes that jQuery assigns for us, we can now safely style the images 'sidebarClose.png' and 'sidebarOpen.png' that I got you to save earlier.
The accordion definitely needs some work. We need to fix the square corders with some CSS3 and style the active class.

/* jQUERY CSS */

#sidebar>ul{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-opera-border-radius: 5px;
}

span.sidebarOpen{
	background: url(images/sidebarOpen.png) no-repeat center;
}

span.sidebarClose{
	background: url(images/sidebarClose.png) no-repeat center;
}

h2.selected{
	background: url(images/activeBg.png) repeat-x !IMPORTANT;
	color: white !IMPORTANT;
}

Just 2 things to note:

#sidebar>ul - That is, the direct ul child of #sidebar gets the cool rounded corders - still beta CSS3. But works in all Mozilla, Opera and WebKit based browsers.
!IMPORTANT - This is needed to override what has previously been set - the default handle grey background.

And so now, your final product show be something pretty like this: (Click for HTML version)

Wrapping up

So we've gone over a bit of stuff in this tutorial. We've looked at dynamic sidebars, A lot of jQuery to show and hide the sidebar that is infact an accordion in itself! This tutorial was aimed at using additional plugins for the default jQuery (We plugged jQuery UI in), and also the dynamic_sidebar function.