Creating Personal Branding for Your WordPress Backend

by in Design on 3rd Aug 2011 · Comments

WordPress has come a long way since its launch on May 27, 2003. It is an open source Content Management System and critics have left no stone unturned to criticize the open source nature of the award winning CMS. Defying all odds, WordPress was adopted by plenty of brands as their blog’s Content Management System. This tutorial will help you hack through the most famous Content Management System and make it a lot more personal like the Le-Hiboo login page.

Creating Personal Branding for Your WordPress Backend

Getting Started

Although plugins are always an option to customize the WordPress Dashboard yet their functionality breaks in case of third party themes. Therefore, I would personally suggest editing your theme’s functions.php to avoid confusion.

Removing the WordPress Logo from the Login Page

You will definitively receive positive reviews from your client if he is greeted with his brand’s logo instead of the WordPress logo on the login screen. Open your theme’s functions.php and paste the below code into it:

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo.jpg) !important; }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

Removing the Logo From the Dashboard

You can remove the WordPress Logo from the dashboard to enhance personalization experience for your client. Paste the below code in your theme’s functions.php and you are done.

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/logo.jpg) !important; }</style>';
}

Note: There isn’t enough space in the Dashboard to display a full size logo. Therefore, I would suggest webmasters either use a small logo or otherwise use their favicon sized logo.

Changing the Colour of WordPress Dashboard's Header

Use the code below in your functions.php to edit the look and feel of your WordPress dashboard’s header. Remember to change the colour codes as per your choice.

// Editing the WordPress Dashboard Header
function wp_admin_dashboard_header_colour() {
echo '<style type="text/css">#wphead{background:#000000;
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#7684hg), to(#730fvk));
}
#wphead h1#site-heading a{color: #ggg;}
#wphead h1#site-heading a:hover{color: #fff;}
#wphead #wphead-info #user_info{color: #ggg;}
#wphead #wphead-info #user_info a{color: #ggg;}
#wphead #wphead-info #user_info a:hover{color: #fff;}
</style>';
}
add_action('admin_head', 'wp_admin_dashboard_header_colour');

Remove items from your WordPress Dashboard's Menu

If you customize a WordPress theme for your client and give him admin access to the WordPress dashboard then you will surely be bugged with questions regarding all the available features of the dashboard. Therefore, it is suggested that you remove the menu items that you want your clients to ignore. Here is the code to do that:

// removing appearance, users and plugins options from menu Items in WordPress Dashboard
function wp_admin_dashboard_remove_menus() {
    global $menu;
    $restricted = array(__('Appearance'), __('Users'), __('Plugins'));
    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', 'wp_admin_dashboard_remove_menus');

Below is the list of all the options that can be used with the above code:

$restricted = array(__('Dashboard'), __('Posts'), __('Media'), __('Links'), __('Pages'), __('Appearance'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'));

Remove the Upgrade WordPress Banner for Non-Admin Users

No webmaster would want his client to see the Upgrade WordPress Version banner unless the client has admin access to WordPress. Therefore, it is suggested that this banner is removed using the following code:

// Removing the "Please Update Now" notice for non-admin users
if ( !current_user_can( 'edit_users' ) ) {
    add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
    add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
    add_filter( 'pre_site_transient_update_core', create_function( '$a', "return null;" ) ); 
}

Add a Custom News Feed to the WordPress Dashboard

Your client might want to read some of his favourite feeds from the dashboard itself. It is possible to display a custom feed in the WordPress dashboard using the code below:

// A news feed widget for your WordPress dashboard
function wp_admin_dashboard_add_news_feed_widget() {
    global $wp_meta_boxes;
    // The new widget
    wp_add_dashboard_widget( 'dashboard_new_feed', 'News of Your Choice', 'dashboard_my_feed_output' );
}
add_action('wp_dashboard_setup', 'wp_admin_dashboard_add_news_feed_widget');
function dashboard_my_feed_output() {
    echo '<div>';
    wp_widget_rss_output(array(
        'url' => 'http://www.mywebsite.com/feed/',
        'title' => 'Latest news of my choice',
        'items' => 2,
        'show_summary' => 1,
        'show_author' => 0,
        'show_date' => 1
));
echo "</div>";
}

Adding a Custom Widget in Your WordPress Dashboard

All that you have to do is paste the code below in your functions.php:

add_action('wp_dashboard_setup', 'custom_dashboard_widgets');
function custom_dashboard_widgets() {
    global $wp_meta_boxes;
    wp_add_dashboard_widget('custom_ad_widget', 'MyAds', 'custom_dashboard_ad');
}

function custom_dashboard_ad() {
    echo '<p> Here is my widget.</p><br /> And one more line';
}

You can use this widget to display an alert that you want your client to see after every login. May be, you can use this widget to help the client remember your pending payments.

Editing the Footer Text in your Dashboard

Paste the code below in your functions.php file and enjoy a personalized footer.

function remove_footer_admin () {
    echo "Your own text";
}
add_filter('admin_footer_text', 'remove_footer_admin');

This function gives you the liberty to add any amount of text to your footer. Take my suggestion and don’t stuff it up, please!

List all Dashboard Widgets Within the Dashboard Itself

Copy the code below into your functions.php and refresh your dashboard:

function list_active_dashboard_widgets() {
    global $wp_meta_boxes;
    foreach (array_keys($wp_meta_boxes['dashboard']['normal']['core']) as $name) {
	echo '<div>' . $name . '</div>';
    }
}
add_action('wp_dashboard_setup', 'list_active_dashboard_widgets');

Source: DigWp

Note: This code might degrade your blog’s performance so it is suggested to remove it once you have the list of dashboard widgets available.

Disable Non-Default Dashboard Widgets

function disable_default_dashboard_widgets() {
    remove_meta_box('widget-name', 'dashboard', 'normal');
}
add_action('admin_menu', 'disable_default_dashboard_widgets');

Remember to replace your widget name with "widget-name". Now you know how to disable any widget from your dashboard without altering the code.

Error Logging in WordPress Dashboard

I wanted to save this for the last. The code here is huge and it will take time before one gets this running. See the code below:

function slt_PHPErrorsWidget() {
	$logfile = '<root>/logs/php-errors.log'; // Enter the server path to your logs file here
	$displayErrorsLimit = 100; // The maximum number of errors to display in the widget
	$errorLengthLimit = 300; // The maximum number of characters to display for each error
	$fileCleared = false;
	$userCanClearLog = current_user_can( 'manage_options' );
	// Clear file?
	if ( $userCanClearLog && isset( $_GET["slt-php-errors"] ) && $_GET["slt-php-errors"]=="clear" ) {
		$handle = fopen( $logfile, "w" );
		fclose( $handle );
		$fileCleared = true;
	}
	// Read file
	if ( file_exists( $logfile ) ) {
		$errors = file( $logfile );
		$errors = array_reverse( $errors );
		if ( $fileCleared ) echo '<p><em>File cleared.</em></p>';
		if ( $errors ) {
			echo '<p>'.count( $errors ).' error';
			if ( $errors != 1 ) echo 's';
			echo '.';
			if ( $userCanClearLog ) echo ' [ <b><a href="'.get_bloginfo("url").'/wp-admin/?slt-php-errors=clear" onclick="return confirm(\'Are you sure?\');">CLEAR LOG FILE</a></b> ]';
			echo '</p>';
			echo '<div id="slt-php-errors" style="height:250px;overflow:scroll;padding:2px;background-color:#faf9f7;border:1px solid #ccc;">';
			echo '<ol style="padding:0;margin:0;">';
			$i = 0;
			foreach ( $errors as $error ) {
				echo '<li style="padding:2px 4px 6px;border-bottom:1px solid #ececec;">';
				$errorOutput = preg_replace( '/\[([^\]]+)\]/', '<b>[$1]</b>', $error, 1 );
				if ( strlen( $errorOutput ) > $errorLengthLimit ) {
					echo substr( $errorOutput, 0, $errorLengthLimit ).' [...]';
				} else {
					echo $errorOutput;
				}
				echo '</li>';
				$i++;
				if ( $i > $displayErrorsLimit ) {
					echo '<li style="padding:2px;border-bottom:2px solid #ccc;"><em>More than '.$displayErrorsLimit.' errors in log...</em></li>';
					break;
				}
			}
			echo '</ol></div>';
		} else {
			echo '<p>No errors currently logged.</p>';
		}
	} else {
		echo '<p><em>There was a problem reading the error log file.</em></p>';
	}
}

// Add widgets
function slt_dashboardWidgets() {
	wp_add_dashboard_widget( 'slt-php-errors', 'PHP errors', 'slt_PHPErrorsWidget' );
}
add_action( 'wp_dashboard_setup', 'slt_dashboardWidgets' );
  • Please refer to Jeff’s post for monitoring PHP errors. Make sure that you are able to implement at least one of his three methods to monitor PHP errors.
  • Paste the code above into your theme's functions.php.
  • Replace the $logfile variable with your log file's path.

WordPress Plugins to Make Life a Cakewalk

Well, if you really hate code then we have a list of plugins that can help you edit your dashboard.

Adminimize
Adminimize is one smart WordPress plugin that does it all. The champion WordPress Plugin lets you revamp your WordPress dashboard to give it a completely different feel. The plugin gives the administrators the strength to restrict access to multiple options for different WordPress User Roles.

Adminimize takes WordPress administration to next level by letting the administrator control literally every feature of WordPress from the dashboard itself.

Adminimize

White Label CMS
White Label CMS is one WordPress plugin that covers the features of customizing the WordPress dashboard as per the client’s needs. White Label CMS comes loaded with 3 in-built profiles for Website, Blog and Custom so as to make the process of dashboard customization a cakewalk.

This plugin gives the necessary freedom to WordPress administrators who can surprise their clients with a totally new WordPress dashboard.

White Label CMS

Conclusion

This article was just a brush with what you can do with WordPress. Let me see what you have done with your WordPress installation? I would love to compile another article with user suggested tricks if I find them unique enough.

Salman Siddiqui is a seasoned WordPress critic with 5 years of WordPress experience. He is an alpha geek with a degree in computer engineering. He spends his day as software engineer with a Fortune 100 company and nights as a freelance writer. He believes that everyone must blog about something and plans to be a full time writer in future.