Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialTim van der Zouwen
7,393 PointsHow to combine javascript from multiple Wordpress plugins?
Hi,
I'm building a Wordpress theme and I use some plugins. Some of these plugins have their own javascript files. Which means multiple server requests.
How do I reduce this to just one server request?
ps. I don't want to use another plugin to do so
3 Answers
Konrad Traczyk
22,287 PointsHi,
As Dave said you cant replace scripts/styles with those from plugins. Multiple requests is drawback of using plugins.
Best approach with wordpress is not use "wordpress front-end plugins" at all, instead bring this functionality by yourself or with javascript/css plugins and combine files with Grunt/Gulp/PostCSS tasks, Or(For CSS) Sass/LESS parser.
Unless its not possible, i suggest use some caching plugin to minify requests that your plugins generate. You can also search through every plugin file find scripts slugs, then use wp_deregister_script() in your function.php file, then minify/combine those js/css files by yourself.
Hopes this clarifies something,
Konrad
Tim van der Zouwen
7,393 PointsHi Dave,
In my functions.php I did this but I don't think the wp_enqueue_script() generates one request.
wp_enqueue_script('jquery 3.2.1 slim', get_template_directory_uri() . '/assets/js/jquery-3.2.1.slim.min.js', '', '', true);
// jQuery
wp_enqueue_script('jquery_js', get_template_directory_uri() . '/assets/js/jquery.min.js', array('jquery'), '', true);
// Tether JS
wp_enqueue_script('popper_min', get_template_directory_uri() . '/assets/js/popper.min.js', '', '', true);
// Bootstrap JS
wp_enqueue_script('bootstrap_js', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery'), '', true);
HTML sourcecode <script type='text/javascript' src='http://www.website.com/wp-content/themes/themename/assets/js/jquery-3.2.1.slim.min.js?ver=4.8.2'></script> <script type='text/javascript' src='http://www.website.com/wp-content/themes/themename/assets/js/jquery.min.js?ver=4.8.2'></script> <script type='text/javascript' src='http://www.website.com/wp-content/themes/themename/assets/js/popper.min.js?ver=4.8.2'></script> <script type='text/javascript' src='http://www.website.com/wp-content/themes/themename/assets/js/bootstrap.min.js?ver=4.8.2'></script>
And How about the plugin requests?
Dave StSomeWhere
19,870 PointsThe enqueue_scripts just sets it up - you need also need to do the add_action as per this doc. Then WordPress manages the scripts like dependencies and not reloading if already loaded.
Here's their example:
<?php
function themeslug_enqueue_style() {
wp_enqueue_style( 'core', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
?>
Dave StSomeWhere
19,870 PointsDave StSomeWhere
19,870 PointsIsn't that the whole purpose of wp_enqeue_script() - WordPress handles it