clean wp_head plugin's output - wordpress

Question

I'm a beginer on wordpress, and my job will be to integrate templates and themes.
But a have a question with the wp_head and wp_footerfunctions.
Both of them generate stylesheet and scripts, but on my theme and my template page and would like only one stylesheet and one script (ex : css/style.css and js/app.js) .
I mean, style.css will have template rules but already styles from plugin etc .
And app.js will have jQuery minified, severals plugins (like lightbox etc) and my own script .
How can i do that ? I normally use grunt or gulp . But can i say ton wp functions "don't add scripts from plugins in the head, but add it in my main JS file " ?
Best regards

Answer 1

Scripts that are loaded through wp_head or wp_footer are enqueued in Wordpress.
If you want to remove those and instead load only your one single stylesheet and one single JS file, then you will need to dequeue all of those other scripts.
First, however, you need to identify which scripts are enqueued, which you can do by loading the global $wp_styles and $wp_scripts variables and iterating through them like so:
function se_inspect_styles() {
global $wp_styles;
echo "<h2>Enqueued CSS Stylesheets</h2><ul>";
foreach( $wp_styles->queue as $handle ) :
echo "<li>" . $handle . "</li>";
endforeach;
echo "</ul>";
}
add_action( 'wp_print_styles', 'se_inspect_styles' );
function se_inspect_scripts() {
global $wp_scripts;
echo "<h2>Enqueued JS Scripts</h2><ul>";
foreach( $wp_scripts->queue as $handle ) :
echo "<li>" . $handle . "</li>";
endforeach;
echo "</ul>";
}
add_action( 'wp_print_scripts', 'se_inspect_scripts' );
Then you can manually dequeue and deregister all those scripts by hooking into the wp_print_styles action (for CSS files) and the wp_print_scripts action (for JS files) like below:
// Dequeue CSS
function se_dequeue_unnecessary_styles() {
wp_dequeue_style( 'bootstrap-map' );
wp_deregister_style( 'bootstrap-map' );
}
add_action( 'wp_print_styles', 'se_dequeue_unnecessary_styles' );
// Dequeue JS
function se_dequeue_unnecessary_scripts() {
wp_dequeue_script( 'modernizr-js' );
wp_deregister_script( 'modernizr-js' );
wp_dequeue_script( 'project-js' );
wp_deregister_script( 'project-js' );
}
add_action( 'wp_print_scripts', 'se_dequeue_unnecessary_scripts' );
If you still need any of the dequeued scripts, then just be sure to add their source to your grunt / gulp file.
Lastly, you'll want to enqueue your one single CSS and JS scripts produced by grunt / gulp (although you can always just link to these manually from your templates if you feel like it).
Here is some example code for doing so:
function se_theme_js(){
// Theme JS
wp_register_script( 'my-scripts',
get_template_directory_uri() . '/js/main.min.js',
array('jquery'),
null,
true );
wp_enqueue_script('my-scripts');
}
add_action( 'wp_enqueue_scripts', 'se_theme_js' );
function se_theme_styles() {
// Theme CSS
wp_register_style( 'my-style',
get_stylesheet_directory_uri() . '/css/main.min.css',
array(),
null,
'all' );
wp_enqueue_style( 'my-style' );
}
add_action( 'wp_enqueue_scripts', 'se_theme_styles' );