Try Tuts+ Premium, Get Cash Back!
12 Useful Customization and Branding Tweaks for the WordPress Dashboard

12 Useful Customization and Branding Tweaks for the WordPress Dashboard

This entry is part 2 of 6 in the series WordPress Dashboard Customizations

The dashboard is somewhat the heart of a blog. It controls all the content and the options of your blog. But, as we know, WordPress is not a custom product specific to one type of blog, but rather something that has been created to accommodate a wide variety of bloggers. Therefore, the contents of the dashboard can be pretty generic and might need a bit of customizing to be optimized for your website’s type. This is where plugins and tweaks come in. Today, we’ll take a look at some methods of customizing parts of your dashboard.


1. Branding The Login Screen

The login screen is your first contact with the WordPress dashboard, and it’s branding is all controlled through some CSS that’s pretty simple to manipulate. By adding custom styles, we can brand our copy of WordPress which can be especially favorable for client work or just those that don’t want the WordPress logo hanging everywhere. The code below adds our custom logo (max. 326px wide) to the login screen.

function login_styles() { 
echo '<style type="text/css">h1 a { background: url('. get_bloginfo("template_directory") .'/images/wdt_logo.png) no-repeat center top; }</style>'; 
}
add_action('login_head', 'login_styles');

The code above simply changes the style that sets WordPress’s default logo to the one you specify, whether it uses the bloginfo function to locate it within your themes’ directory, or not.

Modifying the background is also very simple, and is all handled by just styling the html tag with a background style, image or solid color. By using a combination of both the style we defined above, and the one below, we can create a result similar to the image below which is significantly different to what WordPress provides us by default.

function login_styles() { 
echo '<style type="text/css">html { background: #f0f0f0 url('. get_bloginfo("template_directory") .'/images/wdt_bg.png) !important; }</style>'; 
}
add_action('login_head', 'login_styles');

2. Removing Dashboard Menus

I don’t know about you, but there’s some parts of the Dashboard I never use, meaning they’re just left to bulk up the menu. This is unnecessary, and can easily be fixed by removing them with a function. It’s a very common tweak that I use in almost most cases with my own blogs.

In the example below, we’ve removed the Links item, but you simply have to add in another item to the array to remove another.

function remove_menus () {
global $menu;
		$restricted = array(__('Links'));
		end ($menu);
		while (prev($menu)){
			$value = explode(' ',$menu[key($menu)][0]);
			if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
		}
}
add_action('admin_menu', 'remove_menus');

If, however, we wanted to remove both the Links and Media items, we’d swap out the thrid line of the code above for the one below. From there, it’s simple to pick up on the pattern and choose your own ones to remove.

$restricted = array(__('Links'), __('Media'));

3. Customising the Admin Bar (Plugin)

WordPress introduced the admin bar in 3.1 (extending it in 3.2) to provide some quick links throughout the blog, that can be turned on and off on a user-by-user basis. This plugin customizes that bar, even going as far as to disable it entirely.

With the plugin, you get a few extra options such as a site-wide disabling of the admin bar and/or the content bump (the 28px margin that pushes your site down to accommodate the admin bar, that can cause problems with some layouts). Additionally, you can choose who sees the admin bar, so, for example, you can disable the bar for specific groups like Subscriber or Contributor.

Additionally, and potentially more interestingly, you can define custom CSS for the admin bar within the plugin’s dashboard page. Conveniently, the plugin pre-fills the input field with all the available CSS styles you can use.


4. Adding Custom Dashboard Widgets

The WordPress dashboard is a canvas for widgets, but some of them are, quiet frankly, useless. I certainly remove quite a lot of them from my dashboard, such as the WordPress news and under-featured QuickPress.

With the code below, we can add our own widgets to the dashboard. This can be useful to add custom stats, or maybe to provide contextual help. It’s pretty simple to do so, simply place whatever you want to appear within the second function. Make sure you replace your name with the third parameter of the function on line 3 too.

function my_custom_dashboard_widgets() {
global $wp_meta_boxes;

wp_add_dashboard_widget('custom_help_widget', 'My Widget Title', 'custom_dashboard_help');
}

function custom_dashboard_help() {
echo 'My widget content';
}

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

5. Removing Dashboard Widgets

Just as we can add our own custom dashboard widgets, we can remove specific dashboard widgets with ease.

function disable_default_dashboard_widgets() {

	remove_meta_box('dashboard_right_now', 'dashboard', 'core');
	remove_meta_box('dashboard_recent_comments', 'dashboard', 'core');
	remove_meta_box('dashboard_incoming_links', 'dashboard', 'core');
	remove_meta_box('dashboard_plugins', 'dashboard', 'core');
	remove_meta_box('dashboard_quick_press', 'dashboard', 'core');
	remove_meta_box('dashboard_recent_drafts', 'dashboard', 'core');
	remove_meta_box('dashboard_primary', 'dashboard', 'core');
	remove_meta_box('dashboard_secondary', 'dashboard', 'core');
}
add_action('admin_menu', 'disable_default_dashboard_widgets');

The code is pretty self-explanatory, with each line inside the function removing a different widget. We can add or remove these lines at will for each of the different default widgets.

6. Removing Dashboard Widgets According to User Role

It’s also relatively simple to disable dashboard widgets depending on user role, just by introducing an if statement (where 3 is the user level).

function customize_meta_boxes() {
    global $current_user;
    get_currentuserinfo();
    
    if ($current_user->user_level < 3)
        remove_meta_box('postcustom','post','normal');
    }

add_action('admin_init','customize_meta_boxes');

You can substitute any of the meta box removal lines from item #5 with the conditional one inside the if statement here.


7. Customising Footer Text

The WordPress footer can be edited easily, which can be used for branding. If you've, for example, designed a site for a client, the footer text gives you an opportunity to credit yourself.

function modify_footer_admin () {
  echo 'Created by <a href="http://www.envato.com">Envato</a>. Powered by <a href="http://www.wordpress.org">WordPress</a>';
}

add_filter('admin_footer_text', 'modify_footer_admin');

8. Hiding Upgrade Notices

When researching this post, this specific tweak kept appearing. It my opinion, it's not advisable since most (if not all) WordPress versions contain important security updates. However, one could also argue that some versions have the potential to break your theme and hiding this message might delay clients, allowing you to test for compatibility.

Seriously, though, try to avoid this if you can; it could lead to a client missing all future updates which might end up making their blog vulnerable to attack.

add_filter( 'pre_site_transient_update_core', create_function( '$a', "return null;" ) );

9. Hover-Over Dashboard Menus (Plugin)

This plugin - one I use on my own blog - collapses all your menu items, making all the sub-menu items available when you hover over an icon, rather than by dropping down. This saves precious space, moving obtrusive menus aside until you need them.


10. Display Google Analytics Data in the Dashboard (Plugin)

A lot of blogs use Google Analytics to power their statistic keeping, and this plugin allows you to display the results right in your dashboard. This is mainly a convenience thing, but can also fill up your dashboard that was cleaned up with some of the previous code snippets.

If your Google Analytics is, say, tied to your personal account, you can still share the statistics using WordPress as a proxy by allowing other users to view the data.


11. Logout in One Click (Plugin)

This is a very minor tweak to the dashboard (although apparently difficult to achieve), but might be helpful if you happen to need to logout a lot. Instead of requiring you to open the drop down menu to access the logout link, this plugin puts it right in the header so all you need is a single click.


12. Change Contents of Dashboard Help Tab

WordPress has a little tab in the top-right corner that, when clicked, drops down some contextual help. With the assistance of this self-explanatory function, you can hook different help text to different pages.

//hook loading of new page and edit page screens
add_action('load-page-new.php','add_custom_help_page');
add_action('load-page.php','add_custom_help_page');

function add_custom_help_page() {
   //the contextual help filter
   add_filter('contextual_help','custom_page_help');
}

function custom_page_help($help) {
   //keep the existing help copy
   echo $help;
   //add some new copy
   echo "<h5>Custom Features</h5>";
   echo "<p>Content placed above the more divider will appear in column 1. Content placed below the divider will appear in column 2.</p>";
}

Wrap-up

There we go! All the tweaks and plugins we've mentioned today go some way in tweaking the dashboard to customize it specific to the blog and the users, from Google Analytics in the dashboard to changing the color of the admin bar. Hopefully they've been of use, and any that I've missed are welcome to be shared in the comments below.


Other parts in this series:Displaying WordPress Site Data Via jQuery ChartsCustomizing the WordPress Dashboard For Your Clients
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://eskimirza.com Eski Mirza

    This is great! I have done 7 out of 12 that you have recommended in one of my previous projects. Wish we could just customize the heck out of the admin interface easily. Should have a tutorial for that. Great list btw ;)

  • http://tutspress.com/ TutsPress

    login screan and Display Google Analytics Data in the Dashboard are my favorites. thanks for this.

    • Connor Turnbull

      I was actually quite pleased at my results when I created a WPTuts+ style for the login page for the first screenshot.

      • http://tutspress.com/ TutsPress

        Yes, look very good. Can you do it for me ? :p

  • http://www.customicondesign.com/ custom icon design

    I agree with tutspress, I like the google analytics data very much. I will use it to my website later. many thanks for the share. I dont know the plugin before.

  • http://creatiface.com Thoriq

    although there are some methods that I have applied but some are not, I’ve learned something new here. like, Removing Dashboard Widgets According to User Role, that’s really nice.. :D

  • Nate

    In regards to #6.

    User levels were replaced in 2.0 with roles/capabilities and deprecated in 3.0.

    You should be using the function current_user_can( $capability )

    http://codex.wordpress.org/Function_Reference/current_user_can

  • http://wpcandy.com Ryan Imel

    I would recommend using remove_menu_page() to remove Dashboard menu items, rather than what is shown in #2.

    • http://seanbutze.com Sean

      +1. For #2 remove_menu_page() is now the preferred method.

      Also should be noted that this merely hides the tabs. In some cases it’s better to actually disable access to the features by modifying user capabilities via remove_cap

  • http://wpti.ps Piet

    Although I like the tweaks in general, I have a specific comment about 6. “Removing Dashboard Widgets According to User Role”. User levels 1-10 have been replaced for a while now and will maybe even become totally deprecated at some point in the future. It is therefore better to use named roles, capabilities or even specific user ids:

    if (!current_user_can(‘administrator’))
    OR
    if (!current_user_can(‘manage_options’))
    OR
    $user_id = get_current_user_id();
    if ($user_id == 8) { // one specific user id

  • Jeff

    I’m curious, if you make modifications to your log-in screen… does installing a wordpress update undo those changes?

    • Connor Turnbull

      Since it’s stored in your theme, no upgrades should change your tweaks unless WordPress publishes an upgrade that changes certain areas like CSS classes. For example, the login logo is based on a CSS style, and if WordPress changes that, it breaks.

  • http://www.becomealawyerhq.com Stealth86

    #9 will come integrated in WP 3.3. It’s already in the nightly-build version.

  • http://www.danielwilhelmsen.com Dan

    For number 8, I prefer to restrict it to only show for administrators. I like being able to see when I need to update, but if I don’t get to it immediately, I prefer to not cause any red flags with the clients.

  • http://colorfultones.com Damon

    I like to create a custom plugin and place in the /mu-plugins/ folder. I reuse on every client project and like to include a custom widget that has a link to a PDF with website documentation/training.

  • http://www.ryanmaurodesign.com Ryan Mauro

    I was wondering if I could get some assistance. I was attempting to employ #1 and the styling applied, but I received the following message at the top of my login screen.

    Warning: Cannot modify header information – headers already sent by (output started at /home/content/88/7618288/html/_sub/dd2011v3dev/wp-content/themes/dd2011/functions.php:29) in /home/content/88/7618288/html/_sub/dd2011v3dev/wp-login.php on line 353

    Warning: Cannot modify header information – headers already sent by (output started at /home/content/88/7618288/html/_sub/dd2011v3dev/wp-content/themes/dd2011/functions.php:29) in /home/content/88/7618288/html/_sub/dd2011v3dev/wp-login.php on line 365

    I’m using WordPress Version 3.2.1
    Thanks!

  • http://digitalvaldosta.com Digitalvaldosta

    I maybe come off as a total nube here, but I was trying to implement #5 into a theme I am creating for myself and after logging out and back in the quickpress is still on the dashboard. I even copied and pasted into the functions.php file (removing all lines that do not pertain to quickpress) and still does not work.

    Can someone please help?

    Thanks

    • http://digitalvaldosta.com Digitalvaldosta

      OK. I answered this one myself. Once I had time to come back and READ the code, I was able to notice that most of the lines of code have a word in common – function.

      So I placed the command in my functions file and viola!

      Hopefully my question/answer will help someone.

      ————————–
      There are no stupid questions, only stupid mistakes.

  • http://dosch.it Dosch

    I like the changing of the log inbox and dashboard very much because I have a multi-site and so users can easily see on which dashboard they are.
    But can these tweaks be done on one or a few sites of a multi-site?

  • Pingback: A Free wordpress newsletter » Theme.fm Weekly Roundup #6

  • http://webania.net Elliot

    İ loved it, thanks to the author. You know, sometimes it is very imtportant to change view of dashboard. Main site views is solven by theme change and editing, but most of us keeps dashboard standard, and some clients doesnt like it, because they just need to post news, to create pages and something like these. They don’t want to see unwanted widgets in their dashboard.

  • http://www.webmentor.cr/ Marco

    Oi, more work, but this is just what the Doctor ordered. Great stuff, I hope I can implement some.

    Just a quick heads up to those working with multiple clients with WP, always have a template functions file to edit and tweak this stuff out. I know it/s obvious but just started to do it after my 8th install :p

    It’s a time saver.

    Thanks guys!!

  • Pingback: wp-coder.net » Theme.fm Weekly Roundup #6

  • http://www.americanparcels.com Shawn

    Thanks for the tut, I am going to try some of these

  • http://www.funnymallus.com/ arulmjoseph

    useful information thanks very much

  • http://h 8MEDIA

    i like your post ,, it`s very nice one ,, for word press developer ,, it`s amazing ,, that they should get more customize for customer sites ,, so they can show and hide any thing ,,

  • http://www.code-pal.com Sumeet Chawla

    This is one of the most useful WordPress post I ever found!! Specially the part where you teach how to disable admin menu sections! I really needed to learn that :) Thanks a ton! :)

  • Pingback: How to by thewpguy - Pearltrees

  • Pingback: User Friendly Admin Areas for Wordpress in 2 Easy Steps - NICHMARKET

  • JP

    This tutorial is lacking the most important thing: WHERE DO ALL OF THE CODE SNIPPETS PROVIDED NEED TO GO? WHAT FIE? :/

    • http://www.marbiedesign.nl marbie design

      As far as I can see they´re all functions, so I assume in the functions.php
      I wander if they´re going to be overwritten when upgrading WordPress though?

  • http://www.ahelpingbrand.com Gayle

    Great article as I’m new to WordPress and this has explained a lot!

  • Pingback: Customize Dashboard | philipsun.net

  • Nipun

    I’m trying to incorporate these changes into the website I’m building, but they don’t seem to work. Does these changes no longer work with WordPress 3.4?

  • el mariachi

    so item 2. – in which files i do the script modifications or i add the function?
    its never written which files to open and to edit!!??

    • faina09

      @el mariachi, @marbie design, @JP:
      The best is to use a ‘child’ theme (http://codex.wordpress.org/Theme_Development#Child_Themes) and place the code in ‘functions.php’ contained into your child theme directory.
      In this way updates of WP, Themes or plugins do not affect your personalization.

  • Pingback: » Branding Your WordPress Dashboard Heckler Studios

  • Pingback: 8 Steps to a Spotless WordPress Dashboard - ManageWP

  • Brad

    Some of these techniques are outdated and require some modification for them to work. Besides that it is still a good read and I’m sure it was helpful for when it was created. Can we get an updated one?

  • http://www.facebook.com/people/Iqra-Akram/100001263136640 Iqra Akram

    good info but can you tell me how i write message or warnning for authors in welcome screen.here http://mixarticles.net