Create the CSS file
First up we need to create your CSS file so that WordPress can include it via a function. So within your plugin directory, create a new folder called “css”. Within that folder create a new file called “myStyle.css”. Done.
Create the function
Next, we need to create the function that WordPress will call to include your custom CSS file. It’s simple PHP. Include this in your main plugin PHP file:
function my_css() {
echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') .'/wp-content/plugins/YourPluginName/css/myStyle.css" />' . "\n";
}
As you can see, the function is very simple, echoing out a standard <link> tag which you would have seen before if you know HTML. The twist is the implementation of the get_bloginfo(‘wpurl’) function which is importing your blog url, in my case it would echo out “http://www.reynoldsftw.com” for example.
Add the action
Last up, we need to add a WordPress action to tell it to load your CSS file when the page loads. Again, add this to your main plugin PHP script:
add_action('wp_head', 'my_css');
This action tells it to run your function “my_css()” and include the output in the <HEAD> tags. Done! Now you can reference your CSS .classes and #IDs as you normally would
.
Important Notes
Yesterday we added an action to include our own javascript and jQuery library. It would be easy to think: “Why not bunch up the CSS and javscript setup functions together into the initialization action?”… Don’t.
If you remember, the action yesterday was “add_action(‘init’, ‘my_init’);”. If you include the CSS part we wrote above from “my_css()” into “my_init()”, you will get a nasty PHP header error. You cannot add any echo commands within a WordPress “init” action.
You may however, add the javascript function code from yesterday into the “wp_head” action we just discussed. Up to you if you want to split them out.
Download
As we did with the jQuery in WordPress tutorial, I have packaged this code into a simple plugin so you can see it working instantly. Download it here. Unzip and install the folder “CSS_WordPress_Plugin” to your “/wp-content/plugins/” directory. Full details are included in the my_CSSplugin.php file.
Similar Articles:
cURL on GoDaddy issue...
WordPress Plugins: Implementing jQuery Tutorial
Cheatsheet: Wordpress plugin admin page bling!
Introducing "Twollowers" and "Twitter Search" plugins
WordPress Widget - Beginners Guide












Thank you so much for this tutorial! I am building my first WordPress plugin, “Simple Pull Quote”, and thanks to you, I am now utilizing an external stylesheet! Thanks!!!!
Check it out here: http://www.themightymo.com/simple-pull-quote/
Very useful,
I’ve noticed after reading your jQuery one and looking at the references on wordpress that you can use the wp_enqueue_style function just like wp_enqueue_script from your other tutorial.
This is how you add it:
add_action(‘wp_print_styles’, ‘my_css’);
This relies more on the word press functions.