Adding JQuery using functions.php

  • fivedoor

    (@fivedoor)


    14 years, 2 months ago

    I have a signup form with some personalised JQuery styling I’ve been trying to add to my blog sidebar:

    It pretty simple: an image and sign up box. Without javascript working the signup box sits below the image. When it works the signupbox should be hidden and revealed when the image is clicked on.

    I’ve tested that it works outside of wordpress but having no joy trying to implement in wordpress.

    The components are:
    • Javascript for a mailchimp signup form : form.js
    • My bit of jquery that calls the slidetoggle function: signup3.js
    • The jquery library itself: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
    • The related css styling: style.css

    I’ve been looking at several useful resources to help:
    http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/
    http://themocracy.com/2010/01/more-wordpress-and-jquery/
    http://www.webtechwise.com/add-jquery-to-wordpress-blog-without-plugins/
    …but still no joy

    So far I’ve added the css styling to the theme style.css doc and got pasted the following into the functions.php: 

    function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);

		wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/signup3.js', array('jquery'), '1.0', true);

	wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

    (I haven’t included mailchimp’s form.js yet because 1) I want to concentrate on getting the jquery functionality working first and it should work with or without form.js 2) I’m not sure how to additionally include a reference to it in the above script anyway.

    I’ve wrapped my jquery in the signup3.js doc with (function($) { CODE IN HERE })(jQuery);

    Any advice would be really appreciated
    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator t-p

    (@t-p)

    14 years, 2 months ago

    If you’ll be using jQuery in your theme you need to “enqueue” it.

    Review:
    via wp_enqueue_script

    Thread Starter fivedoor

    (@fivedoor)

    14 years, 2 months ago

    Thanks for pointing me to the wp_enqueue_script page t-p.

    I have made some progress since reading though it.

    My code now reads:

    function my_scripts_method() {
	wp_deregister_script( 'jquery' );
    	wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');

	wp_enqueue_script(
		'custom_script',
		get_template_directory_uri() . '/js/signup3.js',
		array('jquery')
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

    But none of that worked till I went into my jquery doc- signup3.js and swapped out
    (function($) { CONTENT HERE })(jQuery);

    for

    jQuery(document).ready(function($) { CONTENT HERE });

    I’d thought I’d read elsewhere those were equivalent but apparently the code was executing before the DOM ready event when using the first one.

    What is blowing my tiny mind is that the signup form seems to be all working without even referencing the form.js doc. I’d referenced it in the header previously within script tags and since removed it. I wonder if it’s cached somewhere??

    Main problem solved anyway so thanks very much again t-p.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Adding JQuery using functions.php’ is closed to new replies.

Tags