Introduction

WordPress is an open source content management system. At the time of the writing of this blog, WordPress sites make up 14% of the total websites on the web.

Overview

  1. Part 1: Customising the WordPress login page
  2. Part 2: Customising the WordPress dashboard

Part 1: Customising the WordPress login page

The default login page ( see screenshot below ) shows the WordPress logo and the login form. The WordPress logo links back to the official WordPress website.

As this might be the first page a client sees when you are showing them the initial work on their website, it is nice to customise this page and make the client feel that their site is unique.

Default login page screenshot

We can easily change the default logo to the client's logo. We can also change the link to go back to the homepage along with the text for the title of the link. By default, the logo links back to the WordPress site.

Changing the link and link title of the Logo

The following code will change the link of the logo and also the title of the link.

/** 
 * This function changes the URL of the image on the login page 
 * to link to the homepage 
 * 
 * @author      Colin Murphy <colin@studioforty9.com>
 * @copyright   (c) 2013, StudioForty9
 * 
 */
function sf9_login_image_url() 
{
    return get_site_url();
}
add_filter('login_headerurl', 'sf9_login_image_url', 99, 0);

/** 
 * This function changes the title URL of the image on the login page 
 * 
 * @author      Colin Murphy <colin@studioforty9.com>
 * @copyright   (c) 2013, StudioForty9
 * 
 */
function sf9_login_title() 
{
    return __("&laquo; Back to the Homepage", "Theme Name");
}
add_filter('login_headertitle', 'sf9_login_title');

Changing the login image

To change the login image we use the WordPress filter to include the stylesheet using wp_enqueue_style.

/** 
 * This function adds a stylesheet to change the WordPress Login Page 
 * 
 * @author      Colin Murphy <colin@studioforty9.com>
 * @copyright   (c) 2013, StudioForty9
 * 
 */
function sf9_login_logo() 
{
    wp_enqueue_style('sf9-login-css', get_stylesheet_directory_uri() . '/assets/css/login.css');    
}
add_action('login_head', 'sf9_login_logo');

In the stylesheet we use the id login to change the image of the logo.

#login h1 {
    text-align: center;
    width: 326px;
}

#login h1 a { 
    background: url(../img/logo.png) top center no-repeat; 
    background-size: auto;
    display: block;
    margin: 0 auto 10px;
    height: 48px;
    width: 226px;
}

Finally, our login page should look like the screenshot below. You can add as many different styles as you wish but for the purpose of this tutorial we kept the style changes to a minimal.

Improved login page screenshot

Part 2: Customising the WordPress dashboard

One issue I find with WordPress is that the dashboard is very congested when you login. As WordPress has tried to improve the user's experience, it has overflowed the dashboard with too many widgets.

This can be very intimidating to clients as, in my opinion, it offers too many options to a client. The dashboard should be simple and give simple instructions to a client on how to use the website.

WordPress default dashboard

In this next section we are going to remove all of the default WordPress widgets and add our own dashboard widget to help the client.

This widget will provide customised documentation for the client - detailing how to use their WordPress site.

Remove the WordPress default dashboard widgets

The following code will remove all the default WordPress dashboard widgets.

<?php
/**
 * This removes all the default widgets from the WordPress dashboard
 * 
 * @author      Colin Murphy <colin@studioforty9.com>
 * @copyright   (c) 2013, StudioForty9
 */

function sf9_remove_dashboard_widgets() 
{
	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
	remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );
	remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
	remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );
	remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'side' );
	remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
	remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
	remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' );
	remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
}
add_action('wp_dashboard_setup', 'sf9_remove_dashboard_widgets' );
?>

You should be left with just the WordPress welcome panel as shown in the screenshot below.

WordPress dashboard with the welcome panel

If you want to remove the welcome panel, add the following line of code to your functions file.

<?php
remove_action('welcome_panel', 'wp_welcome_panel');
?>

You should now be left with an empty dashboard as shown in the screenshot below.

WordPress dashboard - clean

Please note that plugins may add their own widgets to the dashboard. You will either need to read the plugin's documentation to remove the widget or contact the plugin's developer about how to remove the widget.

Adding a dashboard help widget

The final part of this blog post will outline how to create a dashboard help widget. We will be using jQuery UI tabs to seperate the different sections of content.

Registering the JavaScript

Firstly, we will register the JavaScript and CSS using wp_register_script and wp_register_style.

<php
/** 
 * This function registers the JavaScript and CSS for the dashboard help widget
 * 
 * @author      Colin Murphy <colin@studioforty9.com>
 * @copyright   (c) 2013, StudioForty9
 * 
 */
function sf9_register_help_script_styles()
{
    $url = get_stylesheet_directory_uri();
    wp_register_script('sf9-help-js', $url . '/assets/js/help.js', array('jquery-ui-tabs'));
    wp_register_style('sf9-help-css', $url . '/assets/css/help.css');
}
add_action('init', 'sf9_register_help_script_styles', 999, 0);
?>

This registers the JavaScript file and tells WordPress to load jQuery UI Tabs when the script is called using wp_enqueue_script. It will also registers the CSS to style the dashboard widget.

Creating the JavaScript file

We add the following code to the help.js JavaScript file. This will add the tabs to our div sf9-tabs which we will create shortly.

jQuery(function($){
    $( "#sf9-tabs" ).tabs();
});

Styling the widget

We will add the following CSS to our help.css file.

/** General **/
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}

/** Tabs **/

#sf9-tabs #sf9-nav {
	border-right: 1px solid #DDD;
	float: left;
	margin-right: 19px;	
}
#sf9-nav li a {
	border: 1px solid transparent;
	-webkit-border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
	color: #555;
	cursor: pointer;
	display: inline-block;
    outline: none;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin-right: -1px;
	margin-bottom: 5px;
	padding: 8px 12px;
	line-height: 18px;
	min-width: 80px;
}
#sf9-nav li a:hover {
	background: #d7d7d7;
	border-color: #eee #ddd #eee #eee;
}
#sf9-nav li.ui-state-active a {
	background: #fff;
	border-color: #DDD transparent #DDD #DDD;
}

/** Content **/

.tab {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	float: left;
	padding: 5px 0 0;
	width: 410px;
}

#sf9-tabs h3 { 
	color: #333;
	font-size: 1.6em;
	line-height: 1.4em;
	font-family: Georgia, sans-serif;
	margin: 0 0 1em;
}

#sf9-tabs h4 { 
	color: #555;
	font-size: 1.2em;
	line-height: 1.3em;
	margin: 1.5em 0;
}

.tab ul { 
    list-style-position: inside; 
    list-style: disc; 
    margin: 1em 2em;
}

.tab li { 
    margin: 10px;
}

Adding the widget

Finally, we will register the dashboard widget in our functions file and output the widget.

The following code below will register the dashboard widget, add a welcome message with the client's name and call another function that will display the content using wp_add_dashboard_widget hook.

<?php
/**
 *  This function adds the dashboard widget and registers a function that outputs
 *  the content for the widget
 *  
 *  @author      Colin Murphy <colin@studioforty9.com>
 *  @copyright   (c) 2013, StudioForty9
 */
function sf9_add_dashboard_widgets() 
{
    global $current_user;
    get_currentuserinfo();
    $name = ucwords($current_user->user_login);
    $string = sprintf('Welcome, %s', $name);
    wp_add_dashboard_widget('sf9_dashboard_widget_id', $string, 'sf9_create_dashboard_widget');	

}   
//Add Dashboard
add_action('wp_dashboard_setup', 'sf9_add_dashboard_widgets' );
?>

The final part is to call the function that will add the JavaScript files and CSS Files. It will also then output the content for the dashboard widget.

<?php
/**
 *  This function adds the content for the dashboard widget and also output the
 *  the relevant JavaScript and CSS files
 *  
 *  @author      Colin Murphy <colin@studioforty9.com>
 *  @copyright   (c) 2013, StudioForty9
 */
function sf9_create_dashboard_widget() 
{	

    // Jquery UI
	wp_enqueue_script('sf9-help-js');
	wp_enqueue_style('sf9-help-css');

echo <<<HTML
<div id="sf9-tabs" class="clearfix">

    <ul id="sf9-nav">
        <li><a href="#sf9-tab-1">Section 1</a></li>
        <li><a href="#sf9-tab-2">Section 2</a></li>
        <li><a href="#sf9-tab-3">Section 3</a></li>
   </ul>

    <div id="sf9-tab-1" class="tab">

        <h3>Overview</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
        </ul>

    </div>

    <div id="sf9-tab-2" class="tab">

        <h3>Overview</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
        </ul>

    </div> 

    <div id="sf9-tab-3" class="tab">

        <h3>Overview</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
        </ul>

    </div> 

</div>
HTML;

}
?>

For more information on how to creates tabs, please visit the official jQuery UI Tabs website for documentation.

You should now see your dashboard help widget when you login as shown in the screenshot below.

WordPress Help Widget

Conclusion

WordPress has come a long way in terms of UI and usability in recent years and is continuously improving with each regular update.

This, however, should not stop you giving your client the best possible experience when using their WordPress site, and you can start achieving this by customising their content management system in the ways detailed above.

One of the strengths of WordPress is how easy it is to add in hooks and filters to change its appearance - and this will suit everyone, especially your client!