For the header I wanted the user to select 1-3 images from the media library to use in the header.  I also wanted to allow some styling control over the blog title and tagline and lastly choose a color scheme from a selection of 10-12 choices.  All of this information would make for a very busy theme options page so I decided to make use of the jQuery UI Accordion widget to logically group information into sections.

My theme development area was still running on WordPress 2.7.1 which includes jQuery 1.6 which is not the most recent version.  I should have upgraded WordPress before embarking on my Accordion experiments, I would have saved myself a bunch of time!

As it turns out, Accordion isn’t shipped with WordPress so I have to download it and install it as part of my theme and then load it.  This isn’t a big deal, there are lots of posts across numerous blogs that explain how to load Javascript correctly.  No matter what I did, I couldn’t get it to work.  I played around with jQuery UI Accordion and half a dozen similar solutions trying to get it to work but I could only get one solution partially working.  In the end, I decided to try updating WordPress and start with the latest and greatest.

What do you know?  My Accordion worked perfectly!  So after wasting the better part of two days trying to work with what I had installed, simply updating WordPress was the right answer.  I think the real change was in the jQuery UI ui-core component as at one point I had Accordion working in the older version but only when I loaded the custom packed jQuery download.  When I loaded just the Accordion source file it wouldn’t work.  The custom packed file included something out of jQuery UI ui-core, what I don’t know but it made a difference.  When I looked at the jQuery code in the 2.8.4 release I noticed the ui-core component also had this function where as the 2.7.1 did not.  So something was definitely different and it make a big difference.

Now that I have the Accordion working I am back to making progress on my theme options page.   I have played with jQuery just a bit, this is the first real jQuery application I have worked on.  It is pretty powerful, I can see why it has gotten so much traction.