Wordpress

Javascript / jQuery / Open Source / PHP / Programming / Wordpress — 2 Comments
1
Jul 09

A better way to use jQuery in WordPress Themes

Since a lot of people come to my blog looking for a way to add jQuery into their wordpress themes, it turns out that there is a better way to do it than the way that I previously blogged. You can include jQuery from the current WordPress install by calling:

wp_enqueue_script("jquery");

Followed by:

wp_head();

You can even use it to include the jQuery library that you are adding with your theme (so that it works after wordpress updates their library):

//First you have to get rid of the one that wordpress includes:
wp_deregister_script('jquery');
//Then you have to replace it with your own:
wp_register_script('jquery', (bloginfo("template_url")."/js/jquery.min-1.3.2.js"), false, '1.3.2');
//or you could use the one that google so kindly provides:
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
//Then enqueue it
wp_enqueue_script('jquery');
Javascript / jQuery / Open Source / Programming / Wordpress — 9 Comments
22
Jun 08

JQuery and WordPress

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)