Loading Custom Stylesheets with wp_enqueue_style

While the concepts outlined here are more specific to loading custom styles for the WP-Members plugin, the WP functions discussed can be used to load and unload custom stylesheets for any WP plugin or theme that uses wp_register_style.

In the past, I have explained how to setup a custom stylesheet for WP-Members and set the location in the plugin’s settings.  In this article, I would like to explain a more advanced method that is a little cleaner and more elegant.  It makes use of these WordPress functions:

• wp_deregister_style
• wp_register_style
• wp_enqueue_style

Setting up a custom stylesheet for the plugin gives your site a more polished and professional look as you can better integrate the look of the plugin’s forms to the look of your theme.

To get started, you can use any of the three stylesheets included in the plugin as a framework, although this is optional.  More importantly, you should save any customized stylesheet somewhere outside the plugin folder so it does not get overwritten when the plugin is upgraded.

WP-Members uses wp_register_style to identify its stylesheet.  This allows you to deregister it so you can use your own stylesheet.

Disable the Default Styles

Once you have a custom stylesheet you will be working with, we will need to disable the default stylesheet.  This is something you can do in your theme’s functions.php file.  (Most themes have a functions.php file included. If your’s does not, simply create a file named functions.php, place your functions in it, and save it to your theme folder – it will load automatically.)

WP-Members registers its stylesheet with the handle ‘wp-members’. So first we will disable that from loading. This is done by adding the following to the functions.php file:

add_action( 'wp_print_styles', 'my_styles' );

function my_styles(){
    wp_deregister_style( 'wp-members' );
}

This action will cause the existing styesheet to not load.  Now we need to tell it to load our custom stylesheet.

Register and Load Custom Styles

The two functions we will use are loaded with the action wp_enqueue_scripts.

The function we are firing with wp_enqueue_scripts needs to load wp_register_style to define our new stylesheet handle and the path to the stylesheet.  If you created a custom stylesheet, use the path to that (it should be saved outside the plugin folder somewhere it won’t get overwritten).  In this example, I am simply supplying the path to one of the extra stylesheets included with the plugin.

Next, you can enqueue the style using the handle you defined in wp_register_style.

Here is an example of the process:

/**
 * Adds the function 'add_my_stylesheet' to the
 * wp_enqueue_scripts action.
 */
add_action( 'wp_enqueue_scripts', 'add_my_stylesheet' );
/**
 * Function for loading your custom stylesheet
 */
function add_my_stylesheet() {

    // change this path to load your own custom stylesheet
    $css_path = WP_PLUGIN_URL . '/wp-members/css/wp-members-2011.css';

    // registers your stylesheet
    wp_register_style( 'myStyleSheets', $css_path );

    // loads your stylesheet
    wp_enqueue_style( 'myStyleSheets' );
}

So, using these two actions you can unload the default stylesheet for the plugin and load your own custom styles.  This plug-and-play example shows you how to do it using one of the stylesheets included with the plugin.  To use your own custom stylesheet, change the path to the location of your stylesheet.