Category Archives: jQuery

09.29.11
by

WordPress Google Form bug with required fields

Google forms allow fields to be designated as required.  When running the form using the standard Google URL, the form will be validated and presented back to the user if any of the required fields are not entered.  There is an issue (aka bug) with required fields in the current version of the plugin.

If a user submits a form that is embedded in WordPress using the plugin, because there are missing fields the form processing does not complete.  There is no indication for the user that something is wrong, the form is simply presented again without any of the fields having data in them.

To resolve this I am looking at doing form validation on the client side using a jQuery plugin.  Hopefully I will have this resolved fairly quickly as I need this to work correctly for my own project.  My testing didn’t take into account a user not completely the form correctly.  Oops.  This bug affects all versions of WordPress Google Form up to and including v0.9.

Stay tuned.

12.11.10
by

Calendar-Plus renamed to Enhanced Calendar

I just received the approval from the WordPress plugin repository for Enhanced-Calendar.  The WordPress plugin I previously called Calendar-Plus will now be known as Enhanced-Calendar.  Once I get the code all checked in and the proper structure, it should be available from the plugin repository.  Hopefully that will happen in a day or two.

12.08.10
by

Need to rename Calendar-Plus

When I first created Calendar-Plus I had hoped it was a short lived project that would either get rolled into the Calendar plugin or deprecated by a new release. Unfortunately neither has happened and it continues to live on. Because I didn’t expect it to last long, I never put it into the WordPress plugin repository.  I probably should have done that.

There is now a plugin in the repository called Calendar-Plus which results in a name conflict and the automatic upgrade system thinks mine is out of date.  I should have put my code in the repository but I didn’t so I can’t think of a good way to resolve this other than to change the name and put the code into the repository.

So that is what I plan to do. But I am not sure what to call it.

  1. Calendar-Enhanced?
  2. Enhanced-Calendar?
  3. Calendar-MW?
  4. Calendar-Plus-Plus?

I am leaning toward #2 as it is close to the description I used when I wrote it.

10.22.09
by

Sandbox LEGO Theme beta

Off an on I have been working on a new Sandbox based LEGO theme for a while.  I wanted something I could use for my own LEGO blog as well as the NCLUG and NCLTC sites and possibly the ILTCO site as well.  I wanted to make it fairly easy to customize it by selecting a color scheme and allowing custom header images.

Color schemes were pretty straight forward.  I wanted to base them on the Fibblesnork Backgrounds which I like a lot.  The Fibblesnork backgrounds are very small images designed to tile across a web page.  In my case, I wanted to use them to frame the content area.  There are 18 different colors and two sizes for a total of 36 different background color choices.  At some point I plan to support all 18 colors but initially I am only offering three:  Red, Green, and Blue.  Setting up a theme options page to select a color scheme was pretty straight forward, I had done that previously with my Soccer Theme.

WordPress has some built in functionality to do custom header images but it didn’t really do what I wanted.  I wanted to allow a fair amount of control over the look and layout of the header.  I decided to support three header images:  Left, center, and right.  I didn’t want to manage the header images so I decided to leverage the built in media management capability.

The theme options page will present any image that is in the media library as a potential header image.  But how?  I wanted to make it fairly simple to use.  I decided to implement a drag and drop scheme based on the jQuery UI and discussed it in detail in a prior post.  It took a little while to work it all out as I had done very little with jQuery previously.

The last thing I wanted to allow was the ability to tweak the header layout with CSS.  For this I added what I referred to as “CSS Overrides” for the blog title, blog tagline, and the three header images.  The combination of color schemes, custom header images, and CSS Overrides allows the Sandbox LEGO theme to take on a fairly distinct look.

image

image

image

image

The theme is currently in use on three blogs, I expect to make it available for download in the next few days.  There are a couple issues I know of that need some styling help and I want to get two more color schemes finished before I release it.  Color schemes aren’t too bad – I just need to pick the proper values.  I have a script that actually generates the CSS files.

09.17.09
by

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.

09.09.09
by

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.