Categories
javascript jquery php wordpress

WordPress conditionally load a minified script

I have a script that I only want to load up when someone is on a particular page

I load my scripts like this Functions.php:

function my_assets() {
wp_enqueue_script( 'footerlinks', get_stylesheet_directory_uri() . '/js/footerlinks.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'gallery', get_stylesheet_directory_uri() . '/js/gallery.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'about', get_stylesheet_directory_uri() . '/js/about.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'legal', get_stylesheet_directory_uri() . '/js/legal.js', array( 'jquery' ), '1.0', true );
if ( !is_page( 490 ) ) {
wp_dequeue_script('about');
}
if ( !is_page( 29804 ) ) {
wp_dequeue_script('legal');
}
if ( !is_page( 24574 ) ) {
wp_dequeue_script('gallery');
}
}
add_action( 'wp_enqueue_scripts', 'my_assets' );

This code works, but I’m also minifying and concatenating the scripts. When I do this part, the script doesn’t become work, but it’s still loaded up in the page without any errors.

Here is the script legal.js:

<!-- Script for making legal blurbs clickable to display one at a time -->
jQuery(document).ready(function(){
jQuery(".legaltab").hide();
console.log("legal script running");
var tprivacy = document.createAttribute("target");
var ttc = document.createAttribute("target");
var tdisclaimer = document.createAttribute("target");
var bprivacy = document.getElementById("bprivacy");
tprivacy.value = "sprivacy";
bprivacy.setAttributeNode(tprivacy);
var btc = document.getElementById("btc");
ttc.value = "stc";
btc.setAttributeNode(ttc);
var bdisclaimer = document.getElementById("bdisclaimer");
tdisclaimer.value = "sdisclaimer";
bdisclaimer.setAttributeNode(tdisclaimer);
jQuery(".legalblurb").click(function(){
console.log("inside link button function");
jQuery(".legaltab").hide();
jQuery("#"+ jQuery(this).attr("target") ).show();
});
});

Am I loading them up incorrectly? Some of the other questions discuss gulp or grunt, but I’m not sure if they are the same thing.

You have errors in your JS. For example in legal.js you have:

<!-- Script for making legal blurbs clickable to display one at a time -->

The correct way to add comments in Javascript is

// Script for making legal blurbs clickable to display one at a time

or

/* Script for making legal blurbs clickable to display one at a time */

I had a look at the compiled JS you have on the site and saw another bad commenting in the JS:

<!--Script for footer links that take you everywhere else-->

I would recommend you to use JavaScript strict mode and test your code using JSHint. That would drastically reduce minification errors.

A cleaned up version of legal.js would be:

/*globals jQuery*/
/* Script for making legal blurbs clickable to display one at a time */
jQuery(document).ready(function($){
'use strict';
$(".legaltab").hide();
console.log("legal script running");
var tprivacy = document.createAttribute("target");
var ttc = document.createAttribute("target");
var tdisclaimer = document.createAttribute("target");
var bprivacy = document.getElementById("bprivacy");
tprivacy.value = "sprivacy";
bprivacy.setAttributeNode(tprivacy);
var btc = document.getElementById("btc");
ttc.value = "stc";
btc.setAttributeNode(ttc);
var bdisclaimer = document.getElementById("bdisclaimer");
tdisclaimer.value = "sdisclaimer";
bdisclaimer.setAttributeNode(tdisclaimer);
$(".legalblurb").click(function(){
console.log("inside link button function");
$(".legaltab").hide();
$("#"+ $(this).attr("target") ).show();
});
});