Why You Should White Label WordPress (And How to Do It)
You know that WordPress coupled with a powerful theme framework is the best way to run a website.
The problem is, when you create websites for people who aren’t tech savvy, the clutter–WordPress branding, RSS feed links, and much more–confuses people.
To prevent this, I customize my client’s WordPress installations to create a better user experience, and in the remaining part of this article, I’ll show you how I do it.
White Labeling WordPress
White-labeling WordPress goes beyond removing dashboard widgets and replacing WP logos with your own. That is where it begins, but it oftentimes requires a bit more “customer service creativity” to provide your clients with the best overall experience. The following is a list of white-labeling solutions that I believe offer my clients that extra bit of awesomeness. I’m hardly an advanced developer, so these examples should be easy enough for those with at least a working knowledge of WordPress theme development.
For this tutorial I’ll be using the Thesis Theme to illustrate my code and examples. If you are not using Thesis, functions.php is where you’ll drop the code, not custom_functions.php.
As you read on, many of you may ask, “aren’t there plugins to take care of much of this?” — and the answer is yes. In fact, much of the code below is created from digging into a variety of plugins and tweaking them to suit my needs. However most of these customizations require very little code, and it makes more sense to include them all into one reusable file than to have several plugins being called at once.
Rebrand The WordPress Login Page
This is an obvious one, but in my opinion you should NEVER hand over completed contract work without replacing the default WordPress logo with your client’s logo. Add this snippet of code to custom_functions.php template.
/**REBRAND WP LOGIN**/
function my_custom_login() {
echo '';
}
add_action('login_head', 'my_custom_login');
function new_wp_login_url() {
echo bloginfo('url');
}
function new_wp_login_title() {
echo 'Powered by ' . get_option('blogname');
}
add_filter('login_headerurl', 'new_wp_login_url');
add_filter('login_headertitle', 'new_wp_login_title');
/** END REBRAND WP LOGIN **/
Now just create custom_admin.css and add the following code to it:
#login h1 a {background: url(images/my_sweet_sweet_logo.jpg) no-repeat; width: 326px; height: 67px;}
Adjust the height and width as necessary, but the width should remain close to 326px in order to fit nice and tidy.
Custom WordPress Login Area:
Rebrand the WordPress Admin
The three areas that I like to customize are the WP icon and “howdy” text in the header, as well as the “Thank you for creating with WordPress” text.
Replacing the WordPress Logo
First, replace the WP logo in the admin header with your client’s logo. Add this bit of code to custom_functions.php:
/**REPLACE WP LOGO**/
function custom_admin_css() {
echo '';
}
add_action('admin_head','custom_admin_css');
/**END REPLACE WP LOGO**/
Next, you’ll just want to add this bit of code to custom_admin.css:
#header-logo {background-image: url(images/client_logo.jpg);}
Logo Example:
Rebranding the WordPress Footer
Second, Rebranding the Admin Footer. I like to add my business’s signature here, but since WordPress and Thesis are the real champions, I also want to give them credit as well. Add this to your code:
/**REPLACE FOOTER TEXT**/
function filter_footer_admin() { ?>
Coerced by <a href="#">Secret Stache Media</a> | Built with <a href="http://wordpress.org">WordPress</a> and <a href="http://diythemes.com">Thesis</a>
<!--?php }
add_filter('admin_footer_text', 'filter_footer_admin');
/**END REPLACE FOOTER TEXT**/
Footer Example:
You’ll notice that I did not wrap the above text in <p> tags. This is because we are replacing content that is already within <p> tags. If you were to add them, you’ll break the layout a bit.
Removing “Howdy” From WordPress
Third, replacing “howdy” with something less, ‘erm…lame. This comes directly from the amazing Ozh’s plugin, “No Howdy!”. I agree with Ozh that it is total overkill, but it has it’s benefits from time to time. You can download it as a plugin, but let’s add it to our custom_functions.php template:
/**REPLACE HOWDY**/
// Customize:
$nohowdy = "Welcome Back";
// Hook in
if (is_admin()) {
add_action('init', 'ozh_nohowdy_h');
add_action('admin_footer', 'ozh_nohowdy_f');
}
// Load jQuery
function ozh_nohowdy_h() {
wp_enqueue_script('jquery');
}
// Modify
function ozh_nohowdy_f() {
global $nohowdy;
echo <<
//<![CDATA[
var nohowdy = "$nohowdy";
jQuery('#user_info p')
.html(
jQuery('#user_info p')
.html()
.replace(/Howdy/,nohowdy)
);
//]]>
JS;
}
/**END REPLACE HOWDY**/
No Howdy Example
Remove Unnecessary Dashboard Widgets
I find the dashboard widgets to be a huge distraction for clients, and more often than not I’ll remove everything except for “Right Now” and “Recent Comments.” Drop the following into your custom_functions.php:
/** REMOVE DASHBOARD WIDGETS **/
function remove_dashboard_widgets() {
global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
//unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
//unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
remove_action( 'wp_version_check', 'wp_version_check' );
remove_action( 'admin_init', '_maybe_update_core' );
add_filter( 'pre_transient_update_core', create_function( '$a', "return null;" ) );
}
add_action('wp_dashboard_setup', 'remove_dashboard_widgets' );
/** END REMOVE DASHBOARD WIDGETS **/
You’ll notice that I’ve commented out the action to unset the “Recent Comments” and “Right Now” widgets as to keep them active. If there are others that you feel are important to your client, you can easily content them out as well.
Create Custom but “Useful” Dashboard Widgets
If you are going to spend the time to eliminate the clutter, be sure to only recreate dashboard widgets that are beneficial to the client. A mere “welcome” widget, in my opinon, offers nothing of real value. When I add a custom dashboard widget it is to provide general tutorial resources. Many clients will not update the site on a regular basis and adding links to written and video tutorials is a great way to push them in the right direction. Below is an example of a widget I might use:
Custom Dashboard Example:
Add the following snippet of code to create it:
/** INSERT CUSTOM DASHBOARD WIDGETS **/
function tutorial_dashboard() {
?>
Adding Images
From the Post or Page Edit Screen look for the Icons to the right of “Upload/Insert.” Click on the first Icon and follow the instructions on screen
Adding Gallery Images
Cheat Sheats
Download a Hard Copy of the WordPress Cheat Sheat
WordPress Admin Menu Management
Up until now, I have been adamant about creating a reusable custom_functions.php file (functions.php for non Thesis sites), as opposed to using plugins. However, when it comes to modifying menu items (created not only by WordPress but also by themes and plugins) it is far easier to use Menu Editor Pro from WP Plugins. It is a premium plugin, but at $7.00 it is well worth the investment. Menu Editor Pro allows you to re-sort, rename, hide, delete, and create menu items. Usage is very straight forward so I’ll focus on the strategy instead.
Renaming WordPress Menu Items
I’m sure you can think of your own reasons for renaming a menu’s title, but some of the changes I’ve made are from “posts” to “articles”, “thesis” to “framework.” I’ll also rename any plugins that create a top level menu and use their brand name in the title. No offense at all to the plugin developer, I just want to keep my menus clean and consistent.
Re-sorting WordPress Menu Items
Often times plugins will create a top level menu item, but it will be stuck to the bottom of the list. I tend to like to group things together based on relevance, and if a particluar item has more value near the top I’ll re-sort it to a more appropriate position.
Removing WordPress Menu Items
Sites that do not have a blog or do not allow comments shouldn’t have those options taking up space. If you know they won’t need it at all, eliminate it from view. You can always add it back if they need it in the future. Also, when using one of the many premium themes or frameworks available as a starting point I will ALWAYS remove the sub menu item “Buy Themes.” Give credit where credit is due, but I don’t believe it should be there in the first place if you own a developer’s license. And let’s be honest, if you are doing client work, you should own the developer’s license.
Adding Custom WordPress Menu Items
There is so much potential to overuse this option, but I find that adding a webmaster menu item can be very beneficial. I’ll typically add a menu item with my brand “Secret Stache” and create a few sub-menu options such as:
1. “Invoices” using the plugin’s iFrame option to pull in my freshbooks invoicing account.
2. “Survey” also using the plugin’s iFrame option to pull in a client survey created in google docs. I’d love to use Gravity Forms here, but unless I’m mistaken a front-end page must render for the template tag to work.
3. “Review on yelp.com” which links to my business page on yelp.com
4. “Contact Webmaster” which opens the user’s email client, subject line pre-filled.
None of these additions are necessary, and that’s the point. I believe strongly that providing your clients with an over the top package will result in return business and great word of mouth testimonial. And by setting everything up in a reusable template, you aren’t even spending much more time on it.
Download Example
White Label Wordpress Custom Functions (1572)
The file above has all the code from the examples show in this post. The file is a .txt file. If you want to use it you will need to add the code within the file to your functions.php or custom_functions.php.
Please feel free to add your white-labeling practices in the comments below. Also, I put together this list of functions over the course of a few years. I would like to give credit to any plugin authors I have absorbed the code from, but I honestly cannot remember from who and where most of it originated. Please drop a line in the comments if a portion of this looks familiar and we will credit the source.
Sign Up Now for Free Updates and Exclusive Content:
Learn how to write killer content, get more traffic, make money, and more by entering your email below:
Rich Staats is the founder of Secret Stache Media, a web strategy and interactive marketing firm based out of Vail, CO. Life makes most sense to Rich when he is snowboarding, and he has been known to close the office doors on powder days. Follow Rich on Twitter.
Rich,
You’re a badass. This is awesome. That’s all I got.
I thought the same thing when I read it. Stellar.
This is such a dirty post. I love it!
Thanks for the kind words.
This is awesome, it had never even occurred to me to white label WP – I’m gonna try it out right now on the site I’m working on. Thanks dude!
Wow, awesome post. Thanks for sharing!
Yup, I’m jumping on the ‘two thumbs up” train as well. Crackin’ post Rich, thank you.
Especially like the creating useful dashboard widgets – what better place to put a ‘how-to’ for your clients than the very place they’re going to be looking for it?!
Well done. What a great idea. Thesis or WordPress or someone is going to do this. You should get the credit for such a badass post.
this is bad ass.
So the trick I guess is to maintain one dummy “ideal” install that just works.
We’d also want to turn off notifications of upgrades, in general, right?
-Chris
Actually Chris, I neglected to mention in the post, but the bit of code that removes dashboard widgets, also removes notifications of upgrades. Thanks for the comment!
WOW, this is awesome, talk about delivering great content, Kudos!
This is awesome – I’ve been wanting to do this for a long time, and you addressed it perfectly!
Been using White Label CMS, which is an awesome plugin but this solution may give me more flexibility and opens my eyes to the concept of messing with the dashboard more.
Thanks Nick.
yeah the white label cms plugin is a great option. I’m just the type of person who wants 100% control over my options.
Hi,
Brilliant post, thanks David and Rich for the mention of White Label CMS. With over 10,000 downloads in a short period of time, there really is a huge demand out there for this.
We will be watching the comments to see if there are any extra feature requests from people to include in the next version of the White Label CMS.
Easily the best post out there covering this subject.
Very cool. Keep up the good work!
great Tutorial – i just added all the Custom Functions stuff into a client site in inder 10 mins and it looks great!
One idea I came up with that we’re going to try – using your tutorial box widget – going to try adding a mini “support” form right on the WP front page, linking back to us -that way, a client has a problem -they just send an email right from the site.
I’m sure there’s so many other options this could be used for too. Editorial Calendar/ Styleguide reference for large blogs with multiple authors and corporate blogs for example?
The thought of White Labeling wordpress opens up a whole world I never considered before. Thanks for this tutorial.
Amazing post. Thanks for taking the time to put this together!
I found this post through 3rd Tribe. Very impressive stuff, as it lends a nice finished touch to sites we sometimes build for clients.
Wow! It took me a while to read this entirely, but well worth it. This is only for the serious at heart blogging professionals.
Cant wait to get all that clutter out. I think I’ll sleep better tonight.
Totally ninja post.
Thanks
B.
An insane amount of value in this post. Thanks bro!!!
Very impressive stuff, as it lends a nice finished touch to sites we sometimes build for clients.
Dude, You Rock!
I never would have even thought of this stuff and now I’ll be able to give my clients a whole new level of awesomeness. And to think that I just happened to stumble across this post from artofblog’s channel on youtube!! I love how the web makes that possible. I am indebted to you my friend.. Bravo!
Great post! I’m having a little trouble replacing the images on the wordpress login and admin pages though – I can’t figure out what I’m doing wrong. The ‘Powered by WordPress’ alt tag on the login page is successfully changed as is the link but no joy with the logo.
I created the custom_admin.css file in the custom folder in thesis and changed /path/to/custom_admin.css in the php code provided to /custom/custom_admin.css. I also tried using an absolute path but that didn’t work either. I’ve uploaded my image to the images folder in thesis and changed the code appropriately in the custom_admin.css file.
Am I missing something really simple?
Any help would be greatly appreciated! Thanks.
The first CSS example didn’t work for me but this did:
#login h1 a {
background: url(/wp-content/themes/thesis_18/custom/images/chillisplash.jpg) no-repeat;
width: 326px;
height: 67px;
}
Fantastic information!
I am totally newbie with wordpress and Thesis as well. When I built my http://www.matsparker.com .
Set up my site with a nice skin. You showed me that I have a lot to learn.
Amazing tutorial given!
Mad love for this. I had already incorporated things like the header and footer replacements and even eliminating menu items — but had failed to imagine things to add into the menu and your suggestions are brilliant.
>> In fact, much of the code below is created from digging into a variety of plugins and tweaking them to suit my needs. However most of these customizations require very little code, and it makes more sense to include them all into one reusable file than to have several plugins being called at once.
I’m also glad to know I’m not the only one doing this or who feels this way. I love plugins and there are some I couldn’t live without, but I also try not to make a plugin the solution for everything and appreciate having this level of control over elements.
Thanks again.
Really great article, some of these things are far better catered for using this approach to bulky plugins etc. Thanks, really looking forward to de wordpress ‘ing a few sites for kicks. :) Big ups.
Mate, what a huge amount of detail in this tutorial. I probably wont include it in the wordpress training for my students but will definitely start using it when I build more of my own sites.. You rock!
With the release of WP v 3.1 comes the filter “admin_title” which allows us to get rid of the “WordPress” text in the title bar, with this code in the functions.php:
/**REBRAND TITLE ON WP-ADMIN SECTION AT TOP**/
function new_wp_title() {
$new_title= get_option(‘blogname’);
return $new_title;
}
add_filter(‘admin_title’, ‘new_wp_title’);
/** END REBRAND TITLE **/
Oh nice I had not yet seen that. Thanks.
[...] [...]
[...] wish I could lay claim to writing the best tutorial for building your own branded CMS, but Art of Blog beat me to it. Check out the tutorial and make your log-in and admin panel unique to your brand [...]
Nice post Rich! I’ll be using your recco’s going forward. Thanks again ;-)
Nice post. You’ve managed to pull together many of the code snippets needed to pull off a pretty complete back-end white-label/branding.
Wow!
This will help a lot.
I am finally able to jot down all the things that is needed to customize the back end of WP.
I am thrilled and will share this post article with me fellow mates.
Cheers!
[...] I’m not sure about how courteous it is to do this, but nevertheless I found the comprehensiveness of this post really compelling. Basically, when setting up a client’s website he rebrands their admin panel, and even gives them an invoice pay area (via freshbooks) in the administration area. Really pretty neat. Check it out here. [...]
A very good post, wordpress is really powerful, I built my website with wordpress. This tip helps, thanks a lot.
[...] to budget in a custom & white-labeled experience. I’ve written in detail on the topic of white-labeling WordPress over at Art of Blog, but ultimately it is something I try do to set my business apart from the [...]
I’ve been wondering how to ‘customize’ these aspects of WP for ages (particularly getting rid of the unwanted widgets). Thank you so much for this info!
[...] try to bill in a tradition white-labeled experience. I’ve created in fact on a subject of white-labeling WordPress over during Art of Blog, though eventually it is something we try do to set my business detached [...]
[...] really try to budget in a custom white-labeled experience. I’ve written in detail on the topic of white-labeling WordPress over at Art of Blog, but ultimately it is something I try do to set my business apart from the [...]
Hi,
I was wondering how you achieve the iframe option in your “Invoices” subitem? I don’t have the pro version of Admin Menu Editor, so I’m wondering if that’s why I can’t figure it out? I’d love to do the same as you’re saying here, with Freshbooks brought in using an iframe. Thanks for this great post!
Yeah, it looks like you need to have the pro version to do it. It’s a cool feature, but honestly it doesn’t get a whole lot of use from the client.
Thanks Rich. You’re probably right about it not getting much use from the client. All these lofty goals we have as web designers, and clients don’t really use a lot of them.
Oh cool, thanks! I was wondering how to do this. Very detailed!
Great post! Really helpful!
Just want to share my 2 cents here. I’m migrating all my sites to WP Multisite but I want to use the same theme on 2 websites with different login logo brandings. So I used:
$brandingbase = wp_upload_dir();
echo ”;
}
Then for each blog I created a “branding” folder with all the css and images (something alike wp-content/blogs.dir/9/branding).
I tried to get the “Replacing the WordPress Logo” and It hasn’t worked for me… Does anybody know why?
This truly is the best post out there on this subject!
Thanks for all the help, I’ve been wondering how to do this for a long time!
Hey Abram,
This post is a bit out of date, and with WordPress 3.4+ it will no longer work 100% as expected. I plan to revisit this soon.
Do you also know what happened to Menu Editor Pro? I can’t find it anywhere!
It seems the plugin author is selling it directly now: http://w-shadow.com/admin-menu-editor-pro/upgrade-to-pro/
There is also a free version which does most of the stuff I outlined: http://wordpress.org/extend/plugins/admin-menu-editor/
Really great article! There’s a massive amount of detail in this tutorial. You rock!
Really nice job :) Thumbs up