WordPress.org

Ready to get started?Download WordPress

Forums

How do you get jQuery to work in WordPress? (6 posts)

  1. siegetheartist
    Member
    Posted 3 years ago #

    As I understand wordpress already loads a jquery library via a googles website by default in the functions.php file. So I know not to load another jquery library as it can result in problems

    I 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?

    I've been going nuts for the past week trying to figure out how to get jQuery to work in wordpress. Has anyone figured it out?

  2. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    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.

  3. siegetheartist
    Member
    Posted 3 years ago #

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

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

  4. siegetheartist
    Member
    Posted 3 years ago #

    Any ideas?

  5. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    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?

  6. tasty.donuts
    Member
    Posted 3 years ago #

    @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

Topic Closed

This topic has been closed to new replies.

About this Topic