The problem with most About Us pages is that they’re almost always presented in horrifically boring ways. They remind me of high-school year books, and there’s nothing about high-school year books that I find appealing or compelling.
So, for the RealPolitech About Us, I decided to start investigating this jQuery that I had heard so much about. It’s an open-source Javascript library that can manipulate the presentation of data on a web page using nothing but XHTML, CSS and some harmless scripting language.
Since I had no previous experience with jQuery, the first thing I had to do was find something that was close to what we needed, but not so ubiquitous that people would immediately recognize it. I found the Simple Horizontal Accordion plugin, which could stack DIVs side-by-side and animate their display once the user had clicked on them.
Altering the Script
Almost every plugin that I have ever used, be it jQuery, Joomla! or WordPress has required a little adaptation. This one was no different, but jQuery is so easy to understand that my modifications didn’t take long. Look at the haccordion.js document and you’ll see what I mean.
Right away, it’s apparent what numbers you need to change to get a different content area, alter what your DIV classes will be and the speed at which the animation occurs. Easy.
The WordPress Loop
Since I’m the designer of the RealPolitech website, I could have hardcoded the information (picture, position and bio) for each person into the template page. But where’s the fun in that? Here’s the loop I came up with:
<div class="haccordion">
<?php query_posts('orderby=date&order=asc&category_name=people'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="header <?php the_title(); ?>"></div>
<div class="content"><?php the_content(); ?></div>
<?php endwhile; endif; ?>
</div>
The info for each person is drawn from individual posts in the “People” category. This way, someone who isn’t a web designer can go in and change the information, just like the creators of WordPress intended.
Notice that the DIV class for the header also includes a call to the title of the post. That makes it possible to assign a different background image to each “slice.”
Altering the CSS
Once WordPress was generating the HTML and the jQuery animations were working, the only thing left to do was tweak the CSS. I set the height and width of the slices to match the images with the names in vertical type, then I created classes to match the individual posts (.Arabella, .Christina, etc.) and assigned them their corresponding background image.
All in all, I would say it’s a very good first tweak of a jQuery plugin.
