The Right Way to Style WordPress Plugins

From the time I first touched WordPress until a few days ago, I styled plugins wrong. Heck, I put my PHP in the wrong place too, so obviously there’s a lot I was doing poorly. None the less, in the hopes of saving someone some headache, here’s what I believe to be the best way to deal with CSS for any type of plugin today.

Quickly though, here is the basic progression of how I’ve tried to add CSS to plugin output in the past.

  1. Doing it purely inline with <style=" ... ">. (This does have a very small place on the internet — when you truly want to apply a unique style to a single element — but I wasn’t using that.)
  2. Adding bare CSS with an action hook to wp_head. I was just spitting it all in the head of theme making the files bigger, and the source more convoluted.
  3. Appending my own .css file with a script I found somewhere and didn’t really understand.
  4. What I’m about to show you: Appending my own .css file, but allowing the theme to replace it by putting sensibly named alternative in it’s style directory.

Essentially, for that Post Meta Box plugin I mentioned in the aforelinked post, I wanted to be able to modify the basic styling but not affect all the places I’m trying to use it. So, I did what made the most sense to me, copied the master CSS file (postmetabox.css) to my active themes directory and modified it there. And because this script I’m about to give you is so smart, that became the active styling without any problems. So here it is:

(A quick note: I’ve kept all references to “pmb”, my shortcut for making things local to my Post Meta Box plugin. If you’re using this function, I’d do a find and replace with whatever shorthand you use to refer to your plugin. I could have find-and-replaced it to “my-plugin,” but we’re smart people, so I’ll spare us that unnecessary step.)

add_action('wp_print_styles', 'add_pmb_stylesheet');

function add_pmb_stylesheet() {
	$theme_style_url = get_stylesheet_directory_uri() . '/postmetabox.css';
	$theme_style_file = get_stylesheet_directory() . '/postmetabox.css';
	$pmb_style_url = plugins_url() . '/post-meta-box/postmetabox.css';

	if ( file_exists($theme_style_file) ) {
		wp_register_style('themepmb', $theme_style_url);
		wp_enqueue_style( 'themepmb');
	else {
		wp_register_style('pmb', $pmb_style_url);
		wp_enqueue_style( 'pmb');

First and foremost, that add_action call is (half of) the proper way to append any stylesheet in WordPress. There are many other things you can do that will function for you (the aforementioned wp_head method is probably the worst of them). Essentially, all it’s doing is calling my function when it gets to any place it typically reaches for style sheets.

So what our function does is hand it the right style sheet. And which stylesheet is right depends on whether or not the user has created one for their current theme, or if they just want to rely on ours. So essentially, we’re just looking to see if the user has created the file to hold their own stylesheet ($theme_style_file), if they have, we use that. If they haven’t, we use our own.

There’s nothing in here that a seasoned PHP and WordPress person should be stunned by, but there’s a lot of little bits that your average tinkerer will not have known about. Like that PHP can easily check if a file exists — that function’s in every version of PHP ever — but does it with local addresses, so you need to know where the style sheet is both locally and internet-wise. And the commands wp_regiester_style and  wp_enqueue_style — which round out the proper way to add a style sheet — were completely unknown to me until I ran across a little tutorial (by I think Justin Tadlock, though after 20 minutes of looking I gave up on definitively finding who it was).

I wondered for some time about the possibility of keeping some sensible defaults for my plugin’s visual output and always using them, but if for some reason the user wants to overwrite what seem to me to be sensible defaults I want to make that easy. And since I think most anyone inspired to modify my styling would take the sensible advice to copy the original file and put it in their theme and modify it there, that’s what we’re allowing for.

It’s entirely possible that another years of dinking around with WordPress will convince me that this method is as foolish, or outdated, or bad, as my previous methods, but the more I think about that the less likely it seems to me.

Leave a Reply