How to Customize your WordPress Admin Area
Join LonePlacebo.com on Facebook!
Without a doubt, customizing every little aspect of your life will never grow old. No, you don’t want a plain old iPhone 4. You want one with 6.5 carat diamonds plastered all over it. Why? Because you are special. Everyone wishes they were like you. That’s why you have to continue standing out from the rest of the crowd and letting everyone know, well, you are damn important.
In this post, I will show you how you can:
- Customize your login screen
- Add a favicon to your dashboard page
- Change the footer text
- And more!
-
Add a Different Favicon to Your Dashboard
-
Customize the Admin Footer Text
-
Replace the default WordPress logo with your own custom dashboard logo
-
Customize your WordPress Login Screen
-
Add or Remove Buttons in the Writing Panel
-
Even simpler ways to customize!
- Collapse the left sidebar
- Hide Dashboard Modules
- Change the Color Scheme
- Adjust the Post Box Size
I’m probably guessing that you bookmark both your website and dashboard page on your browser. Before, it was difficult distinguishing either link because they shared the same favicon. With this technique, you can add a custom favicon to your WordPress admin easily. Simply copy and paste the following code into your theme’s function.php file and make sure you upload a new favicon.ico to your theme’s image folder.
// add a favicon for your admin
function admin_favicon() {
echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('stylesheet_directory').'/images/favicon.ico" />';
}
add_action('admin_head', 'admin_favicon');
Source: DigWP
Tired of the default footer text taking residence in your WordPress Admin? I couldn’t agree more. This technique is especially useful when designing websites for clients, and it’s also your way of branding your custom themes. Simply copy and paste the following into your functions.php file. Of course, make sure you edit the echo statement to fit you.
// customize admin footer text
function custom_admin_footer() {
echo 'Website Design by <a href="http://loneplacebo.com/" title="Visit LonePlacebo.com for more information">Tony Hue</a>';
}
add_filter('admin_footer_text', 'custom_admin_footer');
Source: DigWP
Same technique as before…copy and paste the following code to your functions.php file and upload your own custom logo to your theme’s images folder. Easy? I think so.
//hook the administrative header output
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '
<style type="text/css">
#header-logo { background-image:
url('.get_bloginfo('template_directory').'/images/custom-logo.gif)
!important; }
</style>
';
}
Source: WPBeginner
Forget about using a plugin for this! All you have to do is: a) edit your functions.php file b) create a custom-login.css file. As you can see in the example below(click to enlarge), knowing a bit of CSS will do you wonders.
First, paste the following into your functions.php file.
//Custom Login Page
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login/custom-login.css" />';
}
add_action('login_head', 'custom_login');
Then, create a new CSS stylesheet and name it custom-login.css. Copy and paste the CSS below into the newly created stylesheet. Place it in a new folder called custom-login. Then, upload the folder to the root of your theme’s files.
/* Custom Login Styles */
html {background:url("bg-gradient.png") repeat-x scroll 0 0 #FF0000 }
h1 a { background:url("brand2.png") 0 0 no-repeat; width:330px; height:130px; }
h1 a:hover {border: none;}
#backtoblog { background: -moz-linear-gradient(100% 100% 90deg, #FFFFFF, #E4E4E4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E4E4E4)); }
body.login {border-top-color:#dff4fc;}
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;}
a {color: #FF0000; text-decoration: none;}
a:hover {color: #AB0404; }
.login #nav a { color:#FFF !important; }
.login #nav a:hover { color:#D5D5D6 !important; }
These styles are based off the one provided in a tutorial at Pro Blog Design. Note: The default styles of the login page can be found in the css folder in your wp-admin directory. Look for login.css. Don’t expect to easily skim through it though, as the file is compressed. I suggest you view it using Firebug.(Fuuuuuuuuuuuuuuuuuu!)
Source: Pro Blog Design
DigWp wrote an article about how you could customize your writing panel’s shortcut buttons here. Unfortunately, the method wasn’t foolproof since it required you to edit the quicktags.js file in the wp-includes folder. Any changes you make there would be quickly annihilated once you upgrade your WordPress installation.
Unfortunately, the only valid solution to achieve this customization would be to use a plugin. David Gagne created a plugin called the Ultra Quicktags plugin which does all the work for you, and ensures that any future upgrades to WordPress will be safe and sound.
You see one of these arrows in your dashboard’s left sidebar? Well, you can collapse the sidebar by simply clicking on it, leaving only the icons. This tip is especially useful if screen space is a luxury.
What? How on earth are you not familiar with this? Clicking on the Screen Options button on the top-right corner of your admin pages, will allow you to add or remove modules on your screen. Wicked! Remember, this is not only exclusive to the Dashboard page.
Under Users > Your Profile, you can change the color scheme of your user’s dashboard. Unfortunately, WordPress only offers 2 options, light-grey and blue. Worse yet, they offer no way for you to create your own custom color scheme…Unless of course, you use a plugin! Hooray! For this, you will need to install the Easy Admin Color Schemes plugin by James Dimick.
Under Settings > Writing, you can adjust the size of your post box when you are writing a blog post. I set mine to 20 lines.
For the lazy bunch…
If all of these sounds to difficult to accomplish for you, there are colonies of valuable plugins at your disposal. You can start by looking here: 13 Great WordPress Plugins to Power Up Your WordPress Admin
Related posts:
- 5 Solutions to Common WordPress Problems
- Yet Another SEO Plugins for WordPress List
- How to Install MAMP on OS X for Local WordPress Theme Development
- 4 Ways to Maximize Your WordPress.com Blog
- 10 WordPress Tips to Take You to the Next Level
Thank you so much!
I was looking for a way to add a favicon to my admin area because I’m keeping the dashboard open all of the time in an “App Tab” which only shows the favicon as identification.
Tom´s last blog ..Why Don’t You Go to the Dentist