adding custom stylesheet to wp-admin

Question

im having troubles getting my custom stylesheet work on WP-ADMIN area. plugins_url('style.css', __FILE__) ); do i have to create folder in my plugins named css or do i just copy my .css to the wp-admin/css directory?

i tried both it doesnt seem to work for me.

and what values should be replaced to __FILE__?

sorry im kinda new to these stuff.

/*ADDS STYLESHEET ON WP-ADMIN*/
add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );
    function safely_add_stylesheet_to_admin() {
        wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) );
    }


/*ADDS MY CUSTOM NAVIGATION BAR ON WP-ADMIN*/
add_action('admin_head', 'custom_nav');
function custom_nav(){
    include('custom_nav.html');

}

Answer 1

According to WordPress Codex (here):

admin_enqueue_scripts is the first action hooked into the admin scripts actions.

Example

Loading a CSS or JS files for all admin area:

//from functions.php

//First solution : one file
//If you're using a child theme you could use:
// get_stylesheet_directory_uri() instead of get_template_directory_uri()
add_action( 'admin_enqueue_scripts', 'load_admin_style' );
function load_admin_style() {
    wp_register_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
    //OR
    wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
}

//Second solution : two or more files.
//If you're using a child theme you could use:
// get_stylesheet_directory_uri() instead of get_template_directory_uri()
add_action( 'admin_enqueue_scripts', 'load_admin_styles' );
function load_admin_styles() {
    wp_enqueue_style( 'admin_css_foo', get_template_directory_uri() . '/admin-style-foo.css', false, '1.0.0' );
    wp_enqueue_style( 'admin_css_bar', get_template_directory_uri() . '/admin-style-bar.css', false, '1.0.0' );
}

do i have to create folder in my plugins named css or do i just copy my .css to the wp-admin/css directory?

No, put your CSS file together with the other, in your theme directory, then specify the path with:

get_template_directory_uri() . '/PATH_TO_YOUR_FILE'

For ex my file name is admin-style.css and i put it in a folder named css my path will looks like:

get_template_directory_uri() . '/css/admin-style.css'

Hope it helps!

Answer 2

If you want to make CSS changes for the admin panel. paste the below code in functions.php of your child theme

add_action('admin_head', 'my_custom_fonts'); // admin_head is a hook my_custom_fonts is a function we are adding it to the hook

function my_custom_fonts() {
  echo '<style>
    #posts-filter table.posts{
        table-layout:auto;   
    }
  </style>';
}

Answer 3

For those who want add CSS file in admin area from custom plugin (or plugin's folder):

if (is_admin()) {

Get src if file in folder: (..myPluginFolder/myfolder/css/my.css)

$myCssFileSrc = plugins_url( '/myfolder/css/my.css', __FILE__ );

Get src if file in root plugin folder: (..myPluginFolder/my.css)

$myCssFileSrc = plugins_url( 'my.css', __FILE__ );

Enqueue (activate) stylesheet file:

wp_enqueue_style( 'my-css', $myCssFileSrc );
} //endif;

All manipulation in main plugin file (myplugin.php)