How to load Widget javascript + css files only if used?

by

I’d like to keep the javascript and css styles used by my widget inside their own files (and not add them to the theme).

But i can’t seem to get wordpress to add them when the widget is actually used on a sidebar.

I’ve tried this:

inside the Class declaration, i’ve added 2 functions

class EssentielleRubriquesPosts extends WP_Widget {

function addFrontendCss(){
    wp_enqueue_style('erw-frontend-css', ESSENTIELLE_RUBRIQUE_WIDGET_PLUGIN_PATH . 'css/EssentielleRubriqueWidget-frontend.css');
}
function addFrontendJavascript(){
    wp_register_script('jq-hoverintent', PLUGIN_PATH . 'js/jquery.hoverintent.js', array('jquery'), '1.0',true);
    wp_enqueue_script('jq-hoverintent');
    wp_enqueue_script('jq-tools', PLUGIN_PATH . 'js/jquery.tools.js', array('jquery'),'1.0',true);
    wp_enqueue_script('erw-frontend-js', PLUGIN_PATH . 'js/widget-frontend.js', array('jquery', 'jq-hoverintent', 'jq-tools'),'1.0',true);

}

and inside the widget() function:

function widget($args, $instance) {
        add_action( 'wp_print_scripts', 'addFrontendJavascript' );
        add_action( 'wp_print_styles', 'addFrontendCss' );
}

But that doesn’t do anything…

2

wp_print_scripts and wp_print_styles hooks are fired way before your widget function so that is way it’s not working.

A solution to that would be to include the scripts in the footer using wp_print_footer_scripts hook, take a look at Jan’s answer to a similar question

Or a much nicer solution take a look at Sorich’s answer to another similar question

Leave a Comment