Proper way to include stylesheet for panels

Question

What is the proper way to include a stylesheet with my options panels in wp-admin for a given plugin or theme. In other words -- the stylesheet that styles the panels.

I mean, in my panel template code, I'm doing something like...

<style type="text/css">
@import url("../wp-content/plugins/myplugin/panels/style.css");
</style>

...but suspect that this won't work on some installs of WordPress because of paths and so on, and might not work in the future of WP gets a wild hair and wants to rename wp-content with something else.

Answer 1

The best practice method of enqueueing admin stylesheets is to hook into your appearance page's specific hook, using the admin_print_styles-{hook}, where {hook} = {admin_page}-{menu_slug}.

I'll assume:

1. This is a Theme
2. You are properly using an appearance page, via add_appearance_page()
3. Your $menu_slug is wpse48416-settings

The hook, then, is: admin_print_styles-appearance_page_wpse48416-settings:

<?php
function wpse48416_admin_style(){
        wp_register_style( 'wpse48416_admin_css', get_template_directory_uri() . '/css/admin.css' );
        wp_enqueue_style( 'wpse48416_admin_css' );
}
add_action( 'admin_print_styles-appearance_page_wpse48416-settings', 'wpse48416_admin_style' );
?>

For a Plugin, you simply need to use the correct {page} string, depending on which admin menu function you use to register your settings page, e.g. settings_page for add_settings_page().

Answer 2

function load_myplugin_wp_admin_style(){
        wp_register_style( 'myplugin_wp_admin_css', plugins_url( '/myplugin/panels/style.css' ), false, '1.0.0' );
        wp_enqueue_style( 'myplugin_wp_admin_css' );
}
add_action('admin_enqueue_scripts', 'load_myplugin_wp_admin_style');