Tutorial Details
- Program: WordPress
- Version (if applicable): version 3.1 & up
- Difficulty: Easy
- Estimated Completion Time: 15 minutes
- Displaying WordPress Site Data Via jQuery Charts
- 12 Useful Customization and Branding Tweaks for the WordPress Dashboard
- Customizing the WordPress Dashboard For Your Clients
- How to Create Custom WordPress Write/Meta Boxes
- Three Practical Uses for Custom Meta Boxes
- Attaching Files To Your Posts Using WordPress Custom Meta Boxes, Part 1
Have you recently started using WordPress for your client’s project and want to further impress your client with better packaging? This article will focus on packaging WordPress so that, in just few minutes after completion of a project, it will feel more unique to the client and not have the generic feel.
A great product comes with great packaging. When you develop a website for your client, packing it well adds the additional feel good factor. Most clients don’t understand the efforts that you have put into creating a dynamic website, or the 1000 lines of code that you have written to create a custom plugin. All they care about is what they see.
WordPress out of the box is well designed & looks as good as any commercial product. Few extra touches would further make it more personal to the client instead of looking general. This article will focus on packaging WordPress better in just few minutes after completion of a project to make it feel more unique to the client and not have the generic feel. Without going into the detailed explanation of WordPress core functions, we will only focus on quick customization.
3 ways to perfectly end a WordPress project before handing over to your client
“All they care about is what they see.”
- Remove and replace generic elements like WordPress Logo, Footer signature
- Remove unwanted sections from WordPress Dashboard
- Install plugins to optimize website & make it more fast & secure
Step 1.1 Customize Login Page Logo
When a client wants to access the WordPress admin, the first thing they will notice is the login page with a WordPress logo. Wouldn’t it be better if this page had the logo of your client’s company or maybe yours? There are many simpler ways to do this using plugins that allow other customization options too. But I personally prefer setting this using the powerful WordPress functions.php file.
If you have a functions.php in your custom theme, open it and if not, create a file named funtions.php and place it inside the theme folder.
Add below lines in the functions.php file:
// CUSTOM ADMIN LOGIN HEADER LOGO
function my_custom_login_logo()
{
echo '<style type="text/css"> h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo_admin.png) !important; } </style>';
}
add_action('login_head', 'my_custom_login_logo');
Note
The path "images/logo_admin.png" is relative to the main theme folder and needs to be changed based on the location of your logo image. Make sure to have additional white space in the image below the logo, otherwise the warning message might touch the logo. Now as you can see with just a few lines, we are able to customize the logo of the login page without the need of a plugin. WordPress is very modular software with thousands of functions if not more. We can hook into any function and modify the default settings through the use if a functions.php file or through plugins. Using the above code we have simply used the hook login_head() and added our own function to it. Similarly you can even further and add your own stylesheet to the login page.
Step 1.2 Customize Login Page Logo link & ALT text.
If you click on the logo on the login page, it will take you to www.wordpress.org. The alt text of this link is “Powered by WordPress”. Using the same functions.php file we can now modify the link and the alt text to anything we want.
// CUSTOM ADMIN LOGIN LOGO LINK
function change_wp_login_url()
{
echo bloginfo('url'); // OR ECHO YOUR OWN URL
}add_filter('login_headerurl', 'change_wp_login_url');
// CUSTOM ADMIN LOGIN LOGO & ALT TEXT
function change_wp_login_title()
{
echo get_option('blogname'); // OR ECHO YOUR OWN ALT TEXT
}add_filter('login_headertitle', 'change_wp_login_title');
In earlier example, we used add_action and in above example we used add_filter. What’s the difference? Well both are WordPress hooks, only difference is that we used add_action for large functions and add_filter to modify text before its sent to the database or the browser.
Step 1.3 Customize Dashboard Logo
Once we login and are in the backend of WordPress, there is another small logo of WordPress displayed on top. It’s small but if you wish to change it, then add below code to the same functions.php file we created in above step.
// CUSTOM ADMIN DASHBOARD HEADER LOGO
function custom_admin_logo() {
echo '<style type="text/css">#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/logo_admin_dashboard.png) !important; }</style>';
}
add_action('admin_head', 'custom_admin_logo');
As you can see, the format is almost same as we used to change login page logo. Only thing that changes is the hook. In this case we are adding our function in the admin_head() hook.
Step 1.4 Customize WordPress footer
In the footer of WordPress backend, you would notice this link “Thank you for creating with WordPress. • Documentation • Freedoms • Feedback • Credits”. WordPress deserves all the credit we can ever give for making such a wonderful piece of application. However for those of you who want to one step further and modify this we have another WordPress hook to our rescue.
// Admin footer modification
function remove_footer_admin ()
{
echo '<span id="footer-thankyou">Developed by <a href="http://www.designerswebsite.com" target="_blank">Your Name</a></span>';
}
add_filter('admin_footer_text', 'remove_footer_admin');
You can add your own website link and name and also any other links you wish such as link to support website, or your email address.
Step 2 Removing the sections from dashboard which your client’s do not require
In the WordPress dashboard, you will notice many sections such as, Plugins, WordPress news, etc.
Do your clients really need to see details of new plugins, WordPress News & Blog Updates? Am sure hey are better off without seeing all these things.
The sections are added using the wp_dashboard_setup() hook and same can be used to remove them. Simply copy paste the below code in your functions.php file to get rid everything except the most required sections.
// REMOVE META BOXES FROM WORDPRESS DASHBOARD FOR ALL USERS
function example_remove_dashboard_widgets() { // Globalize the metaboxes array, this holds all the widgets for wp-admin global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']); unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']); unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);} add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );
This function can also be extended to add new boxes or to remove the boxes such as “Incoming Links”, “Quick Press” and others.
Step 3 Further optimizing & securing using plugins.
WordPress has more than 15,000 plugins. Now if you wish to experiment, you would be better off doing it on your own website and not that of your clients. Below are list of plugins organized in different categories that I have used for almost every single project I have made in last 12 months.
General Security & Backup
- Login LockDown - A decent plugin that improves the security of your WordPress site by limiting the number of failed login attempts from a given IP range.
- WP-DBManager - Useful for Database optimization and backup. It also can email a copy of database after each backups.
- IDrive - The best & cheapest backup plugin. This plugin is offered for free by the folks of IDrive. The plugin backs up your WordPress core files, uploads & database daily to IDrive servers.
General Purpose
- Delete-Revision - Very useful and allows easy deletion of multiple revisions.
- 404 Notifier - Easy way to get a list of 404 errors from your WordPress admin. You probably would not need this plugin forever, but its useful to install it when launching a new project.
- WordPress Import - Always better to install and activate this plugin. This is a required plugin when you want to import WordPress data.
- Velvet Blues Update URLs - A really handy plugin useful when we move WordPress site to different server. Without using PHP MyAdmin, users can change reference of all URL’s in the database to the new URL.
Optimization & Caching
- WP Super Cache - Simplest Cache plugin. Has more options for advanced user, but the plugin requires no custom setup and can be used by even beginners to optimize the speed of their website
- WP Minify - This plugin in combination with above plugin can have a huge impact on your website. If you use tools like Google’s PageSpeed and Yahoo’s YSlow, you will see considerable impact on the performance of your website
- WordPress Gzip Compression - This also helps in compressing your website, but make sure your server is compatible as the plugin causes issues on some hosting accounts.
Analytics & SEO
- All in one SEO - This is the most used SEO plugins. If you do not wish to develop your own SEO features for your client, this plugin can be very helpful to add Meta tags to your website dynamically.
- Simple Google Sitemap - Basic plugin that creates XML sitemap and submits to Yahoo, Google & Bing search engines.
- Google Analyticator - Allows us to see Google Analytics data directly in the WordPress admin. Very useful for client projects, as Analytics does help & inspire anyone to make their websites better.
- PostRank - Free plugin from the company “PostRank” which was recently bought by Google. The plugin allows you to see a rating for your post based on how its shared over social sites like Twitter, Facebook, etc.
Other Advanced plugins to further customize WordPress
- Adminimize - Allows us to remove unwanted links & content from the dashboard. Perfect for websites developed for clients.
- Admin Menu Editor - Same as above but focused on Menus. I have developed websites using WordPress that does not have a blog, and this plugin has come in handy to hide the “Posts” menu.
Conclusion
At the end, if the project cost permits, try generating a report of your clients website using http://gtmetrix.com/. This website allows us to generate report using Google PageSpeed & Yahoo’s YSlow tools. Hard to get a score of 100, but if your website is properly developed and does not use lot of external scripts such as 3rd party live chat plugins, then getting a score about 80, would not be difficult.
In this article we just briefly covered the customization options. Just like any other software the more you dig in, you would love WordPress.
Do you have any other ways to further customize WordPress? Share with us.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Harish Chouhan
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Wptuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
How do you remove third-party widgets, i.e. Yoast’s news widget that displays when you install his SEO plugin?
When the news widget comes up on the dashboard it says “The Latest from Yoast” on the bottom righthand corner of this news widget you will notice an “X”.
Click on the “X” and you will see:
“If you reload, this widget will be gone and never appear again, unless you decide to delete the database option ‘wpseo_yoastdbwidget’.”
The news widget will be disabled unless you reactivate again in the database
I am glad you liked it
This was just what I needed! Great job! Way to be a mind-reader.
Great article, I am not developing for clients and still found this article to be very useful
*Bookmarked. Super valuable information here. Can’t believe I didn’t know of the Velvet Blues Update URLs plugin.
Great write-up, thanks!
Would it not be better to use stylesheet_directory instead of template_directory for the different images on the login page and in the Dashboard?
or even better :
get_stylesheet_directory_uri()
Very useful..!
This keeps me love more to wordpress..
Great article,
Another way to customize the wordpress admin for clients is by using Wp Simplify plugin http://wordpress.org/extend/plugins/wp-simplify/ .
Thanks alot for the plugin… Love to learn ( and its easier ) from hacking up some already exist plugin
title is a bit misleading
should be:
customizing wp backend for your clients
Good point – I’ll amend it
There is a great plugin on CodeCanyon that allows you to brand the admin interface completely and choose your own colors etc http://codecanyon.net/item/wordpress-admin-colors-branding/468919
This was nice. I always tend to forgot how many good plugins there are out there. Thanks!
This is a great write up and what we do we all of our clients as well. A good rule to go by is “if the client is not going to use it or will be confused by it, do not make it viewable to them”
Excellent tips! Never even thought of touching the WordPress logo on the login page – that’s a great touch. I usually go ahead and set up Askimet for clients as well.
I always add a news feed widget to the dashboard that puts in my latest blog posts. That way the client always stays connected to me. They can always hide it if they want.
One of my old blog posts shows you how to do it: http://adamscottcreative.com/add-your-own-news-feed-to-wordpress-dashboard/
Does having all those plugins installed that affect the admin slow down the front end? I don’t have much experience with plugins that are geared toward customizing the admin.
полезно. особенно в плане переделки страницы входа в админку
Will these be reset when you update WP to the latest version?
Because they’re done in the functions.php file of your theme, or possibly as part of a plugin, and not modifying core WordPress files (which you should never do) then they will work even after an update to WordPress.
Hi, thanx for article.
I wonder which plugin is using for s3 account on tutsplus.
I’m using tantan-s3 but its not good for clients.
How can i remove the WordPress update Notifications that my clients see in the top of the administration panel. By the way, thank you very much for those great tips.
add_action( ‘init’, create_function( ‘$a’, “remove_action( ‘init’, ‘wp_version_check’ );” ),2);
thanks for the tuts
btw the step 2 which is “Removing the sections from dashboard ” doesnt work? or is it just me?
It doesn’t work for me too..
uncomment global $wp_meta_boxes; in code and you will see magic then
yeah I know that’s a comment so I didnt include that
here’s what I added…
function example_remove_dashboard_widgets() {
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
}
add_action(‘wp_dashboard_setup’, ‘example_remove_dashboard_widgets’ );
The code for step 2 is pretty messed up in the original post. Copying and pasting that comments some functions, and adds all sorts of whitespace where it oughtn’t be.
Try this instead:
// REMOVE META BOXES FROM WORDPRESS DASHBOARD FOR ALL USERS
function example_remove_dashboard_widgets() { // Globalize the metaboxes array, this holds all the widgets for wp-admin
global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
}
add_action(‘wp_dashboard_setup’, ‘example_remove_dashboard_widgets’ );
It doesn’t work for me. I tried to use it in a child theme, got the following error message:
// CUSTOM ADMIN LOGIN HEADER LOGO function my_custom_login_logo() { echo ”; } add_action(‘login_head’, ‘my_custom_login_logo’);
Warning: Cannot modify header information – headers already sent by (output started at /home2/domain/public_html/sub-domain/wp-content/themes/son-of-suffusion/functions.php:5) in /home2/domain/public_html/sub-domain/wp-login.php on line 353
Warning: Cannot modify header information – headers already sent by (output started at /home2/domain/public_html/sub-domain/wp-content/themes/son-of-suffusion/functions.php:5) in /home2/domain/public_html/sub-domain/wp-login.php on line 365
try the custom login logo in the parent theme instead.
Very nice explanation. Thx a lot.
echo ‘ h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/logo_admin.png) !important; } ‘;
I am not sure if there is a cleaner and more elegant way, but this is really dirty.
Great post, But I want ask you , How can I remove comment section in dashboard and menu ?
I was use the following code with wordpress 3.0
//Remove Some Admin Menu Items
function remove_menu_items() {
global $menu;
$restricted = array(__(‘Links’), __(‘Comments’),__(‘Tools’));
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’, ‘remove_menu_items’);
//Remove Comments from Favorite Menu
function custom_favorite_actions($actions) {
unset($actions['edit-comments.php']);
return $actions;
}
add_filter(‘favorite_actions’, ‘custom_favorite_actions’);
but after update to last version it’s not work .. any idea or fix ?
thank you
“The path “images/logo_admin.png” is relative to the main theme folder and needs to be changed based on the location of your logo image.”
How would we change this to the child theme?
Nevermind, I answered my own question. Simply substitute “stylesheet_directory” for “template_directory”.
With over 35,000 downloads, this is very popular too – http://wordpress.org/extend/plugins/white-label-cms/
Hello Guys. I am noting down all suggestions so some of the scripts in this article could work better even in child themes. Any other suggestions/corrections could also be sent directly on twitter at @harishchouhan.
http://www.twitter.com/harishchouhan
Great article though, extremely useful for me because I was looking exactly something like this. Thanks Harish for it.
Greate article. Thanks for posting…
No mention of W3 Total Cache? By far the best caching/minifying plugin that can also serve to upload to CDN and purge Varnish? w3TC should be mentioned first, then the other 3 listed as “If you don’t like awesome power, use these:”
@Synergywp I myself use W3TC for all its options & mostly MaxCDN & Cloudfare support, however it takes lot of time for setting it up and so I decided to only add the simplest once in my list. But as suggested, the line you said should be added to this article
A great article with some great tips that I will be implementing on my own website as well as clients.
how can I change the default post view of the posts, from list view to excerpt view? I would like the excerpt view be selected every time I open admin panel?
I cannot apply the second step. Is there an error with the code? I get this error;
Call to undefined function add_action()….. How can i fix it?
I tried to uncommend global $wp_meta_boxes but i still get this error.
In version 3.3 , #header-logo will change to #icon-index
so you should change it to :
//Dashboard Logo
function custom_admin_logo() {
echo ‘#icon-index { background-image:url(http://sektorrd.com/assets/nano.png) !important; height: 34px !important;margin:0 !important; width: 34px !important; }’;
}
add_action(‘admin_head’, ‘custom_admin_logo’);
See’a
oh Sorry should be:
//Dashboard Logo
function custom_admin_logo() {
echo ‘#icon-index { background:url(http://sektorrd.com/assets/nano.png) !important; height: 34px !important;margin:0 !important; width: 34px !important; }’;
}
add_action(‘admin_head’, ‘custom_admin_logo’);
There’e also in WP3.3 a Super Annoying Admin Bar on the Top….
I haven’t found the way to remove the bar , but I just use
//Admin Menu Bar
function custom_admin_bar() {
echo ‘#wp-admin-bar-wp-logo,#wp-admin-bar-comments,#wp-admin-bar-new-content,#wp-admin-bar-help { display:none !important; visibility:hidden !important; }’;
}
add_action(‘adminmenu’, ‘custom_admin_bar’);
I believe you can remove it from your User Profile
Just turn it off when viewing the site.
No , but this is a new admin bar inside the dashboard, you’ll hate it!
Found a page that helped make sure the Login Page Logo (Step 1.1) fits and is not cropped. Very helpful for me!
http://wordpress.org/support/topic/change-login-picture#post-1515940
Thank You!
Never use IDrive − they’re access to your gmail contact and send them spam without your confirmation.
Some very nice code and your plugin list is a pretty good resource. Nice job and thanks.
I want to know deep of wordpress
is there any video tutorial for wordpress
i want to become expert of wordpress
So that i can create different kind of script using wordpress.
Thank you
I’ve included many things like this in a custom “required code” plugin in the plugins-mu folder (to prevent client from disabling). I got the idea from Bill Erickson: https://github.com/billerickson/Core-Functionality
Hey great tutorial here.
I know very little PHP, but I’m pretty handy with WordPress. This would really put the finishing touches on my sites.
One question though, I added the action script in part 1 and it deleted the WP logo from the login page, but it didn’t like my image location apparently.
Can you explain “The path “images/logo_admin.png” is relative to the main theme folder”? My images aren’t in my main theme folder.
Thanks,
Will
Tried whats mentioned above but author and a few participants on changing admin bar logo , none worked it returned an error . Any suggested plugin that does the job. Ohh almost forgot . thanks for the super article.
Regards,
surbatteries.com I know very little PHP, but I’m pretty handy with WordPress. This would really put the finishing touches on my sites.
Removing dashboard widgets with this code did not work for me using WP v3.3.2. Used the remove_meta_box function instead, works like a charm. You can read more about it here: http://codex.wordpress.org/Dashboard_Widgets_API
function remove_dashboard_widgets()
{
// Remove dashboard widgets
remove_meta_box(‘dashboard_plugins’, ‘dashboard’, ‘normal’);
remove_meta_box(‘dashboard_quick_press’, ‘dashboard’, ‘side’);
}
add_action(‘wp_dashboard_setup’,'remove_dashboard_widgets’);
Thanks for the useful article!