How to Customize your WordPress Admin Area


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!

  1. Add a Different Favicon to Your Dashboard

  2. 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

  3. Customize the Admin Footer Text


  4. 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

  5. Replace the default WordPress logo with your own custom dashboard logo

  6. 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

  7. Customize your WordPress Login Screen

  8. 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 '
    ';
    }
    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(&quot;bg-gradient.png&quot;) repeat-x scroll 0 0 #FF0000	}
    
    h1 a { background:url(&quot;brand2.png&quot;) 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

  9. Add or Remove Buttons in the Writing Panel

  10. 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.

  11. Even simpler ways to customize!

    • Collapse the left sidebar
    • 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.

    • Hide Dashboard Modules
    • 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.

    • Change the Color Scheme

    • 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.

    • Adjust the Post Box Size
    • 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

Tony is the founder of LonePlacebo and is interested in startups, web design, and software. He currently attends the University of California, Irvine, majoring in Business Administration.