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...!!