Functions.php in Child Theme - load JS

Question

My theme uses this function to load Javascript and CSS

function aitEnqueueScriptsAndStyles()
{
    // just shortcuts
    $s = THEME_CSS_URL;
    $j = THEME_JS_URL;

    aitAddStyles(array(
        'ait-jquery-prettyPhoto'  => array('file' => "$s/prettyPhoto.css"),
        'ait-jquery-fancybox'     => array('file' => "$s/fancybox/jquery.fancybox-1.3.4.css"),
        'ait-jquery-hover-zoom'   => array('file' => "$s/hoverZoom.css"),
        'ait-jquery-fancycheckbox'=> array('file' => "$s/jquery.fancycheckbox.min.css"),
        'jquery-ui-css'           => array('file' => "$s/jquery-ui-1.10.1.custom.min.css"),
    ));

    aitAddScripts(array(
        'jquery-ui-tabs'              => true,
        'jquery-ui-accordion'         => true,
        'jquery-ui-autocomplete'      => true,
        'jquery-ui-slider'            => true,
        'ait-jquery-fancycheckbox'    => array('file' => "$j/libs/jquery.fancycheckbox.min.js", 'deps' => array('jquery')),
        'ait-jquery-html5placeholder' => array('file' => "$j/libs/jquery.simpleplaceholder.js", 'deps' => array('jquery')),
        'ait-googlemaps-api'          => array('file' => 'http://maps.google.com/maps/api/js?sensor=false&language=en', 'deps' => array('jquery')),
        'ait-jquery-gmap3-label'      => array('file' => "$j/libs/gmap3.infobox.js", 'deps' => array('jquery')),
        'ait-jquery-gmap3'            => array('file' => "$j/libs/gmap3.min.js", 'deps' => array('jquery')),
        'ait-jquery-infieldlabel'     => array('file' => "$j/libs/jquery.infieldlabel.js", 'deps' => array('jquery')),
        'ait-jquery-prettyPhoto'      => array('file' => "$j/libs/jquery.prettyPhoto.js", 'deps' => array('jquery')),
        'ait-jquery-fancybox'         => array('file' => "$j/libs/jquery.fancybox-1.3.4.js", 'deps' => array('jquery')),
        'ait-jquery-easing'           => array('file' => "$j/libs/jquery.easing-1.3.min.js", 'deps' => array('jquery')),
        'ait-jquery-nicescroll'       => array('file' => "$j/libs/jquery.nicescroll.min.js", 'deps' => array('jquery')),
        'ait-jquery-quicksand'        => array('file' => "$j/libs/jquery.quicksand.js", 'deps' => array('jquery')),
        'ait-jquery-hover-zoom'       => array('file' => "$j/libs/hover.zoom.js", 'deps' => array('jquery')),
        'ait-jquery-finished-typing'  => array('file' => "$j/libs/jquery.finishedTyping.js", 'deps' => array('jquery')),
        'ait-jquery-jcarousel'        => array('file' => "$j/libs/jquery.jcarousel.min.js", 'deps' => array('jquery')),
        'ait-spin-ajax-loader'        => array('file' => "$j/libs/spin.min.js"),
        'ait-modernizr-touch'         => array('file' => "$j/libs/modernizr.touch.js"),
        'ait-gridgallery'             => array('file' => "$j/gridgallery.js", 'deps' => array('jquery')),
        'ait-rating'                  => array('file' => "$j/rating.js", 'deps' => array('jquery')),
        'ait-script'                  => array('file' => "$j/script.js", 'deps' => array('jquery')),

    ));

    wp_localize_script( 'ait-script', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'ajaxnonce' => wp_create_nonce('ajax-nonce') ) );
}
add_action('wp_enqueue_scripts', 'aitEnqueueScriptsAndStyles');

I am using a child theme and I was wondering how can I load additional Javascript in the functions.php inside the child theme.

The reason for using this is that any changes i make to the code above will be overwritten in the next update.

Answer 1

I also working on ait theme template,

If you want to add new css & js file into child theme so u first create function.php file in child theme directory & after that u can write following code...

<?php 

define('CHILD_THEME_DIR', get_bloginfo(stylesheet_directory));
 /* this is my child theme css  folder */
define('CHILD_THEME_CSS_DIR', CHILD_THEME_DIR . '/assets/css'); 
/* this is my child theme js folder */
define('CHILD_THEME_JS_URL', CHILD_THEME_DIR . '/assets/js');
define('CHILD_THEME_LIB_DIR', CHILD_THEME_DIR . '/libraries');
define('CHILD_THEME_IMG_URL', CHILD_THEME_DIR . '/assets/img');
define('CHILD_THEME_FONTS_DIR', CHILD_THEME_DIR . '/assets/fonts');

function mychildScriptsAndStyles()
{
    $css = CHILD_THEME_CSS_DIR;
    $jj = CHILD_THEME_JS_URL;
    $lib = CHILD_THEME_LIB_DIR;

aitAddStyles(array(
        'bootstrap-min'     => array('file' => "$css/bootstrap.min.css"),
        'chosen-min'        => array('file' => "$lib/chosen/chosen.min.css"),
        'pictopro-outline'  => array('file' => "$lib/pictopro-outline/pictopro-outline.css"),
        'pictopro-normal'   => array('file' => "$lib/pictopro-normal/pictopro-normal.css"),
        'colorbox'          => array('file' => "$lib/colorbox/colorbox.css"),

        'carat-css'         => array('file' => "$css/carat.css"),
    ));

    aitAddScripts(array(
        'jquery'            => array('file' => "$jj/jquery.js"),
        'jquery-ui'         => array('file' => "$jj/jquery.ui.js"),
        'jquery-migrate'    => array('file' => "code.jquery.com/jquery-migrate-1.2.1.js", 'deps' => array('jquery')),
        'bootstrap'         => array('file' => "$jj/bootstrap.js"),
        'cycle'             => array('file' => "$jj/cycle.js"),
        'carat'             => array('file' => "$jj/carat.js"),
        'ezmark'            => array('file' => "$lib/ezMark/js/jquery.ezmark.js"),
        'jquery-slider'     => array('file' => "$lib/jslider/bin/jquery.slider.min.js"),
        'colorbox'          => array('file' => "$lib/colorbox/jquery.colorbox-min.js"),
        'chosen'            => array('file' => "$lib/chosen/chosen.jquery.js"),
        'easytabs'          => array('file' => "$lib/easy-tabs/lib/jquery.easytabs.min.js"),
    ));


}

add_action('wp_enqueue_scripts', 'mychildScriptsAndStyles');

Add this in function.php. Hope It will be helpful...!!