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(); });


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.


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

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


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 );

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

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