I’ve been working with jQuery quite a lot over the past week to get the commentluv settings page up and running and get the new commentluv plugin working as promised. It always amazes me at how incredibly easy it is to get it to do cool things with a web page.

Not just Ajax things, simple effects that allow you to take a page from a digital piece of paper to a digital pop-up book! Click here for an example..

Look at me!

Send me back up

Example explained

(you should have the jQuery library loaded in the head of your document, my wordpress already does this but if yours doesn’t you’ll have to put a line like this in the head of your page)

step 1: create a hidden div with an id of “first” and put something in it.

<div id="first" style="border: 1px solid #000">
<img><p style="color:white">Look at me!</p>

You can set the style inline with the div or your could add something like this to your style sheet

#first { display: none; } 

Something to note, an ID= is used if it is the ONLY one, a class= is when you have more than one. If you’d used class=”first” on the div above and had an entry in your stylesheet like this

.first { display: none; } 

then every div or img or span you gave a class of “first” to would be initially invisible.

step 2: Now you need to trigger an event to slide the div down. That’s as simple as putting a html link with an onclick attr and use a built in jQuery effect.
onclick is an attribute you can put on html objects like ‘a href’ links or images or other parts of your page. You put the javascript or function you want running in the quotes and whenever that object is clicked, the javascript gets run.

<a href="#">Click here for an example..</a>

Here, the javascript we want to run is jQuery(‘#first’).slideDown(1000);

It’s this little bit that does the magic.

Sometimes people use $ instead of the word jQuery which will work in most cases but here on WordPress there is the prototype library too and that uses the $ symbol for it’s calls so to be safe and get it to work without clashing with other libraries we use jQuery.

We call jQuery and tell it what we are targeting in the brackets. Because we are using an ID, we use ‘#first’. Had we used a class then we would put ‘.first’ and then we attach the slideDown event with a speed of 1000 ms by putting .slideDown (notice the captial ‘D’) on the end of the target and a speed 1000 in the brackets.

step 3: slide it back up
You should be able to guess how this was done, instead of using slideDown, we used slideUp

<a href="#">Send me back up</a></h2>

That’s it, easy peasy!

You can find out all the commands available to jQuery here

I had a truckload of hits come to this site last night for my Hello Stumbler plugin, so I thought I would share with you how to make a plugin so you can publish it, stumble it, digg it and bask in your coding glory as it generates hits to your site!

If you’re interested in making your own plugins you should read a book called Professional WordPress Plugin Development to learn how to do it yourself

I’ll use my Hello Stumbler plugin as a guide…(now re-done so you can see the code all proper like)

here’s the whole code

/*
Plugin Name: Hello Stumbler
Version: 1.1
Plugin URI: http://www.fiddyp.co.uk/2007/09/06/hello-stumbler-wordpress-plugin-for-stumbleupon-visitors/
Author: Andy Bailey
Author URI: http://www.fiddyp.co.uk
Description: Adds a message to request a thumbs up if post is seen via Stumbleupon. Just place hellostumbler(); in your single post template
*/

function hellostumbler(){
	global $id;
	$refer=$_SERVER['HTTP_REFERER'];
	$title=the_title('','',false);
	if ($refer=="http://www.stumbleupon.com/refer.php" && is_single()) {
		echo "<strong> Thanks for Stumble-ing here!<br />Please give me a <a><img>thumbs up!</a></strong>";
	}
}
?&gt;

Step 1:
Add the comments to the top of your php file so WordPress knows it’s a plugin..

/*
Plugin Name: Hello Stumbler
Version: 1.0
Plugin URI: http://www.fiddyp.co.uk/2007/09/06/hello-stumbler-wordpress-plugin-for-stumbleupon-visitors/
Author: Andy Bailey
Author URI: http://www.fiddyp.co.uk
Description: Adds a message to request a thumbs up if post is seen via Stumbleupon. Just place hellostumbler(); in your single post template
*/

The plugin URL is important, don’t be tempted to just put a link to the root of your site or blog, it’s really annoying when a plugin misbehaves and you click on the plugin name within wordpress only to be sent to a site where you can’t find the reference to the actual plugin.

With mine, I make the post about the plugin and then go back to the source code and add the permalink, zip, upload and finally edit the post with the link to the download.

Step 2: Call the function a unique name

function hellostumbler() {

Make sure your plugin has a unique name or it will misbehave if it’s used on a blog that has a duplicate named plugin.

Step 3: Add the code that does the magic..

global $id;
	$refer=$_SERVER['HTTP_REFERER'];
	$title=the_title('','',false);
	if ($refer=="http://www.stumbleupon.com/refer.php" && is_single()) {
		echo "<strong> Thanks for Stumble-ing here!<br />Please give me a <a><img>thumbs up!</a></strong>";
	}
}
?&gt;

This is a simple little bit of code, lets analyze it line by line…

$refer=$_SERVER['HTTP_REFERER'];

all this does is find out what page the surfer came from and store it in the string $refer

global $id;

this assigns the variable $id as a global so you can use the value it has been given by the WordPress code

$title=the_title('','',false);

this assigns the title of the post to the variable $title by using the internal function of WordPress, whatever is between the ” , ” is what gets put before and after the title of the post, the false bit means return the title instead of printing it out on the blog.

if ($refer=="http://www.stumbleupon.com/refer.php" && is_single()) {

a conditional check, if the value in $refer is the same as the one given (in this case the referring page of Stumbleupon) AND the post is a single post page (It’s better to Stumble a post on it’s own rather than when it’s on the front page). If BOTH cases are true, do whatever is in the ‘{‘ curly brackets

echo "<strong> Thanks for Stumble-ing here!<br />Please give me a <a><img>thumbs up!</a></strong>";

echo means output to the page, putting html in the quotes writes html direct to the page. Then it’s a simple case of formatting the HTML so it works with the variables declared earlier. I’ll break this line down piece by piece..

• echo "Thanks for Stumble-ing here! Please give me a 

  Just output some text for the surfer to see

• this is put into the source code so search engines and viewers of source can see where the next link comes from. Grabbed this from the Digg This plugin.

• <a href='http://www.stumbleupon.com/submit?url=".get_permalink($id)."&amp;title=$title'>

  At the end of ?url= I close the echo quotes and use a dot (.) operator to add on the next bit that php sees, the get_permalink($id) just gets the link to the current post (it’s why we needed to have $id as global, WordPress has already declared what $id is) then we dot (.) a bit more echo output on to the end of that for the title name $title and close the html quotes with a single quote, and close the html a href bit with a >

• <img>thumbs up!</a>";

  echo out html code for displaying the SU icon, close the img HTML and put what text to display as link and then close the html. Finally, close the echo quotes and add a semicolon (;) to tell php we have finsihed the command (echo).

• }
  }
  ?>

  close the “if” check, close the function and finally end the PHP

Once you’ve done all that, upload the plugin to your wp-content/plugins/ directory and activate it, if all goes well, you should be able to add the output to anywhere on your page by calling the function name with

 if (function_exists(hellostumbler)){hellostumbler();}

inserted into your template code.

This is what it looks like in action…

So, now there’s no reason why you can’t make a simple plugin to show a link to your facebook profile or add some code to show a Youtube video.

good luck, you’ll see that once you’ve made one plugin, you’ll want to make more and more!

You can download all the source code here : hello stumbler plugin

• Teach Yourself VISUALLY WordPress
• List Price: $29.99
• Price: $17.91
• Read Reviews

Here’s a little plugin I made for Stumbleupon visitors, I got the idea while playing with the Digg This plugin.

Hello Stumbler plugin will display a note at the top of your post (or wherever you put the call) when it detects that the person viewing the page came through the Stumbleupon button and ask them to give you a thumbs up.

Simply download the plugin, upload it to your plugins directory and activate it. Once you have done that, go to your single post template page and add the following command under the entry-content line (click image to see example).

?php if (function_exists(hellostumbler)) { hellostumbler();}?>

It’s as simple as that! I have tried it by showing the link if this blog is the referring page and it works, hopefully it will do the same when the post is stumbled upon with the toolbar button (it’ll take me ages to stumble and stumble until this post shows to truly test it, but it should work!).

If you came here via a stumble button press, please let me know if you can see the “thanks for stumble-ing” message at the top of the post. thanks!

Download the plugin here Hello Stumbler

[edit]To see a tutorial on how I made this plugin, see here: wordpress plugin sourcecode tutorial