Register WP-Admin Stylesheet

Support
Topic WordPress, Design
Access FTP, WP-Admin
wp-content/themes/theme/functions.php
+ wp-content/themes/theme/admin-style.css

Quickly register and enqueue a stylesheet so you can apply your own CSS to the WordPress Admin without using a plugin.

We’re pretty big on styling the WordPress admin at Stackpilot, but we’re not big fans of using plugins for such simple tasks, like simply adding a CSS file for WP-Admin. Out of the box, WordPress does not ship with the capability to add your owns styles to the WP-Admin. Some commercial themes come with a few features for adjusting the style, and a handful of plugins can allow you to extensively modify WP-Admin.

The problem with these plugins is that they do too much, in our opinion. We really don’t want to overdo it or change the WP-Admin panel much. We don’t want clients who are familair with WordPress to have to get comfortable with a new UX, but we like to clean things up and make them feel like their WordPress installation might be just a little more custom than what they previously had.

Lets take a quick look at a lightly modified WP-Admin.

Aside from adjusting colors we’ve really only done a few slight changes to the basic styling, keeping true to WordPress’ form. We are making use of Advanced Custom Fields and Admin Columns Pro on the above screenshots as well. And here’s how easy it is to get started:

Navigate to your theme or child-theme’s functions.php and add the following snippet of code:

//Admin CSS Override
function sp_admin_style(){
    wp_register_style( 'sp_admin_css', get_bloginfo('stylesheet_directory') . '/admin-style.css', false, '1.0.0' );
    wp_enqueue_style( 'sp_admin_css' );
}
add_action('admin_enqueue_scripts', 'sp_admin_style');

Once you’ve done that, simply create a new file in your theme’s folder and call is admin-style.css, open it up and begin writing some CSS!

Login
Resources
Status
Contact

Quick Open Ticket

You can quickly open a ticket without logging in. Be sure to use your login email address and include the web address of your service.