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

When registering a page for 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 registered page will use..

If i were to register an options for example:

add_options_page( 'Example Plugin Options', 'Example Plugin', 'manage_options', 'example-plugin-identifier', 'example_plugin_options' );

Various hooks are then available for that page specifically, here are just a few possible actions for the now registered page.

// load-{HANDLE}
add_action( 'load-example-plugin-identifier', 'example_plugin_callback' );
// admin_head-{HANDLE}
add_action( 'admin_head-example-plugin-identifier', 'example_plugin_callback' );
// admin_print_scripts-{HANDLE}
add_action( 'admin_print_scripts-example-plugin-identifier', 'example_plugin_callback' );
// admin_print_styles-{HANDLE}
add_action( 'admin_print_styles-example-plugin-identifier', 'example_plugin_callback' );

function example_plugin_callback() {

    // Run your code here

}

There is also the admin_enqueue_scripts hook, which provides the name of the current handle in the string/variable it passes along to callback functions.

add_action( 'admin_enqueue_scripts', 'example_plugin_callback' );

function example_plugin_callback( $handle ) {

    // If the handle is not the page registered earlier, return
    if( 'example-plugin-identifier' =! $handle )
        return;

    // Run your code here

}

You should not typically need to use admin_head,admin_print_scripts or admin_print_styles unless you have a specific requirement to target every administration page or perform conditional logic inside the callback to target specific registered pages.

Hope that helps..

Answer 3

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 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');