Add custom Javascript to a WordPress plugin’s admin page and pass PHP variables to it

I’m almost a WordPress geek by now, but I confess I always had trouble including a Javascript file with my own custom scripts in it. And I always used ‘wp_register_script’ and ‘wp_enqueue_script’ the wrong way. What’s worse, I literally echoed out the path to the Javascript file by assigning it to a variable first. See how I did it:

<?php
//blah blah code code....
.
.
.
//This is where I want to use my Javascript file
                $pluginurl = dirname(plugin_basename(__FILE__)).'/';
		$helperscripts = WP_PLUGIN_URL.'/'.$pluginurl.'js/scripts.js';
		echo "<script src='".$jquery."' type='text/javascript' charset='utf-8'></script>
			<script src='".$helperscripts."' type='text/javascript' charset='utf-8'></script>";
?>

Raplets tutorial part 3 – Add metadata section to your Raplet

It’s time we make our Raplet configurable for everyone who wants to use it! Precisely, we are making it ready to be personalized… Not clear yet? Say we are making a Raplet for XYZ API which provides its users an API key for accessing the data. With a metadata section, users of our Raplet will be able to use their API key with our Raplet and hence access their data through the Raplet. And most important, the metadata section allows us to give our Raplet a firm identification by giving it a name, description, a logo etc. This information is also used when our Raplet is configured by Rapportive.

Raplets tutorial part 2 – Add Javascript to your Raplet

This is the 3rd article in the series of my articles on Raplet development and I assume you followed my previous articles on Raplet development before reading this one. If you want to know what Raplets are and start making your first Raplet then I suggest you read my previous posts:

1. Building Raplets – Get started from here!
2. Raplets tutorial part 1 – ‘Hello World’

In this article, we’ll see how we add Javascript to our Raplet to make it more jazzy! I assume you followed my previous posts on Raplet development and have the ‘Hello World’ Raplet running in you Gmail inbox. Cuz we’ll be using the same example to continue making it better with jQuery.

Raplets tutorial part 1 – ‘Hello World’

In this post we’ll actually start playing around with Raplets by making our first Raplet, the ‘Hello World’ Raplet. If you don’t know what Raplets are, then I suggest you read my previous post which will give you an introduction of Raplets.

Create a file ‘raplet.php’ with your favorite editor and save it in a folder of your choice in your root directory (I’m on a windows machine, so my root directory is ‘C:/wamp/www/’ and I’m naming my folder as ‘Raplet’). This is the main raplet file. It accepts the requests and (optionally calls out other functions/files for processing that data) sends the responses.