Load a custom stylesheet with wp_enqueue_scripts

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 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.  This example assumes you’ve saved it in your theme folder.

WP-Members uses wp_enqueue_style to identify its stylesheet. This allows you to dequeue 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_enqueue_scripts', function() {
    wp_dequeue_style( 'wp-members' );
}, 15 );

This action will cause the existing styesheet to not load. Now we need to tell it to load our custom stylesheet.  Note the priority of 15.  We need to make sure this happens after the plugin enqueues the stylesheet (which happens at the default priority of 10).  If we try to dequeue it before, the plugin will be adding it after and it won’t be removed.  This is an example of where the action priority number is important to know and understand.

Load Custom Stylesheet

Now that the main WP-Members stylesheet is unloaded, we can load our custom stylesheet.

This example assumes your stylesheet is saved in your theme directory and is named “my-custom-stylesheet.css”.

Note the priority of 20.  We need this to come after we have removed (dequeued the original default stylesheet), which we did at priority 15 above.

add_action( 'wp_enqueue_scripts', function(){
    global $wpmem;
    $style_url = trailingslashit( get_template_directory_uri() ) . 'my-custom-stylesheet.css';
    wp_enqueue_style ( 'wp-members-custom-style', $style_url, false, $wpmem->version );
}, 20 );

Using these two actions you can unload the default stylesheet for the plugin and load your own custom styles. To use this to load your own custom stylesheet, change the path as indicated in the comments to the location of your stylesheet.