Creating Personal Branding for Your WordPress Backend

Creating Personal Branding for Your WordPress Backend

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.

Comments

    • Jules,
    • August 3, 2011
    / Reply

    Thanks, very interesting and usefull article.

  1. / Reply

    Great article. Will definitely try some of these out.

  2. / Reply

    i must say these are new and useful

  3. / Reply

    Very useful, I’m going to roll these out on a few of my personal sites and see how it feels. I think you’re right in saying clients will really appreciate this.

    Tom

  4. / Reply

    Nice to see everything you need in one post – great collection and one for the bookmarks :)

    • Paul,
    • August 4, 2011
    / Reply

    Thank you for sharing this superb article, I’m going to do this to surprise my content writers with a new, branded backend interface.

  5. / Reply

    Nice article, as Dot Monster – Rab said, nice to have everything in one place to bookmark :)

    To change login look and feel in wordpress 3.2, I’m using Valentin’s css framework on geekeries : http://www.geekeries.fr/snippet/personnaliser-interface-ui-wordpress-3-2/ (sorry it’s in French but code is clear enought to understand).
    I also use the “Menu Editor” plugin, to rename some dashboard labels, but also to hide some menus from certain type of user for example and hide unused functions like comments.

    1. / Reply

      Thanks for those updates. I will surely consider them in some post.

  6. / Reply

    Hey,
    nice writeup.
    I have been working on a wordpress project and this just helped me a lot.
    Thanks

  7. / Reply

    Thanks! This is what i was searching on Google. Well written tutorial!

  8. / Reply

    Interesting but the 1st example you give on the Le Hibbo Log-In change was NOT code generated per-se, it was and is via the BM-Custom Login plug-in.

    The plug-in was just recently upgraded but the Dev guy did not update the Template that is part of he plug-in. I called him on it twice now and he made one correction but missed the PSD Template all together. Told me last week he would update it but I see it still has the same old template that simply wont work with the new version of WP. So guess you will have to d some coding after all :)

    1. / Reply

      Tom – My article talks about plugins along with code that do the said job cleanly. I never said his page was result of code change :)

      Also, I opted for two plugins because they were covering most of the required changes. I will see if we can come up with another article that will discuss most of the plugins that help personally brand WordPress backends. Thanks for comment.

  9. / Reply

    Very good tips.
    But do those tips still work after an update of the wp version ?
    Thx in advance for your return.

  10. / Reply

    If you noticed carefully then all the changes are being done in your theme’s functions.php file. Henceforth, they will stick together even after your WP upgrade. You will have to copy them again in case you change your theme :)

    • Ryan,
    • August 11, 2011
    / Reply

    Great to know Salman, that was my next question. As a new designer, these types of customizations are things you need to know to be successful.

  11. / Reply

    Very nice list. I’ve been doing a lot about white label lately, and I really like the plugins you listed!

    • NewtoWP,
    • June 26, 2012
    / Reply

    I’m new to WP and I assume I’m doing something wrong. I get this error:

    Fatal error: Call to undefined function add_action() in /homepages/17/d420531295/htdocs/wp-includes/functions.php on line 50

    I did as stated above using your code and changing only the image path:

    function my_custom_login_logo() { echo ‘ h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/logo.jpg) !important; } ‘;}add_action(‘login_head’, ‘my_custom_login_logo’);

    Please help.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals