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.

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: "<div class="flickr">",
		after_flickr_widget: "</div>",
// 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.

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.

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.

Blog Redesigned: Hi, This is the New Me!

Done! Wohooo! That seemed to take forever but my brand new WordPress theme is now complete and polished. Apperantly this is my first ever WordPress theme done from scratch. I started sketching like a week ago in Corel PaintShop Pro X2 (btw I don’t like to do Photoshop ’cause I’ve been using PaintShop Pro for around 6 years and got pretty much used to it. Looking forward to Adobe Fireworks CS4 though!). I got some good feedback on Twitter, DeviantArt and from some of my local friends, so I made some changes, sliced it up, wordpressized & widgetized and here we are!

I’ll try to get myself listed on minimalsites.com with this although the ones already listed seem much more minimal than this. Anyawys, I’ve also decided to open this theme up for public use and get it listed in the WordPress themes directory. That’ll be in a couple of months though – still need to polish some backend stuff.

Oh, and I’m also going to translate this into russian and use it on my russian blog, ’cause the current one is so lame and green and way too old.

By the way, I’ve also installed a couple of plugins for the Twitter & Flickr feeds. Check them out:

Twitter Widget by Sean Spalding
Flickr Widget by Donncha O Caoimh

Thank you all for your comments, suggestions and support. PS I joined Blip.fm and keep up with my 12seconds.tv channel. I’m also working on my very first video blog post. Peace!