Why customize the WordPress dashboard?

One of the things I really like about WordPress is the immense flexibility it offers to its users. Everything within WordPress is customizable, starting from themes, plugins, post types, taxonomies, widgets, page templates… literally everything!

What is that one screen you see regularly on WordPress, but might not have customized so far? Yes, the dashboard. I have been using WordPress since long now myself, and very rarely have I seen someone spending time changing things on the dashboard. I think that is because people care more about what readers see, rather than what they see on the dashboard.

I know there are a many admin themes out there, of course not as much as the regular themes, but there are definitely interesting options. I have tried a few admin themes myself, but I was never really impressed, as most of them generally offer just another UI. Or may be that’s just me 😛

However, the dashboard, in generally should be one of the most productive and useful screen on your site.

We will have a look at the methods to customize the WordPress admin area, how to introduce changes to it manually, and a number of plugins that also get the job done.

How to customize the WordPress dashboard?

Customize the login page

A user experience for users begins even before thy use your dashboard, right at the login page. Lets see how we can improve it.

For instance, to change the WordPress logo on the login form to use your logo instead. You can use the following code snippet for that:

<?php
function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/login-logo.png);
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
?>

Make sure you replace the image path to match with your logo file. You can have this right into your WordPress Media library, or in a images directory within your child theme’s directory. The recommended image size to be used here is under 80×80 pixels in size.

If you wish to, you can go beyond this and customize your login page even further using custom CSS. If you plan to make CSS changes the best practice is to enqueue the custom style sheets. Here is how to can do it.

<?php
function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_template_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
?>

Here are a few suggestions from WordPress Codex for CSS operators to customize your backend:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Do you want to go further? You can build your own login page template. Here are the instructions to do so.

Utilize the user roles

Though you can code everything yourself, WordPress offers a bunch of option built-in to make things easier. User roles in WordPress are one of those.

All the users in WordPress are assigned certain roles, according to which they have pre-defined capabilities with define what the user can and cannot do.

Obviously the administrator is the role with all the capabilities. If you are building sites for clients, you can choose to have just one administrator i.e. yourself and make other users with only the capabilities required for the client. The more options you leave open, the more chances of things going wrong, its always good practice to restrict users to only action they are expected to perform.

For instance, if the client need to write, edit and publish post but not change the theme or update plugin, an author profile is perfectly suitable for this purpose.

Obviously you can change roles for the users whenever you need to. Additionally if you find the pre-defined roles aren’t fitting your needs you can modify the user capabilities. There are several plugin to do so. User role editor is something I would recommend for customizing user roles.

De-Clutter the menu items

According to the roles, users have different menu items available for them. Sometimes you may come across a scenario where you might want to hide certain menu items.

There are two function which can help you to do it:

• remove_menu_page()

• remove_submenu_page()

Here is an example to remove one of the pages from the admin menu, using the remove_menu_page( $menu_slug )

<?php
function custom_menu_page_removing() {
    remove_menu_page( $menu_slug );
}
add_action( 'admin_menu', 'custom_menu_page_removing' );
?>

With using current_user_can() function, you can go further to limit the users according to the user roles. For instace the below example show how you can hide the plugins page from the menu for any user that is not the admin:

<?php
function remove_menus(){
     if ( !current_user_can( 'manage_options' ) ) {
          remove_menu_page( 'plugins.php' );
     }
}
add_action( 'admin_menu', 'remove_menus' );
?>

You can check for slugs for the different menus in WordPress Codex. By the way, this methods just hides the menu item from the dashboard, which means the page is still accessible if the complete address is typed in the browser.

Using the Screen options

Another and often less used built-in feature for customizing the dashboard are Screen options. Screen options lets you to show/hide almost everything visible on the backend screen.

For instance, if you don’t use categories on your posts, you can simply disable them. This also work for excerpts, tags, track backs, redirections, everything else you can find on the screen options.

[wpvideo Awygo1HV]

The screen options even allow you to determine how many comments to display in the comments menu. All you need to do is find them in the upper right corner on any screen and use the check boxes to make elements appear and disappear.

The best thing: Screen options are saved on a user basis so you can customize screens for each person on your site.

Adding custom widgets to WordPress dashboard

Now that we know how we can reduce clutter from the dashboard and hide widgets, lets look into how we can create a custom widget. Here is a sample code which you can use to add custom widget to the dashboard which you can use to display any content you want:

<?php
function add_custom_dashboard_widgets() {

        wp_add_dashboard_widget(
                     'my_custom_dashboard_widget', // Widget slug.
                     'My Custom Dashboard Widget', // Title.
                     'custom_dashboard_widget_content' // Display function.
            );
    }

    add_action( 'wp_dashboard_setup', 'add_custom_dashboard_widgets' );

    /**
     * Create the function to output the contents of your Dashboard Widget.
     */

    function custom_dashboard_widget_content() {
        // Display whatever it is you want to show.
        echo "Hello there, I'm a Dashboard Widget. Edit me!";
    }
 ?>

You can change the line “Hello there, I’m a Dashboard Widget. Edit me!” to whatever you need to make your widget appear.

For instance, you can add a custom welcome message for your client with links to documentation and support etc. Users new to WordPress often get lost and don’t know what to do next, such help widgets can be used to guide them using hyperlinks to help.

For such case you can add information like this:

<?php
function custom_dashboard_widget_content() {
     echo "Hello Client, please remember to stay away from the plugins menu.</br>If you have any need of assistance, please don't hesitate to contact us under:
     <ul>
         <li>http://yourwebsite.com</li>
         <li>0-00-000-000</li>
     </ul>
     ";
    }
 ?>

You can replace the link and the phone number to match with your contact details.

You can customize this further to add your own help tabs to pages for more information:

<?php
function setup_help_tab() {

$screen = get_current_screen();

if ( 'post' == $screen->post_type ) {

get_current_screen()->add_help_tab( array(
'id' => 'post',
'title' => ( 'How to Publish a Blog Post' ),
'content' => '<strong>To publish a blog post, please follow the steps below.</strong>
<ul>
    <li>Locate big, blue <em>Publish</em> button.</li>
    <li>Click it.</li>
    <li>Well done.</li>
</ul>
',
) );
}
}
add_action( 'admin_head', 'setup_help_tab' );

?>

The example above will add the information to the Help button they can find on almost any screen.

Disable theme and plugin editor

Personally, I am not a big fan of the theme and plugin editor within the WordPress dashboard. I know a lot, who might not feel the same about it. The primary reason I don’t like it is because it leaves the ends open to users who are not very familiar with the code, and the worst part if while editing, they go wrong, the dashboard may not be accessible any more for them to undo the changes. This not only creates a panic for the users, but also leaves the developer in a difficult situation.

Not to mention the addition security risk involved with it; anyone who can access you dashboard (both legitimately and illegitimately), can make any changes to your site and possibily bring it down.

Also, since mostly you will work on edits to the theme and plugin from FTP or from a dev/staging environment, you won’t need this on the dashboard.

That being said, here is how you can disable it, by adding this to your wp-config.php:

define( 'DISALLOW_FILE_EDIT', true );

Edit the dashboard footer

Since we are talking about all the aspects of customizing the WordPress Dashboard, why not change the footer too.
It usually says “thank you for creating with WordPress”.

It is a great place to let your client know who built their site for them. Here is how you can do it, just adding this to the function.php will do the trick:

<?php
function change_admin_footer(){
     echo '<span id="footer-note">From your friends at <a href="http://www.yourdomain.com/" target="_blank">XYZ Web Studio</a>.</span>';
    }
add_filter('admin_footer_text', 'change_admin_footer');
?>

Feeling adventurous? How about making a custom dashboard page? 

You can build a custom dashboard page according to your choice. You will have to build a plugin for it. It is a comparatively longer discussion and I hope to share it soon. I will update a link here when I do so.

If you are thinking about having your own WordPress backend, WP Explorer has an excellent article to get you started.

Plugin suggestions:

There are several plugin you can make use of to get these changes done. Here is a list of plugin I think can be helpful:

Admin Menu Editor

Wp Admin UI Customize

White Label CMS

WP Help

Tabify Edit Screen

Fancy Admin UI

Dashboard themes:

Slate Admin Theme

First WordPress Admin Theme

I hope you find this post useful. Let me know if you know any more hacks to customize the WordPress dashboard that I might have missed. Feel free to open a discussion below in the comments.