Javascript in WordPress: 2 Functions 2 Save Your Day

I’ve introduced Javascript mode in the latest update of Quick Flickr Widget (1.2.7) for WordPress, and I just wanted to give you a short advice about handling javascript code in your WordPress plugins.

Working with Javascript in WordPress

The wp_enqueue_script WordPress function helps you add javascript code to your head section, so you don’t have to mess up with the header.php file. One of the frequently asked questions is how do you get your plugin to load a javascript file that’s located in your plugin folder? Here’s the right way to do it:

$quick_flickr_plugin_url = trailingslashit(get_bloginfo('wpurl')).PLUGINDIR.'/'. dirname(plugin_basename(__FILE__));
wp_enqueue_script('quick_flickr_widget', $quick_flickr_plugin_url.'/quick_flickr_widget.js');

This should be in the init of your plugin (take a look at add_action).

Another good problem is passing your php variables to javascript. This is pretty simple with a WordPress function called wp_localize_script. Here’s a quick sample based on the flickr widget. Remember, we’re still in the init section.

wp_localize_script('quick_flickr_widget', 'FlickrOptions', $options);

You’ll get the $options variable output right before your javascript file in javascript format, like this:

<script type='text/javascript'>
/* <![CDATA[ */
	FlickrOptions = {
		title: "",
		view: "_m",
		before_flickr_widget: "&lt;div class=&quot;flickr&quot;&gt;",
		after_flickr_widget: "&lt;/div&gt;",
// and so on

This makes it W3C valid (using CDATA) and easy to retrieve from within your javascript file: alert(FlickrOptions.title). There you go, one more reason to love WordPress ;)

Quick Flickr Widget: Empowered by Thickbox

Finally, version 1.2.4 is public! Can you belive this? I managed to get Thickbox running with the widget! No, it wasn’t that difficult at all. Here are the two tricks:

In the plugin init:

	$options = get_option("pluginname");
	if ($options["thickbox"] == "checked")
	{
		wp_enqueue_script("thickbox");
		add_action("wp_head", "pluginname_thickbox_inject", 10);
	}

And the thickbox inject function:

function pluginname_thickbox_inject() {
    ?>
    <link rel="stylesheet" href="<?= get_option("siteurl"); ?>/<?= WPINC; ?>/js/thickbox/thickbox.css" type="text/css" media="screen" />
 
    <script type="text/javascript">
    var tb_pathToImage = "<?= get_option("siteurl"); ?>/<?= WPINC; ?>/js/thickbox/loadingAnimation.gif";
    var tb_closeImage = "<?= get_option("siteurl"); ?>/<?= WPINC; ?>/js/thickbox/tb-close.png"
    </script>
 
    <?php
}

That’s all. Then use Thickbox the ordinary way you would. Oh and don’t forget to check out the Quick Flickr Widget page for more info on the plugin and once again thank you for all your feedback. It really helps a lot!

Quick Flickr Widget and the Flickr API Services

Hope you remember the Quick Flickr Widget plugin for WordPress. Well, since version 1.2 I’ve changed the way it works. Prior to 1.2, as Donncha suggested in his Flickr plugin, I used a public Flickr RSS feed to display the items, using WordPress’ RSS functions to move around the feed. Anyways I thought that I couldn’t take the plugin far enough, so I decided to use the Flickr API Services which is way more extended.

It's Not Just a Photo Sharing Service

Still not sure about the consequences of sharing my Flickr API key. I’ve got a Flickr call for converting a Flickr screen name to a Flickr NSID which requires a valid API key. I thought that asking everyone to sign up for an API key would be a loss of plugin users so I provided my own key. Hope they don’t get me killed ;)

Now, to the user interface and experience. I’m not sure why, but some people are still confused about the new way and there are those, who cannot manage to find out their Flickr screen name (thinking that it’s their Flickr username or Yahoo ID). Anyways I hope to get this all sorted out and solved by 1.3 (maybe I should feed from Flickr by user e-mail?). Tiny bug in 1.2 was the inability to use a Flickr screen name with spaces. Thanks to Tung’s comments I sorted it all out by 1.2.1 – I had no idea people would use spaces in their screen names.

Now, for all the geeks out there. The Flickr API Explorer is the most fabulous thing that makes the Flickr API so easy to use. And the JSON Validator really helped me out there (I use JSON because I like it and also looking forward to adding some Javascript features to the plugin). So keep your comments and suggestions coming on the Quick Flickr Widget page.

Also, I’d like to recommend a book called Pro Web 2.0 Mashups which helped me out with Flickr API usage.

P.S. The Apps & Hats show launched on Friday 20th. The first episode is so cool. Girls with iPhones are so cute! Check them out: Apps & Hats – Your Quirky iPhone Application Review Show.

Quick Flickr Widget: Plugin update!

Hey I got some great news about my first wordpress plugin called Quick Flickr Widget. I applied to the WordPress Plugin Directory and guess what! I got hosted! They sent me an e-mail with all the necessary links. I quickly set up a valid readme file and uploaded everything to their plugins repository under version 1.0b. The plugin appeared in the directory in about 10 minutes, but there was no description, installation guide and FAQs. I figured out it’s because the readme file was called quick-flickr-widget.txt! Renamed that to readme.txt, made some minor changes and cleaned up my code in quick-flickr-widget.php and released the 1.0 version.

Plugin Development as a Hobby

Anyways, the old plugin page still remains valid and up to date, nevertheless here’s the official link at WordPress.org: Quick Flickr Widget.

I’ve also started to develop a new plugin called Related External Links. I hope it gets hosted by WordPress.org too.

Here are the screenshots:

 

WordPress Plugins: It’s Flickr Time!

Hi. I wrote a while ago on Twitter about starting the development of a WordPress plugin for displaying some Flickr photos in your sidebar. I finally finished coding and debugging the first part. It’s called Quick Flickr Widget. Here are some features:

• Easy to setup
• Up to 10 Flickr photos in your sidebar
• Fully customizable widget (editable before_widget, after_widget, before_item, after_item, etc.)
• You can pick the photos display size: thumbnail, square, small or medium

And here are the screenshots:

 

By the way I’m using it here on this blog to display my latest flickr photo, see? For more detailed description, changelog and download links, please visit the Quick Flickr Widget page.