Need help adding some JavaScript code into my wordpress theme

Question

Hello I have this script here and I need to put that in my current wordpress theme, but I am confused with the enqueue part. I know I have to save the hoverintent javascript in my themes library, do I also save the functions javascript in my themes library? Sorry if I did not clarify enough, comment if this is confusing please!

jsfiddle.net/ctLevz8L/59/

I fixed your JS Fiddle link and added the code from he fiddle — TResponse
– TResponse, Commented Feb 4, 2015 at 3:18
the easiest way and to do this would find the right js file to append this block of code you have is to fire up firebug. launch your wp site preferably in Firefox and launch firebug. While its loading open the sources dialog and look at the corresponding js files that are being loaded. select the file that you think is appropriate (theme related js files), locate where it is on the web server and open up the file and add your block of js code. — unixmiah
– unixmiah, Commented Feb 4, 2015 at 3:27
if you're doing these types of addition, i'd highly recommend you use git to source control your wp instance. — unixmiah
– unixmiah, Commented Feb 4, 2015 at 3:27

cpilko · Accepted Answer · 2015-02-04 04:18:11Z

1

Take the javascript from your fiddle and save that to wp-content/themes/mytheme/js/hoverintent.js.

Then, add the following to your theme's functions.php file:

function enqueue_hoverintent {
    //Add the script and jquery-ui to the generated header.
    wp_enqueue_script(
        'my_hoverintent', 
         get_stylesheet_directory_uri() . '/js/hoverintent.js', 
         array('jquery-ui-core')
    );

    //Add the jqueryui css file from Google's CDN since it isn't included with WP
    wp_enqueue_style (
        'googlecdn_jqueryui_style',
         'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css',
    );
}

add_action( 'wp_enqueue_scripts', 'enqueue_hoverintent' );

answered Feb 4, 2015 at 4:18

cpilko

11.9k2 gold badges33 silver badges46 bronze badges

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

1 Comment

cpilko Over a year ago

A wp_enqueue_ function called on the wp_enqueue_scripts action automagically adds this to the header in Wordpress.

Collectives™ on Stack Overflow

Need help adding some JavaScript code into my wordpress theme

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related