Tag Archives: javascript

 

Thickbox and jQuery in WordPress 2.8

The update was great! The new features in WordPress 2.8 are awesome! Most of my Twitter friends have updated to 2.8 and haven’t had a single issue. The new widgets area is so cool! Oh jeez, I’m so excited. For a full features list check out Version 2.8 section in the Codex.

Anyway, the only issue I had so far is the Thickbox usage. I’m not sure why it’s lost, but I’ve discovered it in the Quick Flickr Widget plugin when upgrading. The thickbox feature worked fine in 2.7 and 2.7.1. For an unknown reason, WordPress 2.8 doesn’t call the thickbox.js file through wp_enqueue_script. The other js libraries work fine though (prototype, scriptaculous). jQuery’s being called out too btw, cause it’s a dependency of Thickbox, but thickbox never shows up. This is actually weird. I hope I’m not the only one with this issue, cause it’s starting to feel bad ;)

I’ll submit a bug ticket to their Trac for 2.8.1, but until that here’s a temporary workaround:

global $wp_version;
if ($wp_version == "2.8") wp_enqueue_script("thickbox28", "/wp-includes/js/thickbox/thickbox.js", array("jquery"));
else wp_enqueue_script("thickbox");

Hope this helps. And don’t forget to inject the thickbox CSS and javascript settings in the wp_head action.

Update: Thickbox loads in the footer section in WordPress 2.8, that should be right before the closing body tag. And yes, loads of themes are lacking the wp_footer() function call. So, forget about the workaround, fix your themes first.

The 1.2.9 update of Quick Flickr Widget included the fix above, so 1.2.10 reverts that fix back to the standard way, sorry for the hassle ;)

Published 3 years ago with 9 comments tagged , , , , , , ,


 

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 ;)

Published 3 years ago with one comment tagged , , , ,


 

jQuery in WordPress: wp_enqueue_script

Did anybody notice the new sitemap I did for the blog? Top-right, in the black part. Click on sitemap. Smooth! For those of you who don’t know, that’s jQuery. Okay, seriously, this is my first ever jQuery script because I love Prototype. I don’t know why I did that, since I could have done it with Scriptaculous. So, about scripts in WordPress… You all heard about the function wp_enqueue_script in WordPress, yeah it’s cool, but what if I want to use both Prototype AND jQuery? Yeah, sounds stupid, but what about having two different plugins installed. One that uses Prototype, the second one jQuery. Compatibility?

Took me quite some time to figure out how to use jQuery $() function in WordPress though. I really think that the man who came up with this is a genius. There’s a synonym for the $() function in jQuery called jQuery(). WordPress’ers must have removed the $() function for Prototype compatibility.

jQuery(document).ready(function(){
	jQuery(".sitemap-click").click(function(){
		jQuery("#sitemap").fadeIn("slow");
		return false;
	});
});

So instead of $() we use jQuery(). Sweet.

Oh and I’m also glad that Skype on iPhone will be free and official!

Published 3 years ago with 10 comments tagged , , , , ,


 

Javascript: Element Suicide

A short tip on js suicide. Suicide? Well.. I mean have an element remove itself. I came across this a while ago: a ‘read more’ link which should set the display property of an element to ‘block’ and remove itself completely from the DOM. Plain javascript, no frameworks. Here’s what I came to:

this.parentNode.removeChild(this);

It doesn’t require an id, name or anything else. Furthermore it doesn’t even require its parent to have and id! This may be dumb, but I love it!

Published 3 years ago with 5 comments tagged , ,



newer posts → back to top