Wordpress is a great CMS, but out of the box the administration panel is quite generic. When designing a good website, making the administration panel usable makes the difference between a good site and a great site.

Adding custom CSS styles to your page templates is a snap, simply add a link to the page header or the page template file itself. No problem there. But how would we add CSS styles to the administration arera? The wrong way would be to modify the WordPress core, of course every time we do that Domo goes on a rampage against harmless kittens (see this link). The biggest reason for not hacking the core is that if we ever update it, your modifications will be over-written.

The right way to add CSS to the administration panel therefore is to use a ‘hook’. Hooks allow us to inject our own code at various points of execution. In our case, we would like to inject our code while WordPress is generating the administration panel head content.

[code language=”php”]

function customAdminCSS() {
$url = get_settings(‘siteurl’);
$url = $url . ‘/wp-content/themes/my-theme/public/styles/admin.css’;
echo ‘<!– custom admin css –>
<link rel=”stylesheet” type=”text/css” href=”‘ . $url . ‘” />
<!– /end custom adming css –>’;
}
add_action(‘admin_head’, ‘customAdminCSS’);

[/code]

In this example, we are adding a link to a custom stylesheet called admin.css which we have placed in our theme folder. Now all we need to do to alter the administration panel CSS is add styles to the sheet, all without risking losing our work due to a core update.

If you need help making your administration panel work smarter, get in touch with A. Thiel Marketing today.