Telephone: 0844 967 0565 Email: info@pushon.co.uk

How to include stylesheets and javascript files in wordpress, the correct way! (now including Media Queries)

To often I see themes that have the template css and javascripts as HTML includes in the header file. In fact, even twentyeleven does it this way (not that I like a single thing about twentyeleven, but it’s what a lot of people use as a starting point).

Not only is this bad practice as WordPress has hooks that are there to be used, but these hooks work well, and there’s no reason not to use them. In fact, by using these, we can safely minify code, and avoid nasty conflicts (and we all know how annoying they can be!)

Ok, here is the code that you need:

functions.php – stylesheet hook

function setup_stylesheets(){
// Default theme stylesheet
wp_register_style( 'theme_css', get_template_directory_uri().'/style.css' );

// Responsive Stylesheets
wp_register_style( 'wide',
get_template_directory_uri().'/css/larger.css',
false, // dependencies
'1.0', // version
'screen and (min-width: 940px)' // wide screens (bigger than 940px)
);
wp_register_style( 'narrow',
get_template_directory_uri().'/css/narrow.css',
false, // dependencies
'1.0', // version
'screen and (max-width: 600px)' // narrow screens (smaller than 600px)
);
wp_register_style( 'iphone4',
get_template_directory_uri().'/css/iphone4.css', // url
false, // dependencies
'1.0', // version
'only screen and (-webkit-min-device-pixel-ratio: 2)' // screen rule
);
wp_register_style( 'ipad-portrait',
get_template_directory_uri().'/css/ipad-portrait.css', // url
false, // dependencies
'1.0', // version
'all and (orientation:portrait)' // screen rule
);
wp_register_style( 'ipad-landscape',
get_template_directory_uri().'/css/ipad-landscape.css', // url
false, // dependencies
'1.0', // version
'all and (orientation:landscape)' // screen rule
);

// Load the defined Stylesheets
wp_enqueue_style( 'theme_css' );
wp_enqueue_style( 'wide' );
wp_enqueue_style( 'narrow' );
wp_enqueue_style( 'iphone4' );
wp_enqueue_style( 'ipad-portrait' );
wp_enqueue_style( 'ipad-landscape' );
}

add_action( 'wp_enqueue_scripts', 'setup_stylesheets' );
 ”

This is all you need to do, the function can be named to whatever you want, but this name needs to be reflected in the add_action call

UPDATE: I’ve now included a full set of media query style sheets too, so all you have to do is create the empty files and style away. 

FUNCTIONS.PHP – JAVASCRIPT HOOK

function setup_scripts(){
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri().'/js/jquery-latest.js');
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'setup_scripts' );
 ”

This very similar to the scripts, you’ll notice the subtle change to the enqueue function.

So… go forth, and include your scripts and styles the correct way! Banish old habits, and embrace this wonderful functionality!

 

To find out how PushON research & analysis services can give your company a competitive online edge, simply call 0844 967 0565 or contact us via our form.