WordPress Plugins: Utilize CSS in 2 minutes

Just Posted: Apple Likely to Give Education Rather than Resolution for iPhone 4 Antenna Issues

Using your own CSS script for your WordPress plugin couldn’t be easier – in fact, it’s so easy you can probably get it implemented in 2 minutes – so let’s try it :) . If you read my quick tutorial on implementing jQuery into your plugin code, the following should be pretty familiar, however with a subtle, yet important difference.

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 :D .

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

drop-box-iconAs 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.

Further Reading…

WordPress For Dummies

WordPress For Dummies

WordPress Complete

WordPress Complete

WordPress Plugin Development

WordPress Plugin Development

4 Responses to “WordPress Plugins: Utilize CSS in 2 minutes”

  1. Toby says:

    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/

  2. Pat says:

    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.

Trackbacks/Pingbacks

  1. [...] Here is a new post at WordPress Plugins: Utilize CSS in 2 minutes « Steve Reynolds. [...]

  2. [...] Check out the tutorial on implementing custom CSS into a WordPress plugin [...]

Leave a Reply