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 trial

WordPress

Tim van der Zouwen
Tim van der Zouwen
7,393 Points
Posted by Tim van der Zouwen
Tim van der Zouwen
7,393 Points

How 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

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Isn't that the whole purpose of wp_enqeue_script() - WordPress handles it

3 Answers

Konrad Traczyk
Konrad Traczyk
22,287 Points
Konrad Traczyk
Konrad Traczyk
22,287 Points

Hi,

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
Tim van der Zouwen
7,393 Points
Tim van der Zouwen
Tim van der Zouwen
7,393 Points

Hi 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
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

The 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' );
?>