Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 2 down vote favorite

I'm trying to load a CSS file for my WordPress post area, but having no luck. I have read over the wp_enqueue_style function and came up with the code below, but it doesn't load up. Is there a tag or character missing from my code. I have a custom write panel when a user post that I want to style with the CSS file. Any help would be great.

Here is what I have in my themes functions.php file:

function mytheme_add_init() {
    $file_dir=get_bloginfo('template_directory');
    wp_enqueue_style("functions", $file_dir."/scripts/custom.css", false, "1.0", "all");
    wp_enqueue_script("rm_script", $file_dir."/scripts/custom.js", false, "1.0");
}
share|improve this question

3 Answers

up vote 1 down vote accepted

Just hook your callback into admin_print_styles, i.e.:

add_action( 'admin_print_styles', 'mytheme_add_init' );

Alternately, you could add an is_admin() conditional wrapper inside your callback, and hook into wp_enqueue_scripts:

function mytheme_add_init() {
    if ( is_admin() ) {
        $file_dir=get_bloginfo('template_directory');
        wp_enqueue_style("functions", $file_dir."/scripts/custom.css", false, "1.0", "all");
        wp_enqueue_script("rm_script", $file_dir."/scripts/custom.js", false, "1.0");
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_add_init' );

But the absolute best approach is to hook into your Theme's admin page, via admin_print_styles-appearance_page_{pagename}:

add_action( 'admin_print_styles-appearance_page_{pagename}', 'mytheme_add_init', 11 );

This is a custom hook specifically for your appearance page, as defined via your add_theme_page() call.

share|improve this answer
up vote 2 down vote

Stick something like this in your functions.php, and put your custom CSS inbetween the <style> tags.

// THIS GIVES US SOME OPTIONS FOR STYLING THE ADMIN AREA
function custom_colors() {
   echo '<style type="text/css">
           #wphead{background:#592222}
           #footer{background:#592222}
           #footer-upgrade{background:#592222}
         </style>';
}

add_action('admin_head', 'custom_colors');

Alternately, you could swap out those tags and add a css <link> in there instead. All it does is stick this into the <head> of the wp-admin pages, so you could add JS as well.

share|improve this answer
up vote 2 down vote

Late answer: As both previous answers showed old, incomplete or complicated ways, here's an updated version that works the v3.5+ way.

What's different?

Here's the list

  • The first thing we do is using the admin_enqueue_scripts hook. This hook
  • The wp_enqueue_style()s last argument is the targeted media and it's already set to all per default. No need to add it.
  • We use the get_template_directory_uri() function to retrieve the URl for our stylesheet. No need to check the option value for template_directory here.
  • We then use the return value of get_template_directory() to retrieve the path and wrap it into a filemtime() call to get the last time where the stylesheet was edited. This way we append a new version number as query argument and force browser to reload the stylesheet if there's a new version. No need to force hard reloads with Ctrl + F5.
  • One important thing is to add the right dependencies as you don't want to have your styles overwritten with a higher specifity by wp-admin.css, ie (even worse) or the color scheme. The really tough part is to check the color scheme, as this file carries most of what is styled in the admin UI and is a user setting. We want to add this as dependency as well.
  • The last thing we do is wrapping the call to add the hook into another function that is hooked to the contextual admin_head-* hook, where * is the pageslug. We hook it two times to take new as well as edited posts into consideration.

Here's the code for your functions.php file.

add_action( 'admin_head-post.php', 'wpse44135_enqueue_admin_style' );
add_action( 'admin_head-post-new.php', 'wpse44135_enqueue_admin_style' );
function wpse44135_enqueue_admin_style()
{
    add_action( 'admin_enqueue_scripts', 'wpse44135_enqueue_admin_style' );
}
function wpse44135_enqueue_admin_style()
{
    $scheme = get_user_meta(
         get_current_user_id()
        ,'admin_color'
        ,true
    );
    $url_css  = get_template_directory_uri();
    $path_css = get_template_directory();
    wp_enqueue_style(
         "admin_style"
        ,"{$url_css}/scripts/custom.css"
        ,array( 'wp-admin', 'ie', "colors-{$scheme}" )
        ,filemtime( "{$path_css}/scripts/custom.css" )
        ,"all"
    );
}

Alternatives?

In case you just want to add styles to the TinyMCE WYSIWYG editor, you can use add_editor_style() to register your themes stylesheet in the admin areas text editor as well. The path you add as argument is relative to your themes root. In your functions.php file:

add_editor_style( '/scripts/custom.css' );

It's as simple as that.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.