How to add extra JavaScript via child-theme

Here we assume that you know how to use child-themes and you have already activated the child-theme provided with your package.

We want to add this piece of code to our wordpress theme:

$(':input[type=number]').on('mousewheel', function(e){ e.preventDefault(); });

Solution:

Here we can put our code into a separate file and load it at our pages.

1- make a new folder inside your child-theme named for example js

2- make a new file inside /js folder named my-scripts.js

3- put this code inside the my-scripts.js file.

(function($){

    //remove this after testing
    alert('your script is loaded');

    // your code here
    $(':input[type=number]').on('mousewheel', function(e){
        e.preventDefault();
    });

})(jQuery);

4- open up functions.php of your child-theme and enqueue your script inside toranj_child_latest_enqueue function, so your function will be like this:

function toranj_child_latest_enqueue(){

    wp_register_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css','1.0.0');
    wp_enqueue_style( 'child-theme-style');

    //add your scripts
    wp_register_script( 'my-child-script', get_stylesheet_directory_uri() . '/js/my-scripts.js', '1.0', true );
    wp_enqueue_script('my-child-script');

}
add_action("wp_enqueue_scripts", "toranj_child_latest_enqueue", 10000);

5- Save your work, upload changes and then refresh your page.