Correct way to add CSS to Wordpress Plugin Backend

October 25, 2011    css wordpress plugin custom wordpress enqueue stylesheets Wordpress

Many of us have dabbled with making our own Wordpress plugins, but what alot of people forget is we need to make sure we're as compatible with Wordpress going forward as can be.

Over the last 3-5 months I've really started to discover the hidden power of Wordpress and today i'm blogging about another find.

It's quite a simple topic really. Many of you will want to include your own custom stylesheets with your plugins, but what's important is keeping the integrity of your Wordpress plugin intact.

So whats the correct way to Enqueue your css stylesheet?

There is a couple of ways in which you could achieve it, but being prudent is best.
Include the stylesheet only in the admin pages that you absolutely need to, in the case of the backend, only on the submenu pages you need to.

I am of course assuming here that your pretty familiar with the plugin backend and that you know how to create sub menu pages for your Wordpress plugin.

$page = add_submenu_page( 
    'edit.php', 
    __( 'My Plugin', 'myPlugin' ), 
    __( 'My Plugin', 'myPlugin' ),
    'administrator',
    __FILE__, 
    'my_plugin_manage_menu' );
  
    /* Using registered $page handle to hook stylesheet loading */
   add_action( 'admin_print_styles-' . $page, 'your_plugin_styles' );

This would of course normally be wrapped in a function or class, whichever your coding style prefers.

We are telling Wordpress in the above example to add an action to call our custom function 'your_plugin_styles' on printing styles for the page Wordpress object reference now contained within $page.

// Hook somethings up in our plugins init function
add_action( 'admin_init', 'your_plugin_admin_init' );

Next, I have added an action to be fired on 'admin_init' to call 'your_plugin_admin_init'.

And what i'll do inside this is call a custom_forms.css file that I need to use for some styling on the backend of this plugin. I've also housed it in a css/ folder within my plugin directory for convenience.

function your_plugin_admin_init(){
    wp_register_style( 'yourCustomFormCss', plugins_url('css/custom_forms.css', __FILE__) );
}

And finally we enqueue our script using wp_enqueue_style

function your_plugin_styles(){
    wp_enqueue_style( 'yourCustomFormCss');
}

And this is our working procedure.

Bringing it altogether.

We first fire our plugins init function called 'your_plugin_admin_init' inside this we register our css style with Wordpress. Ready to be called later. Then whilst registering our menus, we tell Wordpress on this admin page ONLY, to fire our custom css calling function 'your_plugin_styles' and from within that we enqueue our previously registered script 'yourCustomFormCss' using 'wp_enqueue_style'.

Some useful links


blog comments powered by Disqus