CSS for the WordPress Google Form Submit button

I was recently asked how the Submit button could be styled when using a Google Form in conjunction with my WordPress Google Form plugin.  Fortunately this was an easy question to answer because I had done something similar for another site.  Now I suspect the person asking me didn’t want to make their submit button pink but the CSS selector should be the same – it is just a matter of adding the CSS directives to achieve the desired affect!  I used the following selector to style the Submit button:

div.ss-form-entry>input[type="submit"] {
    background-color: pink;
}

This little trick should help further integrate Google Forms with your WordPress site.

Update: Recently I was asked how to style only the Submit button – all other buttons (e.g. Back, Continue, etc.) and input fields should keep their default styles. Here is some CSS which will style only the Submit button:

div.ss-form-entry>input[type="submit"][name="submit"] {
    background-color: pink;
}

How to have a Meta Box appear before the Visual Editor

I am working on a new theme where I have defined a Custom Post Type.  This is my first time working with Custom Post Types and I must say they are pretty slick.  I wish they had existed back when I first started working on my Swim Team plugin!  I have far too much invested in my Swim Team plugin so I’ll stick with the custom database tables but for this new project, CPTs are working great.

Once I got my CPT defined and basically working, I wanted to add some custom fields to it using a Meta Box.  There are numerous articles that outline how to do it, I referenced this one quite a bit and found it very helpful.  In my instance, the Meta Box that holds all of the custom fields I want to collect is more important that the Visual Editor is so I wanted it to appear higher on the screen.

After poking through the Codex and number of Google searches, it appears that doing what I want to do isn’t native WordPress functionality.  I did however find this post which outlines an idea for moving the Meta Box so it appears on top of the Visual Editor.  Awesome.  Exactly what I was looking for. Except the code fragment didn’t work.  After looking at it, I decided the idea was sound but the implementation wasn’t correct or at least wasn’t correct in my application.

I tweaked the Javascript to make sure the document was ready before rearranging the Meta Box and Visual Editor and got the result I was looking for.  Here is the code I am using in my functions.php file.

/**
 * Set up a footer hook to rearrange the post editing screen
 * for the 'CPT' custom post type.  The meta box which has all
 * of the custom fields in it will appear before the Visual Editor.
 * This is accomplished using a simple jQuery script once the
 * document is loaded.
 */
function CPT_admin_footer_hook()
{
    global $post ;

    if (get_post_type($post) == 'CPT')
    {
?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#normal-sortables').insertBefore('#postdivrich') ;
    }) ;
</script>

<?php
    }
}

/**  Hook into the Admin Footer */
add_action('admin_footer','CPT_admin_footer_hook');

Working with WordPress 3.0 multisite

I started playing with WordPress 3.0’s multsite functionality this week. I have a number of WordPress blogs for various things and they are a nuisance to keep updated. I had looked at WordPress-MU about 18 months ago when I did the CASL Ambassadors site and determined that it had more limitations than I was ready to deal with so I just went with a separate WordPress installs.

WordPress 3.0’s multisite functionality is pretty straight forward and it only took a little while to set it up.  I followed the instructions found in the this post on WpEngineer.com.  I wanted to use the subdomain setting but it appears the hosting plan I have with GoDaddy.com won’t allow it so for now, I am using subfolders.

Now that I have things up and running I need to start moving my sites.  The first one I moved is for Photos.  I want to share photos with my family and host them on Flickr but I have never liked the lack of presentation that Flickr has.

I found an interesting theme called AutoFocus which tiles posts across the front page of the blog.  I am slowly going back in time to create a post for each of the sets I have stored in Flickr.  I had to create a work-around for the post image to appear on the front page.

AutoFocus uses the first image attached to a post as the image display on the blog front page.  My posts don’t have one, at least I don’t want them them.  I want the post to contain the oEmbed Flickr gallery and the thumbnails using the Flickr Gallery plugin.

What I ended up doing to get it to work was to add an image via URL from Flickr and then add the tag attribute  style=”display: none” to the IMG tag.  Works like a champ!

Setting up a multi-blog installation

The CASL Ambassadors web site is actually a collection of WordPress blogs – the main site plus one for each of six age group teams.  When I initially set it up I tried using WordPress-MU but my hosting solution wasn’t capable for MU’s requirements.  Then I tried a plugin called WP-Hive which allows a collection of blogs to share some common infrastructure.  Wp-Hive looked promising but I ran into some concerns which kept me from using it.

Ultimately I ended up setting up a separate blog for each site and hoped to come back to it at some point.  That point was a couple weeks ago when I decided to do some maintenance on the sites.  I ended up using the main installation as a parent and linked (using Unix symbolic links) all of the sub-domain sites back to parent.  The only exception was the wp-content directory which is a real directory (so uploads can be unique) but within wp-content I linked back to the parent’s themes and plugins.

This worked pretty well – if I install a plugin or theme for the main site it is available for all of the sub-domain sites and when I upgrade WordPress, all of the sub-domain sites are upgraded as well.  Once I got this running, I wanted to share the users across all blogs.

After several attempts and numerous Google searches, I ended up following the directions in this thread and this thread and got everything to work.  I don’t particularly care for having to modify one of the core WordPress files since it will go away the next time I update WordPress but none of the other solutions I tried worked.

Trying out WordPress Facebook Connect plugin

I have been doing some testing with the WordPress Facebook Connect plugin.  There are a couple sites I work with, particularly our swim team web site, MacDolphins.org, where I need users to login and add data to the site.  Each year when we do swim team registration I get lots of questions about how to register, forgotten usernames and passwords, etc.  With the popularity of Facebook, I am thinking that leveraging Facebook login credentials could make things a lot easier for me and our swim team parents.

As a test, I have installed it on the site I am putting together for my youngest daughter’s soccer team (CASL Sharks) to see  how it works.  For the most part, I am impressed – it pretty much works as advertised.  I was able to login using my Facebook login and once my user was added to the WordPress user tables, I could change my permissions to allow my Facebook user id to post.  I still need to do some work to support Facebook Connect for comments but the instructions look pretty straight forward.  I think this would work well for the NCLTC and NCLUG sites as well although Facebook Connect requires PHP5 and those sites are hosted on a PHP4 based server so I’ll have to sort that out.

Flickr-Gallery Plugin – good stuff!

I use Flickr to host my photos and I’ve always wanted a better way to present them on WordPress blogs and this weekend I think I found it.  Flickr-Gallery is a great plugin.  It is easy to set up and use and it integrates well with my theme.  It has a nice selection of short code options.

The only thing I use which is missing is the ability to link or preferably, display, a slide show.  I shoot a lot of pictures of our kids activities (skateboarding, soccer, basketball, swim team, etc.) and sharing them as a Flickr slide show is something I do frequently.

I found a solution to the missing slide show by using the Light Window plugin in conjunction with the Flickr URL for the slide show I am interested in presenting.

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.

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.

WPMU – easier said than done …

Over the last couple of days I have been playing around with WordPress MU (aka WPMU), the multi-user, mult-blog version of WordPress.  It has been on my “to checkout” list for a while but I haven’t had a compelling reason to do so until now.

I was asked to help set up some blogs for a group of soccer teams that are traveling to Europe later this year after doing one for my daughter’s team (one of the teams).  This seemed like a good opportunity to try out WPMU since I’d also like to do it for my wp-SwimTeam plugin and make it available to swim teams as a hosted service.

Downloading and installing WPMU was pretty straight forward but getting it to work with sub-domain mode blogs turned out to be a challenge.  I have concluded that without the ability to edit the httpd.conf file, it isn’t possible to make it work.  I did manage to get the sub-directory mode working but that isn’t what I need for the soccer team project.

So for now, I am going to abandon WPMU and set up a series of regular WordPress blogs, one for each team.  I am also looking at wp-Hive to help with this.

Multi-instance Widgets

There was a thread today on Wp-Hackers regarding multi-instance widgets.  While I don’t need this right now, I was curious because I expect to do something with widgets for my wp-SwimTeam plugin.  If and when I do, I want to make sure I don’t design myself into a corner.

The discussion referenced an interesting article which outlines how to develop a widget to ensure it will support multi-instances.