This article will show you how to safely insert your CSS for your WordPress plugin or theme into the HEAD section of both the WordPress front-end and administration panel.
I wrote an article a while back which explained how to safely enqueue JavaScript files into WordPress for your WordPress plugin or theme without simply injecting code into the HEAD section of either your the WordPress front-end or administration panel. Enqueuing scripts safely solves conflicts by preventing the same library/script from being loaded into WordPress twice.
Enqueuing your CSS into WordPress using the wp_enqueue_style function doesn’t focus as much on conflict as it simply allows a quick, efficient way of ensuring that your styles are loaded in the correct order. When you enqueue WordPress a CSS file, you may specify dependencies which tells WordPress that your CSS depends on another CSS file and should be loaded afterwards.
So where should you put this code? You can execute wp_enqueue_style when your plugin or theme file is loaded. For plugins, you can put it anywhere inside your main plugin file so that WordPress will execute wp_enqueue_style when your plugin is noticed/read initially. For a WordPress theme, you can execute wp_enqueue_style in your functions.php file.
Using wp_enqueue_style
Example wp_enqueue_style
wp_enqueue_style Parameters
$handle
Name of the stylesheet. This should be a unique string.
$source
The absolute path to the stylesheet relevant to your WordPress root.
$dependencies
An array of other enqueued styles that this style depends on. The array should contain the $handle values of the other stylesheets. If your stylesheet doesn’t have any dependencies, set this variable to false.
$version
The version of your WordPress stylesheet.
$media
This defaults to false. You may specify the CSS media type here such as “all“, “screen“, “handheld“, “print“, etc.
October 2nd, 2009 at 9:14 am
Es la frase entretenida
October 19th, 2009 at 11:34 pm
Thanks for tip. Problem solved.
January 15th, 2010 at 7:49 am
Hi, I am creating a new page on my word press site and I was wondering if it is possible to style this page differently, by having separate side bars and layout?
February 18th, 2010 at 11:01 pm
Nice post, maybe you should add in the codex.wordpress.org as well. The only concern I have is that it may require some processing power for sites which have lots of post because it is looping through all the post and the post content to find a match. This will result in more memory needed
March 1st, 2010 at 12:05 pm
Thanks, was looking for a good example!
April 22nd, 2010 at 2:32 pm
Is it possible to make wp_enqueue_style NOT append a version number (.css?ver=n) or…? I tried to set $version to FALSE but then it appends a random number upon each page load. Which is exactly what I do not want
Thanks!
April 25th, 2010 at 11:01 am
@RavanH, try setting $version = null instead of false. See what that does.
June 23rd, 2010 at 5:13 pm
i notice that did not work out for me.
for some reason, the .css never loads.
but this worked: it’s off the wp codex site:
[php]
/*
* This example will work with WordPress 2.7
*/
/*
* register with hook ‘wp_print_styles’
*/
add_action(‘wp_print_styles’, ‘add_my_stylesheet’);
/*
* Enqueue style-file, if it exists.
*/
function add_my_stylesheet() {
$myStyleUrl = WP_PLUGIN_URL . ‘/myPlugin/style.css’;
$myStyleFile = WP_PLUGIN_DIR . ‘/myPlugin/style.css’;
if ( file_exists($myStyleFile) ) {
wp_register_style(‘myStyleSheets’, $myStyleUrl);
wp_enqueue_style( ‘myStyleSheets’);
}
}
[/php]