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:

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.

Get Fresh Content Delivered

Join and get free content delivered automatically each time we publish.

Comments

  1. Kevin says

    First off, great plugin. I find it extremely useful. What I’m trying to do is create a custom style for the registration form. I understand how to load the custom stylesheet and have it working. What I can’t figure out is how to wrap each row of input elements with a separate div. For example, I want a div to wrap around the Label element of first_name and the corresponding input element. I need to do this for more precise control over each row. Is this possible?

  2. says

    I have been looking for a simple to use membership plugin. After reading your excellent quick start guide, I think this is it. Also read your post on how to use your own custom css sheets. Clean and understandable writing. I got it first time thru.

    • says

      Thanks John for the comments – good to hear.

      Also of note, if you are familiar with how filter hooks work in WordPress, I’ve adding many hooks to the plugin which makes it quite a bit more extensible.

Join in the discussion