How do you get jQuery to work in WordPress?

WordPress doesn’t use a Google CDN version of jQuery; rather, it bundles a version of jQuery (currently, version 1.6.1) in core.

To use jQuery on the front end (i.e. in your Theme), you need to add something like the following to functions.php:

function mytheme_enqueue_scripts() {
    if ( ! is_admin() ) {
        wp_enqueue_script( 'jquery' );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

If you can provide a bit more specific information about what you’re trying to do, we can provide more specific assistance.

I am trying to create a simple image gallery.

I have a bunch of anchor tags that need its browser behavior modified by jquery so that instead of opening up the image link in a new tab, it loads the picture in a container on the same page.

This is how my functions.php currently looks like

// Load jQuery
	if ( !is_admin() ) {
	   wp_deregister_script('jquery');
	   wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"), false);
	   wp_enqueue_script('jquery');
	}

	wp_register_script('portfolio_gallery_js', get_bloginfo('template_directory') . "/js/gallery.js");
	   wp_enqueue_script('portfolio_gallery_js');

And this is how my .js file looks like:

// JavaScript Document

jQuery(document).ready(function(){

	jQuery('.thumbnail_image a').click(function(e){
		e.preventDefault();

		jQuery('.thumbnail_image a').removeClass('selected');
		jQuery('.thumbnail_image a').children().css('opacity', '1');

		jQuery(this).addClass('selected');
		jQuery(this).children().css('opacity','.4');

		// Sets up variables based on linked thumbnails
		var photo_caption = jQuery(this).attr('title');
		var photo_fullsize = jQuery(this).attr('href');
		var photo_preview = photo_fullsize.replace('_fullsize', '_preview');

		jQuery('.selected_image').html('<a href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');

	});

});

I thought that the current functions.php is already getting jquery because when I do a “view source” on the page I can see it being loaded. It looks like this:

<link rel="alternate" type="application/rss+xml" title="Siege the Artist ? Feed" href="https://localhost:8888/feed/" />
<link rel="alternate" type="application/rss+xml" title="Siege the Artist ? Comments Feed" href="https://localhost:8888/comments/feed/" />
<link rel='stylesheet' id='admin-bar-css'  href='https://localhost:8888/wp-includes/css/admin-bar.css?ver=20110622' type='text/css' media='all' />
<script type='text/javascript' src='https://localhost:8888/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2'></script>
<script type='text/javascript' src='https://localhost:8888/wp-content/themes/siegetheartist/js/gallery.js?ver=3.2'></script>

What am I doing wrong to not let jquery work properly???

Any ideas?

What’s not working properly?

i.e. What do you expect to happen? And what is not happening that you expect to happen, or what is happening that you do not expect to happen?

@siegetheartist

know that prototype came before jquery so using “$” will run you into errors. Instead we should use jQuery(). And in no conflict mode we can use the shorthand $j.

So all that stuff is obvious. So what do I do when the library is loading properly (i did a view source and it loads fine), the .js file is using “jQuery()”, and I am not trying to call another jquery library?

Your code there, when you load the google version of jQuery you’re going to have to use the “$” again, not the “jQuery” — I think you are trying to run “conflict proof” code in a non-conflict-proofed framework. Ergo change all your “jQuery”s in the script itself to “$”s