Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

2 Answers 2

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

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', 'wpse44135AttachAdminStyle' );
add_action( 'admin_head-post-new.php', 'wpse44135AttachAdminStyle' );
function wpse44135AttachAdminStyle()
{
    add_action( 'admin_enqueue_scripts', 'wpse44135EnqueueAdminStyle' );
}
function wpse44135EnqueueAdminStyle()
{
    $scheme = get_user_meta(
        get_current_user_id(),
        'admin_color',
        true
    );

    wp_enqueue_style(
        "admin_style",
        get_template_directory_uri()."/scripts/custom.css",
        array( 'wp-admin', 'ie', "colors-{$scheme}" ),
        filemtime( get_template_directory()."/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
    
I get a "Fatal error: Cannot redeclare wpse44135_enqueue_admin_style() (previously declared " when trying this. –  songdogtech Dec 9 '13 at 19:12
    
@songdogtech "Cannot redeclare" explains that a function, method, etc. was already declared_/set. Problem _was that I used the same function name twice. For the future: Please just google plain PHP errors and file and edit. Thanks. –  kaiser Dec 9 '13 at 19:25
    
I didn't know how to fix the error, that's what I commented. –  songdogtech Dec 9 '13 at 20:04

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.