Add Stylesheets To WordPress Correctly

When you are developing Wordpress plugin or theme then you will always get to a point where you want to add a stylesheet to the page so you can use the CSS classes on your page. But there are a few ways of doing this but which one is right?

• You can add the stylesheet link tag directly on the page using the wp_head action
• You can add the stylesheet link tag directly to the page anywhere.
• You can use the wp_enqueue_scripts action to add a handle to the wp_enqueue_style.

Well the correct way and the way you should always add stylesheets to your Wordpress site in either your plugin or your theme is to use the wp_enqueue_style function.

#Why Should You Use wp_enqueue_style?

Why is this the best solution to adding styles to your WordPress page? This is because of the function wp_enqueue_style, this will handle all of the stylesheets that need to be added to the page and will do it in one place.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

The first parameter of this function is the handle which you use to name the stylesheet. Naming the stylesheet allows an easy way of not adding the same stylesheet twice on the page. If you have two plugins that use the same stylesheet and the both use the same wp_enqueue_style handle then Wordpress will only add the stylesheet on the page once. When you add things to wp_enqueue_style it adds your styles to a list of stylesheets it needs to add on the page when it is loaded. If a handle already exists it will not add a new stylesheet to this list. Another good feature of the * wp_enqueue_style* function is the 3rd parameter $deps, this is dependencies, if you pass an array of stylesheet handles it means this stylesheet will not be added to the page until all of these handles are added.

#Example Of Adding Stylesheet

To use the wp_enqueue_style function it should be added on the wp_enqueue_scripts action.

<?php
    
    add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );

    /**
     * Add stylesheet to the page
     */
    function safely_add_stylesheet() {
        wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) );
    }
?>

The wp_enqueue_scripts action can be used for both CSS and Javascript files the only difference is that for javascript files you don't use the function wp_enqueue_styles your javascript you will use wp_enqueue_script.

#Add Stylesheets In Admin Area

If you want to add your stylesheet in the admin area of Wordpress, for example on your theme options page or your plugin admin page, then you need to change slighty this. There is an action called admin_enqueue_scripts which you should use to add styles in the admin area. Inside this action you can then use the same wp_enqueue_style function to add the stylesheet.

<?php
    
    add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );

    /**
     * Add stylesheet to the page
     */
    function safely_add_stylesheet_to_admin() {
        wp_enqueue_style( 'prefix-style', plugins_url('style_admin.css', __FILE__) );
    }
?>

But there is a problem with this, now this stylesheet is added to every page of the admin area. If you only want to style the panels differently on your theme options page then using this method will change it everywhere. If you only want the stylesheet to be added on certain pages in the admin page you have to add something else to the safely_add_stylesheet_to_admin function. When you use the admin_enqueue_scripts it passes through a parameter to your called function to let you know what page it's on. From this parameter you can check the page and only add the stylesheet on certain pages.

<?php
    
    add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );

    /**
     * Add stylesheet to the page
     */
    function safely_add_stylesheet_to_admin( $page ) {
        if( 'options-general.php' != $page )
        {
             return;
        }
        wp_enqueue_style( 'prefix-style', plugins_url('style_admin.css', __FILE__) );
    }
?>

The above function will only add the stylesheet on the options-general.php page.

#Add Stylesheets To Login Page

Along with being able to add stylesheets to the front-end of the website and on the admin area of WordPress, there is also an action which allows you to add stylesheets to the login page to style it in anyway you want. The action to add styles to the login page is login_enqueue_scripts.

function login_page_styles() {
    wp_enqueue_style( 'login-page-styles', get_template_directory_uri() . '/css/login-page.css' ); 
}
add_action( 'login_enqueue_scripts', 'login_page_styles' );

#Add Inline Styles

PHP can not change contents of your CSS files, so if you have a theme options page or use the theme customizer in your theme then there will be PHP code that could output new CSS then you need to output this as inline CSS. WordPress has a function wp_add_inline_style() which allows you to add styles after the stylesheets have been loaded. This function takes two parameters a handle and the style that will be used.

<?php wp_add_inline_style( $handle, $data ); ?>

The following code snippet shows how you can get a variable set in the theme customizer and use this to change the colour of the body background.

function add_customizer_styles()
{
    $bgcolor = get_theme_mod( 'background-color' );
    $custom_css = "
            body
            {
                    background: {$bgcolor};
            }";
    wp_add_inline_style( 'inline-custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'add_customizer_styles' );

#Conclusion

That's how stylesheets should be added to both the front-end and admin area of your Wordpress site. The benefits and ease of using the wp_enqueue_style is massive that you shouldn't need to add your stylesheets using the wp_head action.