How To Apply Custom CSS to Admin Area
Quick Summary
- Hook a function to admin_head that echoes a style block, so your CSS applies to every admin screen but not the front end.
- Write your rules between the empty style tags, and rename my_custom_fonts to something unique so it can't clash with another function.
- For more than a few lines, load a stylesheet with wp_enqueue_style on admin_enqueue_scripts instead, since that is easier to maintain.
Sometimes you want to adjust the look of the WordPress dashboard: hide an element, widen a field, change the admin font or tidy up a plugin’s settings page. This small function lets you add custom CSS to the head of every admin page.
Add it to your child theme’s functions.php or to a custom plugin, then write your CSS rules between the <style> tags.
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style>
</style>';
}How it works
- The
admin_headaction runs inside the<head>section of admin pages only, so the styles don’t affect the front end of your site. - The function simply echoes a
<style>block. It’s empty for now; any rules you add inside apply to every admin screen. - The name
my_custom_fontscomes from the original example, which changed the admin fonts. Rename it to something unique to your project so it can’t clash with another function of the same name.
For more than a few lines of CSS, a separate stylesheet loaded with wp_enqueue_style() on the admin_enqueue_scripts hook is easier to maintain.
The original snippet is on CSS-Tricks: Add CSS to Admin.
Related articles
- a Featured Image column in the posts list: another dashboard change from functions.php
- an icon for a plugin’s admin menu page: style your own admin menu entry
- hiding the update notice for one plugin: remove a notice with a filter instead of hiding it with CSS
