Last modified: October 28, 2015

Previously, I have covered a complete guide with the help of which you can custom your WordPress admin panel style and branding without messing with the custom codes. But that requires usage of 3rd party plugins. This time, I tell you how to customize admin panel design without any 3rd party plugin, adding some code to your theme function.php or to a new plugin (that is really easy).

Custom CSS for WordPresss Admin Panel

Actually, WordPress makes it damn easy to style admin dashboard, providing custom functions to get added either in a plugin or in your theme function.php. I suggest you to add it in an independent plugin. Storing all your custom functions in a separate plugin keeps your customizations safe from overwriting code due to the theme update etc. Additionally you can enable or disable your custom styling just by deactivating and activating your custom plugin.

 

By adding code to your theme function.php

Simple put the following code in your function.php

 

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style>
body, td, textarea, input, select {
font-family: "Lucida Grande";
font-size: 12px;
} 
</style>';
}

 

In this code, you can replace red text with any selector in admin panel CSS. And you can add as many CSS rules between starting and closing tags <style>      </style>

By creating own custom CSS plugin

  • Create a new php file and put the following code
<?php
/*
Plugin Name: My Admin CSS
Plugin URI: http://yourdomain…/
Description: Custom Admin styles.
Author: Any nameVersion: 1.0
Author URI: http://example.com
*/
function my_admin_theme_style() {
wp_enqueue_style('my-admin-theme', plugins_url('wp-admin.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'my_admin_theme_style');
add_action('login_enqueue_scripts', 'my_admin_theme_style');
?>
  • Now create a folder in wp-content/plugins folder and give this folder a name (it is the folder where you will put the created plugin php file).
  • In this created folder place your created php file
  • Also create a file wp-admin.css in this folder (in this CSS file, you can add custom CSS for your admin panel)
  • Now, go to your WordPress dashboard and activate the created plugin

You can add custom CSS into your plugin CSS file in two ways;

  1. editing wp-admin.css via FTP or hosting file manager or
  2. editing wp-admin.css via WordPress dashboard > Plugins > Editor > created plugin > wp-admin.css

Way 1 is more comprehensive, and it doesn’t let you stuck anywhere while editing CSS (but requires access to FTP or hosting panel). On the other hand, way 2 is easy, but you may get stuck due to applying wrong CSS. For instance, if you accidentally hide admin wrapper, all content will be disappeared in admin panel. You can’t then edit admin css via admin panel. In that condition, you need to access css file via FTP or hosting file manager. (specially, editing php files via FTP (or file manager) is recommended)

About Shams

Shams, a professional blogger, has expertise in WordPress and Web Hosting. He is used to playing around with WordPress plugins, themes, web hosting services and some other innovative stuff regarding web design. He sifts out good stuff for web designers and reviews it to help them choose what they really need.

Being an energetic tech enthusiast, he regularly pens down breaking news and tutorials related to technology particularly Smartphones and other gadgets. Sometimes writes tech tips too. It was the dawn of Internet age when he started dabbling in it and has since been delving into the realm of the internet. He occupies a permanent burrow in virtual world.

He can be reached at.- here

Related Post

Increase more than 700% of Email Subscribers!
Dolor aliquet augue augue sit magnis, magna aenean aenean et! Et tempor, facilisis cursus turpis tempor odio. Diam lorem auctor sit, a a? Lundium placerat mus massa nunc habitasse, arcu, etiam pulvinar.
  We hate spam and never share your details.
Blogging and Web Design
GET IT NOW
500% MORE SUBSCRIBERS
EFFICIENCY
BOOST YOUR SALES
CREATIVITY
INSPIRE YOUR VISITORS
BE UNIQUE
CREATE UNIQUE POPUPS
Get amazing content to your mailbox
We never bother our subscribers and, we deliver what they want
Your Information will never be shared with any third party.
You are successfully subscribed to webcusp newsletter. Please check your mail and confirm your subscription.
Subscribe for Updates
We never bother our subscribers and, we deliver what they want
Your Information will never be shared with any third party.
You are successfully subscribed to webcusp newsletter. Please check your mail and confirm your subscription.
Follow us for exclusive content