Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using the Bones theme, and I'm trying to turn jQuery plugins into WordPress plugins. In the init.php file for the 'Chosen' plugin I'm converting, I've included this code:

function chosen(){
    wp_register_script("chosen-script",plugins_url( 'js/chosen.jquery.min.js' , __FILE__ ));
    wp_enqueue_script("chosen-script");
    wp_register_style("chosen-style",plugins_url( 'css/chosen.css' , __FILE__ ));
    wp_enqueue_style("chosen-style");
}

add_shortcode('chosen', 'chosen');

Google PageSpeed came back with this error:

Put CSS in the document head (1):

Link node chosen.css should be moved to the document head in www.blank.com/

How can I include this CSS file in the header?

share|improve this question
2  
You should hook the function that registers and enqueues the scripts onto wp_enqueue_script. add_action( 'wp_enqueue_scripts', 'chosen' ); rather than as a shortcode. –  Andrew Bartel Mar 7 at 23:43
    
Thank you Andrew, that did it. The only problem is that now the plugin in loaded on every page of my site. With 'add_shortcode', the plugin was loaded only on pages that contained the 'chosen' shortcode. Is there a way without 'if' statements to include the plugin only on specific pages? –  eclipsis Mar 7 at 23:51
    
In regards to my last question, this is how I would load it on a specific page: if (is_page('to-do_list')) –  eclipsis Mar 8 at 0:06
    
To dynamically load stylesheets in the head based on a shortcode, you will have to do something like this which is admittedly a bit processing heavy. –  s_ha_dum Mar 8 at 0:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.