Help Wordpress

Blog about WordPress, plugins, themplates and more…
MENU
Home » Tutorials » Enqueue scripts in WP plugins. Single Load Only.

Enqueue scripts in WP plugins. Single Load Only.

slon
Enqueue scripts in WP plugins. Single Load Only.
5 (100%) 6 votes

In this post I want discuss one of the problems with WordPress plugins/themes – reconnecting javascript. Connecting the script several times leads to its re-execution, i.e. issue productivity suffers. In addition, this can lead to unpleasant side effects – for example, if a given script binds an action to a click on a certain element, when pressed this action will be executed several times.

That’s why WP developers recommend using the wp_enqueue_script function. It connects the JS file if it was not previously connected, i.e. you can call it several times, and the script will be inserted only once. But in practice, everything is not so rosy – I repeatedly met sites that downloaded the same script many times. Why is this happening? I can assume several reasons:

1 – direct connection between head tags.
The site owner reads the instruction for the script and does step-by-step what wrote.
The instructions usually say “Insert the <script> tag into the page header (between <head>’ and </head>)”.
From the point of view of the author of the script, everything is correct – he writes the instruction for all sites, and not specifically for WP.
But as a result, this js can be connected two or more times.

2 – use of low-quality or old themes and plugins.
I came across templates, and plug-ins, in which the files are connected via echo:
echo ‘<script> … </script>’;
Particular attention should be paid to templates downloaded from the sources other than the WP repository.

3 – using different IDs in wp_enqueue_script function.
The first parameter of the wp_enqueue_script function is $handle, it must be unique.
For example, you have two or more plugins that use fancybox, and both plugins use the wp_enqueue_script function:
the first one will have code such

wp_enqueue_script ('plugin_1_script', plugins_url ('/assets/fancybox/js/fancybox.js', __FILE__), array ('jquery'), '2.0', true);

and the second is about such

wp_enqueue_script ('plugin_2_script', plugins_url ('/assets/fancybox/js/fancybox.min.js', __FILE__), array ('jquery'), '2.0', true);

The authors of each of the plugins did everything correctly, but as a result, we will load the file js twice. Fancybox is specified for example only, a similar problem will be with any popular library.

How to avoid such duplication of scripts?
I think we can give the site owner the choice – need downloading the script or not.
Let him decide – and if he sees when viewing the html-code that a file is loaded twice, it should be possible to disable duplication.
How to achieve this? I’ll give an example for bootstrap.

Add to the plugin settings the option my_plugin_bootstrap_load:

function my_plugin_set_options() {
	add_option('my_plugin_bootstrap_load', 1);
}

Add in the settings of the plug-in the ability to change this option:

function my_plugin_options_page() {
	$myPluginBootstrapLoad	= get_option('my_plugin_bootstrap_load');

	if ( ! isset( $_REQUEST['myPluginBootstrapLoad'] ) )
		$_REQUEST['myPluginBootstrapLoad'] = false;

	if ( isset ($_REQUEST['settingsUpdated']) && $_REQUEST['settingsUpdated'] == true ){
		update_option('my_plugin_bootstrap_load', $_REQUEST['myPluginBootstrapLoad']);
		?>


<div class="updated">

<strong> <?php _e('Your settings are saved', 'my_plugin'); ?></strong>
</div>


		<?php
	}



<form method="post" action="<? echo $_SERVER['REQUEST_URI'];?>">
		<?php if ($_REQUEST['settingsUpdated']){ $selectBootstrapLoad = $_REQUEST['myPluginBootstrapLoad']; } else { $selectBootstrapLoad = $myPluginBootstrapLoad; } ?>
		<select name="myPluginBootstrapLoad">
<option value="1" <?php echo ($selectBootstrapLoad == 1) ? 'selected' : false ;?>><?php echo __('Load Bootstrap from the site', 'my_plugin'); ?></option>
<option value="0" <?php echo ($selectBootstrapLoad == 0) ? 'selected' : false ;?>><?php echo __('Don\'t load Bootstrap', 'my_plugin'); ?></option>
		</select>
	
		<input type="submit" name="settingsUpdated" class="button button-primary" value="<?php _e('Save Changes', 'my_plugin') ?>" />
	
	</form>



}

And enqueue Bootstrap, given the value of the option my_plugin_bootstrap_load:

if (get_option('my_plugin_bootstrap_load') == 1){
	function enqueue_external_files() {
		wp_enqueue_script( 'my-plugin-bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
		wp_enqueue_style( 'my-plugin-bootstrap-css', '//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
	}
	add_action('wp_enqueue_scripts', 'enqueue_external_files');
}

If you have any suggestions, I will be glad to any comments, and I suggest to name this approach in the development of plugins SLON.
This is Ukrainian word, it mean Elephant, also i abbreviation of Single Load Only

Posted 1 month ago
Category: Tutorials
Tags: , ,

If the article proved helpful to you, please click on one of the buttons to share it with your friends. Thanks!

Related posts:

slon-example

SLON Example

SLON Example Reconnecting JavaScript leads to its re-execution, i.e. issue of the site productivity. Also, this can lead to unpleasant side effects – for example, if a given [...]
wordpress-4-8

What’s New in WordPress 4.8

What’s New in WordPress 4.8 WordPress Version 4.8, named “Evans” in honor of jazz pianist and composer William John “Bill” Evans, is available for download or update in [...]
wordpress-4-7

What’s New in WordPress 4.7

What’s New in WordPress 4.7 Version 4.7 of WordPress, named “Vaughan” in honor of legendary jazz vocalist Sarah “Sassy” Vaughan, is available for download or update in your [...]
wp-4.6

What’s New in WordPress 4.6

What’s New in WordPress 4.6 WordPress 4.6 “Pepper” is named in honor of saxophonist Park Frederick “Pepper” Adams III, is available for download or update in your WordPress [...]

No Comments

No comments yet.

RSS feed for comments on this post.

Leave a comment


Last Polls: