Digital

Add Custom CSS to the Admin Area

Brandon Himpfen

Brandon Himpfen

— 2 min read
Add Custom CSS to the Admin Area
Photo by Fikret tozak / Unsplash

You can customize the WordPress administration panel by adding a function to your theme's function.php file.

The custom CSS can be internal CSS, meaning the CSS is included in the web page or externally, meaning the CSS is grabbed elsewhere on your hosting account or another server. I'll show you how to do both ways.

You can also add it to the header or footer of the admin area.

Internal CSS

Here is how you add internal CSS to your WordPress admin area:

function my_admin_head() {  
        echo '<style>body{font-size: 12px;}</style>';
}
add_action('admin_head', 'my_admin_head');

The above code will add the internal CSS to your admin area's header or you can use the below code to add the internal CSS to the footer.

function my_admin_footer() {  
        echo '<style>body{font-size: 12px;}</style>';
}
add_action('admin_footer', 'my_admin_footer');

External CSS

Here is how you add external CSS to your WordPress admin area:

function my_admin_head() {  
        echo '<link rel="stylesheet" type="text/css" href="custom.css">';
}
add_action('admin_head', 'my_admin_head');

The above will add the external CSS to the header of your WordPress admin area. The below code will add it to the footer.

function my_admin_footer() {  
        echo '<link rel="stylesheet" type="text/css" href="custom.css">';
}
add_action('admin_footer', 'my_admin_footer');

The external CSS will be placed in a file named custom.css. If the CSS file is hosted on another server or if you want to provide an absolute path to the CSS file, simply modify the line that has echo in it. It would look something like this:

echo '<link rel="stylesheet" type="text/css" href="http://domainname.com/css/custom.css">';

Now, let me give you yet another option. Let's say the CSS file is in the theme directory, you can use the following adjustment:

echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('custom.css', __FILE__). '">';

My preference using one of the external methods, because it's easier to modify if you want to add, modify or subtract CSS. My recommendation is that you add it to the footer, as it's extra CSS and not necessary to generate the base style of the WordPress admin area.

Read more