One of my new years resolutions is to start sharing more WordPress code tips here, so here’s one!

I’m working on a “Customer Portal” for a landscaper client.  One of the features is using the wordpress Media Library to store photos of various plants, including care information which would be stored in the Description field of the image.

This way, a collection of plants could be displayed in a single post for the customers review, and she can use the plants over an over again in different communications with customers.

There were a couple of things I had to do to make this workable for her, and I thought sharing here would help others!

For one thing, reusing the images multiple times means you can’t easily use the built in WordPress Gallery functionality, since the images are NOT attached to the posts (they are just Inserted it them).

We also wanted to display the description in the image caption.

Finally, this needed to be very easy for the client to do, and fast.

Improve Usability of the Image Insert functionality in WordPress

Since we are using images that may or may not be attached to the posts (some may be uploaded at the time the post is created, but others will be pulled from the media library) we can’t easily use the Gallery function.*  So for each image you have to insert the image you want, then open the dialog up again to insert the next one, and so forth.

Also, I find that if there is one thing that will screw up the formatting of a wordpress post it’s using the Caption in the Visual Editor, so I generally steer non-techie clients away from it.

But in this case, we did want to use the Caption, and I foresaw support calls in my future if we didn’t make it super easy for the client.

Solution: Faster Image Insert plugin

This plugin adds checkboxes next to the images on the the Upload/Insert image dialog.  So to insert multiple images at a time from the Media Library, just confirm the settings (size, caption, etc) for each of the photos, click the checkboxes of the ones you want inserted, and insert them all at once!

So much easier than inserting them all individually, and less prone to errors because the user clicked in the wrong place and inserted his next image into a caption!

*If you wanted to use the Gallery functionality, you would have to specify the # of the attachment each time using the gallery include = syntax, but that was ruled out as too complicated for the user.  We needed a way to let her just choose the images she wanted and insert them.

How to add the description to the image caption (WordPress)

The next problem to solve was showing the description in the caption area.  She didn’t want the user to have to click on the image to get to the Attachment page to see the image description.

This one I found by a little Googling, and it works like a charm.  Thanks Web Citizen Mag!

Recently for a project, we needed to utilize the description field to dump in additional photo information, while the caption field was used to provide the regular text caption.

To get WordPress to display the description inside the post we had to override the the default image shortcode function WordPress used to generate the final HTML output for the images inside posts.  Then we needed to make some changes to our stylesheet and we were set.

Go there to read the how-to!

Basically go to the link above and copy the code provided to your functions.php file.  The example provided is excellent.

The only change I made to the code was that I wanted to show the description under the caption, instead of on top, so I made the following change to the return:

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) .

 '" style="width: ' . (10 + (int) $width) . 'px">'

. do_shortcode( $content ).'<div class="wp-caption-text">' .

$caption . '</div>'. $description . '</div>';

So now I just added some formatting to the css for the Description info, and we are good to go!

Easy peasy.

Final Product – Media Library (non-attached) Images displaying Descriptions within a WordPress post!

I just upgraded to FF 4, and I noticed that I no longer get google results (or google ‘i feel lucky’ results) when I type something in my address bar that isn’t a full web address.  Like I might type just sluggy and that would go straight to sluggy.com.  I basically use my address bar as an extra search bar, and have forever, so it’s a hard habit to break.

But it’s an easy fix to get it back to that functionality.

Just type about:config in your address bar.

It will give you an ‘are you sure’ warning.  Say you are sure.

Then find Keyword.URL, and double click on it.

Set it to http://www.google.com/search?ie=UTF-8&oe=utf-8&q=

if you just want it to return google results.

Set it to

http://www.google.com/search?btnI=I%27m+Feeling+Lucky&ie=UTF-8&oe=UTF-8&q=

if you want it to try to go to the most likely site.

More here: http://kb.mozillazine.org/Keyword.URL

A client wants to be able to add some simple polls to his website, so I’ve been researching which are the best poll plugins, from both an ease of set up and use standpoint, as well as being visually appealing. We want something that can primarily be added to posts, but also can easily be displayed in a sidebar if desired.  We don’t need anything extremely fancy, just a nice, simple poll.

I tried WP-Polls first, but it looked pretty complex for a novice user, so I’ve moved on to Democracy. I figured I’d document how it goes for others who might be looking for something similar.

Here is an example of the poll in action (feel free to try it yourself!):

________________________________________

My thoughts:

Installation: The plugin installs easily, no problems, but I did have an issue with a strange case of it inserting a random “n” before a poll.  Google is my friend, though, and I found this post which addressed the issue.  Modifying line 331 of democracy.php to change the single quotes to double quotes in this line did the trick

"n<div></div>"

Styling: The default styling seems nice, and if you know some css, you can customize the styling.  The only css change I made to the example above was to remove the bullets from the list by adding this to my style.css:

.democracy ul {
list-style:none outside none;
}

ISSUE: The bars on the results don’t display the same in IE as in Chrome and Firefox…

I had to add a width to the .democracy to get the bars to show up in IE.  By default it’s max-width:250px, but I changed it to 300 and added a width setting.

For mine,

.democracy {
max-width:300px;
width:300px;
}

Features:  It includes a widget for sidebar use, and is easily inserted into a post with one simple line.  It also (optionally) allows users to add their own poll options.  Can enable IP tracking and cookie tracking to prevent ballot box stuffing (though those options are disabled on this test poll).  The only thing I didn’t see was some sort of option to run the poll for a set number of days, but it does give the option to manually deactivate a poll.  All in all, everything I needed for this simple application.

Poll set up and Maintenance:  Seems simple enough.  A new section is created in the Posts section of your Dashboard, and you manage your polls from there.  Name your poll, add your choices, and you’re good to go.  Insert a particular poll in a post by using:

{democracy:x}

(where x= the ID of your poll)

All in all, I’m quite happy with this as a solution thus far, now that I’ve fixed the IE display issues.  I’ll update as I attempt to integrate it into the client site…

Update:  It looks like the Add your own answer option doesn’t work in IE.  Uh oh.