I have been developing a new plugin for WordPress recently. This plugin requires it’s own custom CSS file so that not only does it look better but it’s easier for the users to interface with.
I must say that at first I was a little bit stumped on how to add my CSS file to the plugin. Normally it’s just a matter of dropping a little bit of code in the header tag of the page that you were working on. Of course that won’t work with WordPress plugins because all of the pages are created dynamically with PHP rather than statically with HTML.
OK well that’s kind of a pain in the butt you might be thinking and you would be right. At least it’s a pain in the butt until you figure out how to add your CSS file to WordPress properly. The reality is that there is a very elegant solution to this problem. Once you learn how to do it it’s extremely easy to add your style sheet to your WordPress plugin.
The solution is the wp_enqueque_style function. It looks like this;
wp_enqueue_style ($handle, $src, $deps, $ver, $media)
The wp_enqueue_style function takes five parameters however we will only be needing two of them. We will be using the $handle and $src parameters.
The $handle parameter is the name of your style sheet. The $src handle is the location of your style sheet.
Now let’s take a look at a real life usage of this function. This is a screenshot from my localhost. I am running the Bitnami WordPress Stack.
It’s not much to look at, right? Well every plugin has to start somewhere. So what this plug-in does or will do when it’s finished is collect customers information and store it into the MySQL database.
In the screenshot below I have added the wp_enqueue_style function to the functions.php file of my plugin. I’ve also created a custom function “cip_add_stylesheet” and hooked it into WordPress.
Voila! As you can see below we now have some custom CSS thanks to the wp_enqueue_style function.
The plug-in takes the reps name, the name of the customer, and the address. This screenshot will eventually turn into the dashboard of the plug-in. Right now though it is a work in progress.
What we can take from the image above is that some WordPress plug-ins must have their own style sheet. The wp_enqueue_style function is the best solution for adding stylesheets to your WordPress plug-in. Thanks: StPeteDesign.com