Yesterday I had to add some custom forms to a WordPress plugin called Google Maps Store Locator for WordPress (version 1.2.28) and found it’s not as straight-forward as one might expect. After about forty-five minutes of digging through all of the plugin’s files, I located four that were of use to me:

• /store-locator/view-locations.php
• /store-locator/add-locations.php
• /store-locator/generate-xml.php
• /store-locator/js/store-locator.js

By making additions to these four files as well as the store-locator database, you can add custom form fields to the plugin that actually store data and, of course, display this data to the user!

Step 1: Add custom fields (or “columns”) to the wp_store_locator table

We need to add columns to the table named wp_store_locator in our WordPress database so that our custom info can be stored somewhere. We are going to add our columns after the last column in the table (which should be named sl_neat_title).

So, using phpMyAdmin or any other database administration tool, add your custom columns. For this tutorial, I’m going to add sl_creditcard and sl_giftcard to keep track of which stores allow the use of credit cards or gift cards. Notice that I included the sl_ prefix. This is necessary because the plugin expects every column in the table to have this prefix.

Note: From now on when you see “creditcard” or “giftcard” OR “sl_creditcard” or “sl_giftcard” OR “Credit Card” or “Gift Card” this is where you can insert the names of your custom fields.

Above: Database table wp_store_locator before adding custom fields

Above: Database table wp_store_locator after adding custom fields

Step 2: Modify view-locations.php, and add-locations.php

We need to modify these two files so the custom forms and info show up in the admin panel when the admin tries to add, edit, remove, or view locations.

In add-locations.php we must append our custom form field HTML. Opening the file initially and looking at lines 98 to 100 you will see:

“.__(“Hours”, $text_domain).”<br><input name=’sl_hours’><br><br>
“.__(“Phone”, $text_domain).”<br><input name=’sl_phone’><br><br>
“.__(“Image (shown on map with location)”, $text_domain).”<br><input name=’sl_image’><br><br>

To add form fields for the fields we added to the database (sl_creditcard and sl_giftcard), simply do the following:

“.__(“Hours”, $text_domain).”<br><input name=’sl_hours’><br><br>
“.__(“Phone”, $text_domain).”<br><input name=’sl_phone’><br><br>
“.__(“Credit Card“, $text_domain).”<br><input name=’sl_creditcard‘><br><br>
“.__(“Gift Card“, $text_domain).”<br><input name=’sl_giftcard‘><br><br>
“.__(“Image (shown on map with location)”, $text_domain).”<br><input name=’sl_image’><br><br>

Next, in view-locations.php, we will have to make three additions. First, on lines 153 to 155 find:

<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_hours&d=$d'>".__("Hours", $text_domain)."</th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_phone&d=$d'>".__("Phone", $text_domain)."</a></th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_image&d=$d'>".__("Image", $text_domain)."</a></th>";

And do the following:

<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_hours&d=$d'>".__("Hours", $text_domain)."</th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_phone&d=$d'>".__("Phone", $text_domain)."</a></th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_creditcard&d=$d'>".__("Credit Card", $text_domain)."</a></th> <th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_giftcard&d=$d'>".__("Gift Card", $text_domain)."</a></th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_image&d=$d'>".__("Image", $text_domain)."</a></th>";

Then on lines 189 to 191 find:

<td><input name=’hours-$value[sl_id]‘ value=’$value[sl_hours]‘></td>
<td><input name=’phone-$value[sl_id]‘ value=’$value[sl_phone]‘></td>
<td><input name=’image-$value[sl_id]‘ value=’$value[sl_image]‘></td>”;

And do the following:

<td><input name=’hours-$value[sl_id]‘ value=’$value[sl_hours]‘></td>
<td><input name=’phone-$value[sl_id]‘ value=’$value[sl_phone]‘></td>
<td><input name=’creditcard-$value[sl_id]‘ value=’$value[sl_creditcard]‘></td>
<td><input name=’giftcard-$value[sl_id]‘ value=’$value[sl_giftcard]‘></td>
<td><input name=’image-$value[sl_id]‘ value=’$value[sl_image]‘></td>”;

Then on lines 217 to 219 find:

<td>$value[sl_hours]</td>
<td>$value[sl_phone]</td>
<td>$value[sl_image]</td>”;

And do the following:

<td>$value[sl_hours]</td>
<td>$value[sl_phone]</td>
<td>$value[sl_creditcard]</td>
<td>$value[sl_giftcard]</td>
<td>$value[sl_image]</td>”;

Whew! Feel free to upload the files you just worked on. You can view the fruits of your labor by going to your WordPress Dashboard and clicking “Manage Locations” or “Add Locations” under the “Store Locator” menu. Your custom fields should show up like this:

Above: Result of adding code to add-locations.php

Above: Result of adding code to view-locations.php

Step 3: Modify generate-xml.php and store-locator.js

We need to modify these two files so our custom info shows up on the front end when the user interacts with the actual “store locator.”

Modifying generate-xml.php is a bit more tricky than duplicating HTML (like we did previously) because we must add our custom fields (sl_creditcard and sl_giftcard) to a SQL query. But follow along closely and everything should turn out well!

Open generate-xml.php and on line 43 find:

$query = sprintf(“SELECT sl_address, sl_store, sl_city, sl_state, sl_zip, sl_latitude, sl_longitude, sl_description, sl_url, sl_hours, sl_phone, sl_image,( $multiplier * acos( cos( radians(‘%s’) ) * cos( radians( sl_latitude ) ) * cos( radians( sl_longitude ) – radians(‘%s’) ) + sin( radians(‘%s’) ) * sin( radians( sl_latitude ) ) ) ) AS sl_distance FROM “.$wpdb->prefix.”store_locator HAVING sl_distance < ‘%s’ ORDER BY sl_distance”,

And do the following:

$query = sprintf(“SELECT sl_address, sl_store, sl_city, sl_state, sl_zip, sl_latitude, sl_longitude, sl_description, sl_url, sl_hours, sl_phone, sl_image, sl_creditcard, sl_giftcard,( $multiplier * acos( cos( radians(‘%s’) ) * cos( radians( sl_latitude ) ) * cos( radians( sl_longitude ) – radians(‘%s’) ) + sin( radians(‘%s’) ) * sin( radians( sl_latitude ) ) ) ) AS sl_distance FROM “.$wpdb->prefix.”store_locator HAVING sl_distance < ‘%s’ ORDER BY sl_distance”,

Then, on line 69 to 72 find:

echo ‘hours=”‘ . parseToXML($row['sl_hours']) . ‘” ‘;
echo ‘phone=”‘ . $row['sl_phone'] . ‘” ‘;
echo ‘image=”‘ . $row['sl_image'] . ‘” ‘;
echo “/>n”;

And do the following:

echo ‘hours=”‘ . parseToXML($row['sl_hours']) . ‘” ‘;
echo ‘phone=”‘ . $row['sl_phone'] . ‘” ‘;
echo ‘image=”‘ . $row['sl_image'] . ‘” ‘;
echo ‘creditcard=”‘ . $row['sl_creditcard'] . ‘” ‘;
echo ‘giftcard=”‘ . $row['sl_giftcard'] . ‘” ‘;
echo “/>n”;

Okay, we’re almost there! All that’s left is store-locator.js…

Open store-locator.js and on lines 61 to 63 find:

var hours = markers[i].getAttribute(‘hours’);
var phone = markers[i].getAttribute(‘phone’);
var image = markers[i].getAttribute(‘image’);

And do the following:

var hours = markers[i].getAttribute(‘hours’);
var phone = markers[i].getAttribute(‘phone’);
var creditcard = markers[i].getAttribute(‘creditcard‘);
var giftcard = markers[i].getAttribute(‘giftcard‘);
var image = markers[i].getAttribute(‘image’);

Then, on line 66 find:

var marker = createMarker(point, name, address, “”, description, url, hours, phone, image);

And do the following:

var marker = createMarker(point, name, address, “”, description, url, hours, phone, creditcard, giftcard, image);

Then, on lines 139 to 141 find:

var hours = markers[i].getAttribute(‘hours’);
var phone = markers[i].getAttribute(‘phone’);
var image = markers[i].getAttribute(‘image’);

And do the following:

var hours = markers[i].getAttribute(‘hours’);
var phone = markers[i].getAttribute(‘phone’);
var creditcard = markers[i].getAttribute(‘creditcard‘);
var giftcard = markers[i].getAttribute(‘giftcard‘);
var image = markers[i].getAttribute(‘image’);

Then, on lines 143 find:

var marker = createMarker(point, name, address, homeAddress, description, url, hours, phone, image);

And do the following:

var marker = createMarker(point, name, address, homeAddress, description, url, hours, phone, creditcard, giftcard, image);

Then, on lines 145 find:

var sidebarEntry = createSidebarEntry(marker, name, address, distance, homeAddress, url);

And do the following:

var sidebarEntry = createSidebarEntry(marker, name, address, distance, homeAddress, url, creditcard, giftcard);

Then, on lines 154 find:

function createMarker(point, name, address, homeAddress, description, url, hours, phone, image) {

And do the following:

function createMarker(point, name, address, homeAddress, description, url, hours, phone, creditcard, giftcard, image) {

Then, on lines 163 to 164 find:

if (hours!=”") {more_html+=”<br/><b>Hours:</b> “+hours;} else {hours=”"}
if (phone!=”") {more_html+=”<br/><b>Phone:</b> “+phone;} else {phone=”"}

And do the following:

if (hours!=”") {more_html+=”<br/><b>Hours:</b> “+hours;} else {hours=”"}
if (phone!=”") {more_html+=”<br/><b>Phone:</b> “+phone;} else {phone=”"}
if (creditcard!=”") {more_html+=”<br/><b>Credit Card:</b> “+creditcard;} else {creditcard=”"}
if (giftcard!=”") {more_html+=”<br/><b>Gift Card:</b> “+giftcard;} else {giftcard=”"}

Then, on line 188 find:

function createSidebarEntry(marker, name, address, distance, homeAddress, url) {

And do the following:

function createSidebarEntry(marker, name, address, distance, homeAddress, url, creditcard, giftcard) {

Then, on line 197 find:

var html = ‘<center><table width=”96%” cellpadding=”4px” cellspacing=”0″ class=”searchResultsTable”><tr><td width=”30%” style=”padding-right:4px” valign=”top”><b>’ + name + ‘</b><br>’ + distance.toFixed(1) + ‘ ‘ + sl_distance_unit + ‘</td><td width=”40%” valign=”top”>’ + street + ‘<br/>’ + city + state_zip +’ </td><td width=”30%” valign=”top” style=”text-align:right”>’ + link + ‘<a href=”http://’ + sl_google_map_domain + ‘/maps?saddr=’ + homeAddress + ‘&daddr=’ + address + ‘” target=”_blank” class=”storelocatorlink”>Directions</a></td></tr></table></center>’;

And do the following:

var html = ‘<center><table width=”96%” cellpadding=”4px” cellspacing=”0″ class=”searchResultsTable”><tr><td width=”30%” style=”padding-right:4px” valign=”top”><b>’ + name + ‘</b><br>’ + distance.toFixed(1) + ‘ ‘ + sl_distance_unit + ‘<br>Credit Card: ‘ + creditcard + ‘<br>Gift Card: ‘ + giftcard + ‘</td><td width=”40%” valign=”top”>’ + street + ‘<br/>’ + city + state_zip +’ </td><td width=”30%” valign=”top” style=”text-align:right”>’ + link + ‘<a href=”http://’ + sl_google_map_domain + ‘/maps?saddr=’ + homeAddress + ‘&daddr=’ + address + ‘” target=”_blank” class=”storelocatorlink”>Directions</a></td></tr></table></center>’;

Congratulations, if you’ve followed the steps correctly your custom fields should be showing up on the front end like this:

Above: Our custom fields on the front end!

jQuery is becoming present in more Web 2.0 sites. jQuery slideshows or galleries take a grouping of images and turn it into an flash-like image/photo gallery. Here is a list of top options available for your website’s photo gallery.

Galleria - Galleria is javascript image gallery written as a plugin of jQuery. It uses simple html list to load the images on by one into a larger canvas. The best thing of galleria is that, it can create thumbnails for you. It is very user friendly and can be implemented easily without much knowledge of scripting. Checkout a Galleria Demo

jQuery Multimedia Portfolio - Display your portfolio items in a horizontal gallery view. A very cool jquery plugin. It is Non obstrusive and accessible portfolio supporting multiple media. It supports photos, multimedia content like flv, audio mp3 etc. It can automatically detect extension and display images/snapshots according to it. Here is a quick screen shot. Click on it for demo and download.

Space Gallery - Animate your images and display them as a gallery in space effect much like Apples time machine. These images will look like if they are in 3d space.

jQuery Slider Gallery - Rotate your images in similar effect as on Apple’s website. You can rotate images, product pictures or anything you like.

jQuery jsGallscroll Plugin - jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

jQuery Cycle Plugin - The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

EO Gallery - EOGallery is a web animated slideshow gallery maid with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures. By the way, EOGallery is XHTML 1.0 strict valid and almost CSS valid, it has been tested on Firefox, Safari, Internet Explorer 6 and works even with non-javascript and/or non-css browsers.

slideViewer - slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures.

jQuery lightbox plugin - jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. LightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.

Galleriffic - A jQuery plugin for rendering fast-performing photo galleries

pirobox -Pirobox is another JS gallery script with the difference hatwrite by Diego Valobra.Take a look at his script,you can see that he used a few tricks to get his goal to create a good looking jQuery gallery.

jQuery Popeye - Popeye generates an inline image gallery from an unordered list of images. The gallery features clever inline image enlargement, i.e. the enlarged image stretches out over the site content without adding a visual overlay of the whole site. It stays fixed with one edge to its original coordinates, so that a sense of cohesiveness is created in the user interface and interaction. Demo

zoomimage - Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border. Demo

Dynamic Image Gallery and Slideshow - This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. Demo

GalleryView - display a photo gallery with slideshow functionality. Clicking on a frame will jump to that photo, and the overlay caption for each photo contains links to the full image. Demo

NotesForLightBox - a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

The current functionalities are:
• Rounded corners light box
• Navigation with buttons
• Real slide show with progress bar

GallerificPlus – inspired by Trent Foley’s Gallerific plugin, and Leandro Vieira Pinho’s jQuery LightBox plugin. The concept from the plugin originated from a client project that required a smooth jQuery gallery with lightbox functionality.

We forgot the one on our own chicago website design page. Do you have any plugins to add? Leave your recommendations in the comments below.

Related Articles:

How To: Build a Simple RSS Reader with JQuery

Top 10 WordPress CMS Plugins

jQuery Intellisense in VS 2008

Easy jQuery Pull Quotes

jQuery Content Slider Tutorial

jQuery Slide Out Drawer Effect

http://blog.lib.umn.edu/

Here at Blueprint Design we have been trying to figure out which WordPress Twitter plugins we should use to integrate our twitter account. Here are the results of our research. Look at the end of this post to see what we picked to use. Please note all of these plugins are compatible up to WordPress 2.7.

1. Twitter Tools - This plugin creates an integration between your WordPress blog and your Twitter account. Pull your tweets into your blog and create new tweets on blog posts and from within WordPress. Alternative versions by other contributors: Kevin De Mulder: TwitterComments – updates Twitter when a comment is posted on your blog. Jonathan Dingman: Twitter updater with support for tinyurl. Ceritium: Twitter updater that uses short url with your domain name. James Cridland: Bugfix for Twitter updater if it doesn’t work for you.
2. Twitter for WordPress - Twitter for WordPress displays yours latest tweets in your WordPress blog. Features: Simply, Customizable, Widget ready, Uses WordPress resources (no extra files needed), No options page (yes, it’s a feature), Detects URLs, e-mail address and @username replies, Multiple widgets (Thanks to Michael Feichtinger)
3. Twitter Updater - The Twitter Updater automatically sends a Twitter status update to your Twitter account when you create, publish, or edit your WordPress post. You can specify the text for the updates, and also have the option to turn the auto update on/off for the different post actions in the admin panel.
4. Tweetsuite - TweetSuite adds a server side fully-featured TweetBacks service, complete with a Digg-style “Tweet This” button at the top of each post, a “Retweet This” button for each TweetBack, widgets for your sidebar, and the ability to automatically update Twitter with your latest blog entries.The self-explanatory sidebar widgets (you can customize which ones you want to display) include a Recently Tweeted widget, My Last-Tweets widget, Most-Tweeted widget, and My-Favorited Tweets Widget. That’s a lot of widgets, and they all serve very different, but useful purposes for super-tweeters who want to easily display relevant Twitter content to blog visitors. My personal favorite is the Most-Tweeted widget, which works in the same way as standard Popular Posts widgets, displaying your blog entries that get the most Twitter love in your sidebar. Source
5. WP Twitip ID - This plugin takes the pain out of adding another field to your comment form for users to enter their twitter username to be displayed as a link to follow them via their twitter page. WP Twitip ID functionality: Adds an extra field to the comment form for user to enter their twitter username, Echo out the twitter id associated with the comment being displayed, Echo out a html link pointing to the users twitter page using “Click Here To Follow Me On Twitter”, Display link as an image, Ouput just the @ username, Return the twitter id as a variable to be used by php, Display html before the extra field, Display html after the extra field, Add a class name to the extra field
6. Official Twitter Widget - Official Flash or HTML javascript codes that display badges showing what you are posting on Twitter. Available directly through the twitter site.
7. Twitthis - TwitThis is an easy way for people to send Twitter messages about your blog post or website. When visitors to your website click on the TwitThis button or link, it takes the URL of the webpage and creates a shorter URL using TinyURL. Then visitors can send this shortened URL and a description of the web page to all of their friends on Twitter.
8. Twitt-Twoo - Twitt-Twoo is a simple little plugin that will allow you to update your Twitter status right from your blog’s sidebar. AJAX takes cares of the hard work, and means that your page doens’t even have to reload, allowing for quick and easy status updates.”This is definitely the most aesthetically-pleasing Twitter plugin for WP to date, but it’s a shame I can’t use it as my host is running PHP4 not 5!”
9. Sociable - Sociable is a plugin which adds social media buttons to your posts, and does so easily, and beautifully.
10. Lifestream - Lifestream displays your social feeds and photos much like you would see it on many of the social networking sites. Features: Unlimited number of feeds. Stores entire feed history, not just the last week or two. Extendable via a base PHP class. Easily add your own feed types with very little PHP code. Customizable display using stylesheets. Allows grouping of events to cutback on the daily feed spam. Localization ready! (Email us translations) Daily digest available to summarize your activities. Efficient! Built on scalable database structures so it won’t bog down your website. View a live demo of LifeStream.
11. Twitme – Lets you ignore posts in a given category so that if you import posts to a special category so it would not flood Twitter. This new option also allows you to have one category on your blog lets say “Twitter friends” and you could tell Twitme to dont send posts from all the other categorys except those in “Twitter friends”. In that case you would mark all the categories to disallow except the “Twitter friends” category.
12. Twitpress - Submits a user definable tweet to your twitter account notifying any twitter followers or friends that a new blog entry has been published on your blog (or an existing published entry has been edited). Supports inclusion of a permalink to your blog posting in the tweet.
13. Birdfeeder - This plug-in serves one purpose and that is to tweet published posts. It doesn’t do anything other then tweet. It tweets in this format: [your message] [post title] [short url].
14. Tweetbacks - People are talking about your posts, and not only in the comments to your post. A lot of that conversation is happening on Twitter, and now, you can take that conversation right back to your blog! This plugin imports those tweets about your posts as comments. You can display them in between the other comments on your blog, or display them separately.
15. MyTwitter - MyTwitter allows users to display their recent Twitter status updates (tweets) on their WordPress site and update their status through the Options page. Includes customization options including number of recent twitters to display, formatting options, and stylesheets. It can be called as a function or used as a widget.
16. TwitURLs - Widget that displays currently popular links that have been tweeted.
17. Tweetroll - A smart badge that shows your Twitter details and who you’re following on Twitter. It shows your friends’ avatars and invites your readers to come and follow you too.
18. NewsTweet – Set a keyword or phrase and NewsTweet constantly pulls twitter posts containing that word or phrase. Useful for bands or anyone with a specific focus for their blog. NewsTweet uses AJAX and the Twitter API so your content stays fresh without the need to refresh the page.
19. SiteTweet – sitetweet allows webmasters to post immediate messages on Twitter about specific behaviors on their site. Usually installed on strategic pages, you can configure sitetweet to send a special message when a user performs a certain action on your site. You can use Twitter’s options for private posts in case you want to control who follows your login.
20. TweetMeme Button – easily allows your blog to be retweeted. The button also provides a current count of how many times your story has been retweeted throughout twitter.
21. Simple Twitter Link – simply returns a URL – this URL is a link to Twitter with your post/page URL within it. It even uses TinyURL to make the link passed to Twitter even more convenient.
22. Twitter Badge – Official javascript codes that display badges showing what you are posting on Twitter.

WordPress Twitter Plugins We Choose

23. Twitterfeed - Posts your blog updates to your twitter account. Login to twitterfeed using your OpenID, provide the URL for your blog RSS feed, and how often to post to Twitter.

24. Twitter Widget Pro - This twitter plugin is a sidebar widget that handles Twitter feeds. It’s true that you could just point and RSS widget at one of the Twitter feeds, but you end up with the whole tweet as a link, @replies don’t function, etc. Twitter Widget Pro properly handles twitter feeds, including @username and link parsing, feeds that include friends or just one user, and can even display profile images for the users. It’s set up like the RSS widgets, so you can have as many of as you want on your sidebars.

After long tedious testing here are the plugins we choose. Although there are many solutions like TwitterTools which integrate both the ability to show your tweets in a widget on our sidebar as well as posts from your blog to twitter we started by adding Twitterfeed to our site which is setup and configured from their site. After that since it was already setup we started searching for a plugin just to display our twitter feed. Twitter Widget Pro stood out from the rest for having a rss icon link to the feed as well as a direct title link (shown as “Follow Us On Twitter” on our page) to our twitter page. Installation was quick and simple and there you have it could you ask for anything more. Our needs were fairly simple. The other plugins above in the post are great for more advanced functionality.