How to Load Custom Javascript Script in WordPress

While there are a number of articles out there showing you how to properly load jquery in WordPress, none of them seem to show you how to load a custom javascript script in WordPress.

This is how you load custom javascript / jquery script into WordPress in Genesis.

/** Load the scripts at the bottom of the page to increase performance and user experience 
This is Genesis specific and may vary depending on WordPress theming framework*/
add_action('genesis_after_footer', 'load_custom_js');

function load_custom_js() {
//Only load the scripts on non-admin pages
if (!is_admin()){
	//Load jquery core from Jquery.com directly
	wp_enqueue_script('my_jquery','http://code.jquery.com/jquery-1.10.1.min.js',array( 'jquery' ));		
	//Load custom jquery or js script from child theme folder 
	wp_enqueue_script('my_custom_js',get_stylesheet_directory_uri().'/js/customjs.js',array( 'jquery' ));
	}
}

The most important line in the above code snippet is:
wp_enqueue_script(‘my_custom_js’,get_stylesheet_directory_uri().’/js/customjs.js’,array( ‘jquery’ ));

my_custom_js is the script handler. Could call it anything.

get_stylesheet_directory_uri() is an inbuilt WP function that gets the file url of your stylesheet directory, which is especially useful in the Genesis framework as this gets your child theme directory file url.

js/customjs.js is the name of your custom js script and the folder it is stored in (js).

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值