Header Image Options in LEGO Theme

I have been working on a re-write of the Sandbox LEGO WordPress theme.  It is taking a lot longer than I thought it would, mostly because I have made the problem more complicated than I initially thought it would be.

One of the main things I wanted to offer in this theme was the ability to choose a color scheme from an pre-set offering of about 8-10 choices.  This wasn’t too hard, I had done some similar in the original Sandbox Soccer theme.

As I worked on it I decided it would be nice to allow the user to define what the header should look like including their own image.  WordPress offers the ability to upload and use a custom theme header but this didn’t do quite what I wanted.  I decided to let the user choose a header image from the media library.  But what if the user wants multiple header images?  Hmmm.  This problem could get very complicate very quickly.  I decided to constrain the problem by providing the ability to define up to three (3) header images:  Left, center, and right.  Doing this would support the 3-4 sites I expect to use this theme on (my own CarolinaTrainBuiders.com site, NCLUG, NCLTC, and ILTCO).

Now that I knew what I wanted, how to implement it.  Simply showing the image options on a Theme Options page could potentially result in an enormous page.  I mentioned jQuery Accordion in a prior post, dividing the various options into sections using the Accordion made sense and was pretty straightforward once I upgrade to WordPress 2.8.4.

Once the Accordion was working I decided I wanted an elegant way to select the images.  Since this effort is a hobby and I largely do projects likes this to learn something, I decided I wanted to use a drag and drop mechanism to select the images.  Again, jQuery to the rescue, namely the jQuery draggable and jQuery droppable plugins.  In particular, the Simple Photo Manager demo was very close to what I had envisioned.

It has taken me a little while, mostly because I haven’t had a lot of time to work on it but I finally have a pretty slick theme options page working where the header images can be selected from the media library using drag and drop.  I am by no means a jQuery guru but I have learned a fair amount working this problem out.  The code I have isn’t ideal and I’ll continue to refine it but it is working so I can continue to develop the theme.  Once I get it running and released I will go back and clean up the jQuery code.  For now, getting it working and doing what I wanted was the primary task.

Lenovo Warehouse Sale

There was a blurb in the N&O yesterday that Lenovo was having a warehouse sale today. The hand-me-down laptops that the kids are using are showing thier age so I decided to check out the sale. Apparently everyone else in Wake County had the same idea. There are at least 500 people in line from where I can see, it could be a lot more. Line isn’t moving very quickly either. Guess I should have gotten here earlier!

jQuery, jQueryUI, jQuery UI widgets and theme options

Over the past few days I have been dinking around with jQuery, in particular some of the jQuery UI widgets.  I am working on a revamp of a LEGO WordPress theme and I wanted to allow the theme to support multiple color schemes and custom headers.  This is a learning project for some other themes I want to update (e.g. Swim Team and Soccer).

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.

Charting Results

As I work on results functionality I have several ideas floating around my head.  One is the ability to chart swimmer results over the course of a season or possibly several seasons.  Charting over several seasons raises some issues (e.g. different age groups, event distances, etc.) but charting results for at least one season would be interesting.

I had thought about using the same functionality that the WordPress.com Stats plugin uses which is Open Flash Chart to plot results.  Today while looking for something else, I may have found something which is a better solution:  pChart – a PHP library for building charts!

Hopefully I will get to try it out in the next few weeks.  I have been sidetracked by a WordPress project for my daughter’s soccer team so Swim Team will have wait a little longer.

What happened to ColorBlender.com?

Another one of the resources I use seems to have crapped out.  ColorBlender.com is still online but the site doesn’t work any more.  It is still possible to browse through some of the old palettes but it isn’t possible to create a new one.  I liked ColorBlender, it came up with some nice color schemes and was easy to  use.

Since it wasn’t working, I went in search for a replacement and found a couple interesting sites.

Of the three, I like the Color Match Remix Color Scheme Tool the best.  For a color neophyte like myself, these sort of resources are really useful.

Another resource I refer to pretty frequently is the Elementik’s Web design tools and resources I use page.  This page has links to all sorts of cool Javascript solutions, CSS tricks, color design resources, and more.

Continuing with Sandbox

I asked the other day if Sandbox was dead and even though there was a minor update, it appears that Sandbox isn’t really dead but it is in a purgatory of sorts.  Not dead but not actively being developed either.  So

Soccer season has started and I need to update the Soccer theme I used for my daughter’s team because they changed uniform colors.  Since I had based the Soccer theme on Sandbox, I could either continue with it or start again.  For now I am continuing with it because (a) I know it pretty well now and (b) it works.  However, I do want to check out the Elastic theme editor I heard about recently on the WordPress Weekly podcast.

When I did the MacDolphins theme this past spring, I had based some of that work on the Soccer theme but was able to fix much of what had bothered me, in particular, the need to install the Sandbox theme itself and the Soccer theme as a child theme.  I love the idea of a child theme but for the casual user, the relationship between parent and child theme isn’t real obvious and failing the install the parent theme results in a non-functional blog and likely frustration.

By structuring the theme architectures such that it referenced the Sandbox source as a SVN external, I was able to bundle all of the files for the parent theme and child theme together as one theme.  This makes distributing the theme much easier and also solves the problem where the theme preview shows the parent theme instead of the child theme.  This preview problem doesn’t affect the functionality of the site but it is confusing if you don’t know what is going on.

I expect to have the soccer theme updated in the next week or so and probably offer a few more color schemes.  But first I am working on a Sandbox based LEGO theme which I’ll finish first because the NCLUG and NCLTC web sites sorely need an updated theme as the one they have now are old and don’t support widgets.  This LEGO theme is a good exercise in setting theme options, particularly the header area as I expect I will need it to make a generic version of the MacDolphins theme for any swim team to use.