Adding jquery to wordpress site

Question

I am very new to working with jquery, so I am sorry if this is very basic stuff.

I have been playing around on jsfiddle and got some jquery to do what I want it to (add a class to parent when you hover over a child), but when I take the code and try to add it to my wordpress site, it just will not work.

This is my code I am trying to add:

$('.explore > .country').hover(function() {
$(this).parent().toggleClass('hover');
})

I know wordpress doesn't like $ for function and I tried this:

<script type="text/javascript">
(function($) {
$('.explore > .country').hover(function() {
$(this).parent().toggleClass('hover');
})
})(jQuery);
</script>

Here is also a link to the jsfiddle

Any help would be greatly appreciated.

Hastig Zusammenstellen · Accepted Answer · 2016-08-24 07:18:48Z

2

Be sure to enqueue jQuery first. It comes built in to wordpress but doesn't come pre-activated.

Search your theme's function.php file for "wp_enqueue", if there is a function there already enqueuing scripts add the following line to it..

wp_enqueue_script( 'jquery' );

Otherwise, create your own enqueue scripts function..

// function to enabled (enqueue) scripts in wordpress
function enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

update

Alternatively

You can create a js file with your custom code and enqueue for use site wide.

Create a file named mycustomfunctions.js

Put this in it..

// describe function here
jQuery(function() {
    jQuery('.explore > .country').hover(function() {
        jQuery(this).parent().toggleClass('hover');
    })
    jQuery('.explore > .community').hover(function() {
        jQuery(this).parent().toggleClass('hover2');
    })
});

In your child theme root folder create a new folder, name it 'js'
Put mycustomfunctions.js in js folder

Edit your child themes functions.php to include..

// function to enable (enqueue) scripts in wordpress
function enqueue_scripts() {
    wp_enqueue_script('mycustomfunctions', get_stylesheet_directory_uri() . '/js/mycustomfunctions.js', array('jquery') );
}
add_action('wp_enqueue_scripts','enqueue_scripts');

note - no need to enqueue jquery separately as we've listed it as a dependency for mycustomfunctions (see array), wordpress will enqueue jquery automatically because of this required dependency.

edited Aug 24, 2016 at 7:18

answered Aug 23, 2016 at 23:14

Hastig Zusammenstellen

4,4503 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

theamountof Over a year ago

I created a functions.php in my child theme and added this, but still did not fix the problem. Also tried what Monica suggested by replacing the $ with 'jQuery' and that did not fix it either.

Hastig Zusammenstellen Over a year ago

Regarding no conflict here's how to write it using jQuery instead of $. Both hovers are wrapped in a document ready function. jsfiddle.net/Hastig/0n5dxee1/2

Hastig Zusammenstellen Over a year ago

Also, are you sure you were in the right theme folder? Functions.php is a pretty common file, found in most themes.

Community · Accepted Answer · 2017-05-23 10:33:45Z

1

try this answer : https://stackoverflow.com/a/21949790/4426282

using $ will return undefined, try jQuery instead.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Aug 23, 2016 at 23:19

monikapatelIT

1,00716 silver badges27 bronze badges

Comments

Joshua · Accepted Answer · 2016-08-23 23:09:45Z

0

If I understand your question correctly all you have to do is put:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

between the two <head> tags

answered Aug 23, 2016 at 23:09

Joshua

82011 silver badges25 bronze badges

Comments

Purvik Dhorajiya · Accepted Answer · 2016-08-24 05:59:24Z

0

function myCustomScript() { ?>
<script type="text/javascript">
jQuery( document ).ready(function() {
    jQuery('.explore > .country').hover(function() {
        jQuery(this).parent().toggleClass('hover');
    })
});
</script>
<?php
}
add_action( 'wp_footer', 'myCustomScript' );

Would you please add above code in your functions.php ?

answered Aug 24, 2016 at 5:59

Purvik Dhorajiya

4,8903 gold badges37 silver badges45 bronze badges

Collectives™ on Stack Overflow

Adding jquery to wordpress site

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related