jQuery functions to Wordpress child theme using enqueue

Question

My wordpress knowledge is pretty low and I am in desperate need of help on adding some jQuery functions to a wordpress child theme.

I basically want to add this effect to my front-page.php

I somewhat understand how to use the functions.php in order to enqueue my scripts. Here is what my functions.php file looks like

 <?php
function enqueue_scripts() {
    wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
    wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
    wp_register_script( 'js name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );


    wp_enqueue_script( 'global' );

    if ( is_page( 'front-page' ) ) { // example page
        wp_enqueue_script( 'js name', 'js name', 'js name' );
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
?>

As of right now it of course does not work.

Any help is much appreciated. Thanks.

Your js names shouldn't have a space in them. Also, no idea why you're registering the same script three times... — rnevius
– rnevius, Commented Oct 20, 2014 at 21:17
Give your enqueue_scripts function a unique name too. I'm assuming by not working you mean that the script calls don't show up in your source? And not just that the effect isn't working? — Arielle Lewis
– Arielle Lewis, Commented Oct 20, 2014 at 21:18
Sorry I should've made it a bit clearer, I'm not registering the same script. I have 3 scripts that all have different names with no spaces in the name. What I really don't get is how do I call the script in my front-page.php. This is the call for the script <script> jQuery(document).ready(function( $ ) { $('.counter').counterUp({ delay: 10, time: 1000 }); }); </script> — Vibrains
– Vibrains, Commented Oct 20, 2014 at 22:09

Tim · Accepted Answer · 2014-10-21 15:53:05Z

2

Try this:

function yourtheme_enqueue_scripts() {
    wp_register_script( 'js_name', get_template_directory_uri() . '/myfile.js', array( 'jquery' ), '1.0', true );
    wp_register_script( 'js_name_2', get_template_directory_uri() . '/myfile2.js', array( 'jquery' ), '1.0', true );
    wp_register_script( 'js_name_3', get_template_directory_uri() . '/myfile3.js', array( 'jquery' ), '1.0', true );


    if ( is_front_page() ) { 
        wp_enqueue_script( 'js_name' );
        wp_enqueue_script( 'js_name_2' );
        wp_enqueue_script( 'js_name_3' );
    }
}

add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );

In your themes root folder (same folder as functions.php), create new file called myfile.js. This is the file you refer to in the function above.

As you theme grows in size, it's better to organise your files. You can do this by creating subfolders, like this:

Create a folder named assets (name could be anything);
Inside assets create three new folders called js, css and images;
Put your files in the right folders;
Update your function to follow the right path to your folders;

e.g.

wp_register_script( 'js_name', get_template_directory_uri() . '/assets/js/myfile.js', array( 'jquery' ), '1.0', true );

Note: You don't have to close ?> in your functions.php.

edited Oct 21, 2014 at 15:53

answered Oct 20, 2014 at 21:25

Tim

1,7002 gold badges15 silver badges21 bronze badges

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

8 Comments

Vibrains Over a year ago

Thanks! How do I trigger the script from my front-page.php? This is the part where I'm most confused about. Where and how do I add this: <script> jQuery(document).ready(function( $ ) { $('.counter').counterUp({ delay: 10, time: 1000 }); }); </script>

Tim Over a year ago

In your themes root folder, make a file called myfile.js and add your jQeury to it without the script tags.

Vibrains Over a year ago

So do I also have to list myfile.js to the functions.php list?

Tim Over a year ago

You have to do both, see my updated answer. Do you have <?php wp_enqueue_script('jquery'); ?> right before <?php wp_head(); ?> in your themes header?

Vibrains Over a year ago

Tim thanks for all the help. I'm still having trouble with this. Is the js code supposed to start with jQuery(document).ready or can it start directly with just (function( $ ){ ? I have combined the 2 js files into one to make it more simple for me and here is how my code starts. This is working outside of wordpress.... (function( $ ){ "use strict"; $.fn.counterUp = function( options ) { I can only show you the beginning because it's too long to post here.

|

Collectives™ on Stack Overflow

jQuery functions to Wordpress child theme using enqueue

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related