Page Specific CSS in WordPress Admin Pages

While working on the Clean Options plugin, I noticed in the source code that there was CSS from several plugins in the head section of all of the admin pages. Besides being unnecessary, there is also the potential problem that style rules intended for one page might affect others they weren't intended for. Giving the CSS selectors unique names is a help, but not a guarantee.

After reading Top 10 Characteristics of a Great WordPress Plugin, I decided it was time to investigate this concern further. Is there a way to write a plugin so that WordPress doesn't include the CSS in every admin page, but only in the page it applies to?

The answer is yes! And the way to do so is very easy.

Instead of writing a function that specifies the plugin's CSS rules and using the admin_head hook like so 

add_action('admin_head', 'plugin_css_function');

apply the hook inside the function that adds the page like so (↳ indicates code is part of the previous line)

$variable = add_options_page('Page Title', 'Menu Title', access_level,
		↳ basename(__FILE__), 'plugin_page_function');
add_action("admin_head-$variable", 'plugin_css_function');

Now the CSS for that plugin will only be in the head of it's own admin pages. Much more efficient and safer, and easy once you know how to do it. All of my plugins are now written in this manner. Look for it in their next release versions.

Technorati Tags: , , , ,
This entry was written by Mittineague, posted on March 31, 2009 at 5:40 pm, filed under Scripting and tagged , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Andy Potanin
    Posted April 25, 2009 at 5:28 pm | Permalink

    Very nice, this should be an enforced standard for plugin development.

Post a Comment

Your email is never shared. Required fields are marked *

*
*