Including CSS and JS on Admin Screen of Custom Theme Options

Question

I am creating a custom theme with a theme options page.

I would like to style the options page and do not want to include inline styles. Is there any way to include an external stylesheet from say

TEMPLATEPATH . '/css/admin.css'

I have also found this chunk of code and it seems to work - link

function admin_register_head() {
 $siteurl = get_option('siteurl');
 $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/yourstyle.css';
 echo "<link rel='stylesheet' type='text/css' href='$url' />\n";
}
add_action('admin_head', 'admin_register_head');

What is the best way?

Answer 1

If you create an admin theme plugin from the Codex steps, you will notice it says not to insert stylesheets as per above - although the above will work.

If you place the following inside your admin theme file, it will serve the same purpose, but uses the wp_enqueue_styles approach:

function add_admin_theme_styles() {
    wp_register_style($handle = 'mytheme-theme-admin-styles', $src = plugins_url('wp-admin.css', __FILE__), $deps = array(), $ver = '1.0.0', $media = 'all');
    wp_enqueue_style('mytheme-theme-admin-styles');}
    add_action('admin_print_styles', 'add_admin_theme_styles');

Answer 2

WP provides queues for scripts and styles. It allows to version URLs, automatically load dependencies, etc.

See wp enqueue style() in Codex for how to properly register your style and load only where you need it (at your custom page and not all of admin area).

Answer 3

When you reigster/add a page to the admin area, using add_submenu_page or any of the other add_{TYPE}_page functions the fourth parameter accepts a unique identifier, this identifier designates the hook your given page will use..

So for a moment imagine i registered a page like so..

add_options_page('My Plugin Options', 'My Plugin', 'manage_options', 'my-unique-identifier', 'my_plugin_options');

In the example above the unique identifier is my-unique-identifier. Various hooks are then available for that page specifically, and here's a few possible actions for that hook..

add_action( 'load-my-unique-identifier', 'my_callback_function' );
add_action( 'admin_head-my-unique-identifier', 'my_callback_function' );
add_action( 'admin_print_scripts-my-unique-identifier', 'my_callback_function' );
add_action( 'admin_print_styles-my-unique-identifier', 'my_callback_function' );

There's also admin_enqueue_scripts which provides the name of the current hook in the string/variable it passes along to functions that hook on..

You should never need to hook onto admin_head,admin_print_scripts or admin_print_styles unless you have a script/style you want to load for every admin page, if you are, then you're doing it wrong (because there's hooks for every page specifically in the administration area).

Hope that helps..

Answer 4

Yea I am answering my own question ... but I did get it to work.

Add this action to your theme's functions.php file

function admin_register_head() {
    $url = get_bloginfo('template_directory') . '/css/admin.css';
    echo "<link rel='stylesheet' type='text/css' href='$url' />\n";
}
add_action('admin_head', 'admin_register_head');