JavaScript is one of the most popular coding languages around. It\u2019s incredibly useful when building a website or application, and there are countless JavaScript libraries and frameworks to tap into, each readily available to speed up and streamline the development process.<\/p>\n\n\n\n
With WordPress, there are a lot of moving parts that come together to make the site work. Various plugins, themes, and the core all utilize their own code, built independently of each other. If developers all do things their own way, we will inevitably run into conflicts, causing the site, at best, not to function efficiently and, at worst, break altogether.<\/p>\n\n\n\n
To help alleviate these issues in relation to JavaScript, there are some best practices to follow when implementing it in your projects. Here\u2019s how to best leverage JavaScript when building WordPress themes and plugins.<\/p>\n\n\n\n
If you are building a static site with vanilla HTML\/CSS, you can simply use JavaScript by loading it straight onto the page or typing it right inline, such as the following:<\/p>\n\n\n
[javascript]<\/p>\n
<script src=”http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.5\/jquery.min.js”><\/script><\/p>\n
<script>
\n$(document).ready(function() {
\n$(“#hoverTrig”).hover(function () {
\n$(“#subNav”).stop();
\n$(“#subNav”).slideToggle(400,function() {
\nif ($(‘#subNav’).height() < 210) {
\n$(“#subNav”).css({height:210})
\n};
\n});
\n});
\n});
\n<\/script><\/p>\n
[\/javascript]<\/p>\n\n\n\n
In WordPress, however, there is a different way to do it. To ensure that the same assets aren\u2019t being loaded multiple times and that libraries and files are loaded in the correct order, WordPress gives us two functions to use. To register, or essentially make WordPress aware of the script\u2019s existence, use [javascript]<\/p>\n wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );<\/p>\n wp_register_script( $handle, $src, $deps, $ver, $in_footer );<\/p>\n [\/javascript]<\/p>\n\n\n\n The parameters for each are the same. Let\u2019s walk through them quickly.<\/p>\n\n\n\n Check out the WordPress Code Reference<\/a> for more information on the parameters for wp_register_script<\/a> and wp_enqueue_script<\/a>, and to see how the functions interact together.<\/p>\n\n\n\n To ensure your scripts are ready and loaded on the front-end of your site, you\u2019ll also want to use the When you use this hook, conditional logic can be incorporated to specify which pages the script should or should not be loaded on. In the following example, the [php]<\/p>\n function yourtheme_load_scripts() {<\/p>\n if ( is_page_template(‘event.php’) ) {<\/p>\n wp_enqueue_script( ‘yourtheme_event’, get_template_directory_uri() . ‘\/js\/event.js’, ‘yourtheme_custom’ );<\/p>\n }<\/p>\n wp_enqueue_script( ‘yourtheme_custom’, get_template_directory_uri() . ‘\/js\/custom.js’);<\/p>\n }<\/p>\n add_action( ‘wp_enqueue_scripts’, ‘yourtheme_load_scripts’ );<\/p>\n [\/php]<\/p>\n\n\n\n Another important consideration when writing your own JavaScript for use in WordPress is to make your function names notably unique. If you name a function So, just like in a classroom with two students each named Sally, you\u2019ll want to make sure there\u2019s a way to differentiate between the two. You can either use a common prefix on functions that are unique, something like [php]<\/p>\n var yourTheme = {<\/p>\n var loadEvent = function() {<\/p>\n \/\/ do something<\/p>\n }<\/p>\n }<\/p>\n \/\/ call the function<\/p>\n yourTheme.loadEvent();<\/p>\n [\/php]<\/p>\n\n\n\n As we wrap up, we want to make a quick note about jQuery. For a long time, many developers have struggled with implementing existing jQuery plugins in custom themes. WordPress comes with jQuery loaded out-of-the-box, so why weren\u2019t the jQuery plugins working? <\/p>\n\n\n\n Well, WordPress loads jQuery in no conflict mode<\/a>, meaning that using the widely adopted JavaScript is one of the most popular coding languages around. It\u2019s incredibly useful when building a website or application, and there are countless JavaScript libraries and frameworks to tap into, each readily available to speed up and streamline the development process. With WordPress, there are a lot of moving parts that come together to make…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":16112,"template":"","resource-topic":[],"resource-role":[],"resource-type":[916],"class_list":["post-139678","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nwp_register_script()<\/code>. To load a script onto a page, use wp_enqueue_script()<\/code>.<\/p>\n\n\n\n
$handle<\/code> – This is the name of the script and should be unique. It\u2019s not necessarily the filename, although I find it helpful to sync up the handle and filename for maintainability.<\/li>\n\n\n\n$src <\/code>– The path and filename where the script is located.<\/li>\n\n\n\n$deps<\/code> – The handles for any scripts this file is dependant on. It should be an array and is optional.<\/li>\n\n\n\n$ver<\/code> – The version number of the script.<\/li>\n\n\n\n$in_footer<\/code> – This is a true\/false value, determining if the script should be loaded in the \u201cfooter\u201d before the closing <\/body><\/code> tag of the page (true) or before the closing <\/head><\/code> tag (false).<\/li>\n<\/ul>\n\n\n\nUsing a Hook to Register and Enqueue<\/h3>\n\n\n\n
wp_enqueue_scripts<\/code> hook. This hook is fired when WordPress loads styles and scripts. By using it, you are making sure the scripts you want included are considered anytime WordPress loads scripts or styles. <\/p>\n\n\n\nyourtheme_event<\/code> script is only being loaded on pages using the event.php template while the yourtheme_custom<\/code> script is being loaded on every page.<\/p>\n\n\nKeeping Things Unique<\/h3>\n\n\n\n
loadEvent()<\/code> and another plugin also has a loadEvent()<\/code> function, you\u2019ll have some issues. <\/p>\n\n\n\nyourtheme_<\/code>, or you can nest your function inside another object and avoid exposing it to the global window object.<\/p>\n\n\nLet\u2019s Talk About jQuery<\/h3>\n\n\n\n
$<\/code> as an alias for jQuery doesn\u2019t work in WordPress. digwp.com has a nice article<\/a> on some options for how to work around this issue.<\/p>\n","protected":false},"excerpt":{"rendered":"