WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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_register_style("chosen-style",plugins_url( 'css/chosen.css' , __FILE__ ));

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
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 '14 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 '14 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 '14 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 '14 at 0:22

Your Answer


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

Browse other questions tagged or ask your own question.