WordPress : Enqueue Styles

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

<?php wp_enqueue_style($handle, $source, $dependencies, $version, $media); ?>

Example wp_enqueue_style

<?php wp_enqueue_style('mystyles', '/wp-content/plugins/myplugin/style.css', array('otherstyles', 'morestyles'), '1.0', 'screen'); ?>

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.

  • cubrikaska

    Es la frase entretenida

  • http://www.instantestore.com/ Berg

    Thanks for tip. Problem solved.

  • http://webinhours.com Web design Group

    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?

  • http://squashstudios.com graphic design service

    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

  • http://farinspace.com Dimas

    Thanks, was looking for a good example!

  • RavanH

    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!

  • http://tribulant.com Antonie Potgieter

    @RavanH, try setting $version = null instead of false. See what that does.

  • stakked

    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:

    
    
        /*
         * 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');
            }
        }