How to override wp-admin styling

How can I copy the default styling for the admin and tell wordpress to use custom style instead of the default? Basically I want to change the colour and font without having to use !important syntax to force Wordpress to use it.

Topic jquery-ui php templates wp-admin Wordpress

Category Web


In WordPress 5.x you can use the following hooks to add CSS to either the admin pages or the post edit page.

enqueue_block_editor_assets to add your own styles to the Gutenberg page

admin_enqueue_scripts to add your own styles to the admin pages

You can add the hooks in your functions.php theme file.


As noted by @Fusion, this has changed beginning with version 5. In order to override admin styles for 5.*, you need a hook in functions.php, something like this:

function custom_admin() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/themes/my-theme/wp-admin.css';
    echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}
add_action('admin_head', 'custom_admin')

Sources:
Wordpress Codex
isitwp Snippet

Please note the the isitwp Snippet erroneously mixes html entitites with angle brackets. You should use angle brackets not entitieis.


Enqueue custom admin CSS file (custom-admin.css) in your WordPress backend using below function:

add_action('admin_print_styles', 'custom_admin_css');
add_action('wp_enqueue_scripts', 'custom_admin_css');

function custom_admin_css() {
    if (is_admin()) {
        wp_enqueue_style("custom-admin-css", get_bloginfo('template_directory'). "/custom_admin.css", false, false, "all");
    }
}

Hope this works..!!

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.