Squirrel HackerI have come forward in time from the year 1986 to share this with you

Update: New Post – A better way to use jQuery in WordPress Themes

I was making a new template for my site. I was originally going to make it all curvy and web 2.0… but I figured, since I am not the best at the visual design of things I went with this. I like it.

While I was making it, I was looking at using jQuery to do the curvy web 2.0 things. Now, if you have not used jQuery before, you should check it out, it is simple and there are a million plugins for it. There is one for corners (which I was going to use), there is a lightbox one, so on and so forth. It is also really small, the version included with the latest wordpress install is 1.2.3 which is about 30 KB. The latest version is 1.2.6.

Since I was not going to make it all curvy I decided to add an easter egg to my blog using jQuery.

At first I kept getting the error:

Error: $ is not a function
Source File: http://localhost/blog/
Line: 22

That is apparently because WordPress uses a lot of different javascript libraries and apparently they have done a bit of rewritting. instead of using the $(“”) to start your jQuery javascript, you use jQuery(“”). This took a bit of searching and testing to find out, but in the end I got that figured out. It was then on to the code to make the easter egg work. Here it is:

jQuery(document).ready(function(){
 jQuery("h4").click(function(){
  jQuery(this).fadeOut("fast", function() {
      jQuery(this).html("π").fadeIn("fast");
      });
  });
});

Step by step:
1 -> Load this when the page loads
2 -> Whenever a h4 is clicked (there is only one here so its fine to do it this way)
3 -> Fade out what we clicked on fast
4 -> fade in pi

Nice and easy (and it looks cool too). This could be put to much more practical uses like translations or possibly a slide show of images (fadeIn pause fadeOut, fadeIn next image). For now it will just be a small easter egg that I added to my site.

Oh, and apparently the google syntax highliter has decided not to work in this version of wordpress so, I am now using wp-syntax instead.

Oh ya… and you have to have these lines in your code before you call any of the jQuery functions.

<script src="./wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
<script src="./wp-includes/js/jquery/jquery.corner.js" type="text/javascript"><!--mce:1--></script>

(PI is an inside-ish joke by the way)

Edit: You do not need the jquery.corner.js part… unless you want fancy corners.. you would also have to download it too… if not you will get an error.

Ok, I think there is a bug somewhere, if you click through using the page links, and do a search the pi thing will work. If you rely on the cache (go to the same page by clicking on the title link of a post/page) it does not work at all. (At least in FF3)