How To Customize The WordPress Admin Easily

Advertisement

In this article, we take a break from some of the more advanced ways to customize WordPress, and share some super-easy customization techniques for the WordPress Admin area.

If you’re just getting started with WordPress, or have been running with default functionality for a while and now want to dig in with some useful and easy ways to customize your WordPress site, a great place to start is the WordPress Admin area, or backend. One of the great things about WordPress is that each part of the backend is easily customized using simple PHP functions.

customize-wp-admin

In this article, you’ll learn how to customize the login page with your own logo, add new widgets to the dashboard, add custom content to the admin footer, make it easier to get in and out of the Admin area, and more. When combined, these techniques can improve branding, accessibility, and usability of your WordPress-powered site.

Changing the Default WordPress Login URL

By default, logging in to the WordPress Admin area requires either /wp-admin or /wp-login.php in the URL, which isn’t a lot to type. You can, however, make it even easier by changing the login URL to something more memorable and better branded.

This technique requires .htaccess file manipulation. Usually, this is a file hidden in the root of your WordPress installation. It’s automatically created by WordPress after setting custom permalinks using URL rewriting.

First, check your SFTP/FTP client preferences to show hidden files—most FTP clients manage that. Then, check that the file .htaccess exists. If that is not the case, create it by using your favorite notepad. On Windows, use the Notepad++ software to create it. Open it and add this line on top:

RewriteRule ^login$ http://YOUR_SITE.com/wp-login.php [NC,L]

Just replace the login keyword with one of your choice and your website’s URL.

1

Now, open your favorite browser and go to http://yoursite.com/login. You’ll be redirected to the WordPress login page. Remember that your clients are not supposed to know everything about WordPress usages—a user-friendly URL is far better to remember than /wp-login.php.

Easy to remember, easy to teach, easy to learn!

Changing the Default External Link of the WordPress Login Page

When you log into WordPress, the default logo links to WordPress.org. Let me show you a quick tip for using your own link. Open the functions.php file. Then, add the following lines of code. And be sure to remember the PHP tag enclosure.

// Use your own external URL logo link
function wpc_url_login(){
	return "http://wpchannel.com/"; // your URL here
}
add_filter('login_headerurl', 'wpc_url_login');

Don’t forget to save the file. Log out to view the result. Better, no?

Customizing the Login logo Without a Plugin

Reinforce your brand by changing the default WordPress login logo. The logo is one of the most important elements of your brand! People will memorize it to find you quickly. Showcase it!

This is the default WordPress login screen:

2

To enhance it, add these lines of code in your functions.php:

// Custom WordPress Login Logo
function login_css() {
	wp_enqueue_style( 'login_css', get_template_directory_uri() . '/css/login.css' );
}
add_action('login_head', 'login_css');

The third line points towards a separate stylesheet. Even though it’s possible to use that of your default CSS theme, I advise you to use Firebug3—a useful Firefox add-on—or any other Web development tool that allows you to edit your website in real-time. As you can see, just one line of code is needed to change the default logo.

#login h1 a { 
	background-image: url("http://YOUR-WEBSITE.com/wp-content/themes/YOUR_THEME/images/custom_logo.png") !important; 
	}

Feel free to change the logo URL if it’s not located in your theme folder. Now have a look at your login page: your custom logo appears!

4

If that is not the case, make sure that no white lines are present at the end of your functions.php file.

Changing the Footer of Your WordPress Administration

The default WordPress administration footer thanks you for using their content management system and links to WordPress.org. For professional use and website branding, you’ll want to customize this area.

Open the Appearance menu and click on Editor. Click on functions.php on the right side of your screen. You can also access the footer by using an FTP client to locate /wp-content/themes/NAME_OF_YOUR_THEME/functions.php.

Now, add the following lines of code, taking care to place them between PHP tags:

// Custom WordPress Footer
function remove_footer_admin () {
	echo '© 2012 - WordPress Channel, Aurélien Denis';
}
add_filter('admin_footer_text', 'remove_footer_admin');

To customize the content, just change the second line inside the echo, between the quotes.

Finally, refresh your browser to see the result.

5

Adding Custom Widgets to Your Dashboard

It can be useful to add your own widget to provide general or commercial information. Adding a widget to the WordPress dashboard can be done very quickly. Again, open the functions.php file, then, add the following lines of code:

// Add a widget in WordPress Dashboard
function wpc_dashboard_widget_function() {
	// Entering the text between the quotes
	echo "<ul>
	<li>Release Date: March 2012</li>
	<li>Author: Aurelien Denis.</li>
	<li>Hosting provider: my own server</li>
	</ul>";
}
function wpc_add_dashboard_widgets() {
	wp_add_dashboard_widget('wp_dashboard_widget', 'Technical information', 'wpc_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'wpc_add_dashboard_widgets' );

In this example, add the desired text between the echo tag, after the quotes. You could also insert HTML; an unordered list for example. Name your widget—this will be the widget title—by replacing “Technical informations” with your title of choice. This is what it will look like.

6

If you do not see your custom widget, click on the Options menu screen located in the top right of the window to display it.

Hiding Unwanted WordPress Dashboard Widgets

The WordPress dashboard displays multiple widgets that you can easily move by dragging and dropping. To mask them definitively, just add the following lines in the functions.php file:

add_action('wp_dashboard_setup', 'wpc_dashboard_widgets');
function wpc_dashboard_widgets() {
	global $wp_meta_boxes;
	// Today widget
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
	// Last comments
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
	// Incoming links
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
	// Plugins
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
}

You can choose what widgets you’d like to hide. In this case, “Right Now”, “Recent comments”, “Incoming links” and “Plugins” have been removed from your WordPress dashboard. To learn more about this feature, have a look at the codex7.

Creating Your Own Custom Admin Color Scheme

If you’re not totally satisfied with the WordPress admin color scheme, this is how you can customize it. All you need to do is create a new CSS stylesheet. In this example, we’ll call it admin.css and place it in a folder entitled/css. Once again, edit the functions.php file and add this snippet:

// Custom WordPress Admin Color Scheme
function admin_css() {
	wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/css/admin.css' );
}
add_action('admin_print_styles', 'admin_css' );

Your admin.css file must contain styles that are compatible with WordPress. Again, I recommend you use Firebug or Web Inspector to identify the right ones.

Conclusion

That’s all folks! I hope you have learned a few good tips to make WordPress act more like a white label CMS. Remember that customization is not just a branding technique, but also a way to boosting your productivity, by increasing user-friendliness.

If you’re not comfortable with PHP, you can make most of these changes with the White Label CMS WordPress8 plugin. Do you know any other great tips? Share them with us!

(jc)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2012/05/htaccess-rewrite-login-url.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2012/05/wordpress-default-login-screen.jpg
  3. 3 http://getfirebug.com/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2012/05/login-custom-logo-wordpress.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/05/custom-footer-admin-wordpress.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2012/05/widget-dashboard.jpg
  7. 7 http://codex.wordpress.org/Dashboard_Widgets_API
  8. 8 http://www.videousermanuals.com/white-label-cms/

↑ Back to topShare on Twitter

Aurélien Denis is the founder of the WordPress Channel project proposing freely downloadable tutorials and podcasts on iTunes. He is specialized in developing WordPress website for Neticpro and he is part of the Microsoft Imagine Cup Social Media Team, the world’s premier student technology competition with over 300,000 students from all over the world participating each year.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Really nice, simple and easy…. I guess it’s really useful to customize WP login page this way rather than using heavy plugins available. Which tends to increase page requests to the server and slowdown the performance.

    Cheers!

  2. 2

    Great tips, made very user friendly too. Hadn’t thought about the login logo change or the footer text, I’ll start to use those on my upcoming projects :)

    • 3

      Next up would be to secure the WordPress admin. There are many things that can be done, but simple things like the following are a great start and can go a long way:

      -Renaming the username to something other than “admin”
      -Limiting the number of login attempts and notifying you of failed attempts (there are plugins for this)
      -Changing the default login url to something other than /login or /wp-login.php

      • 4

        Agreed… In fact, I found this article because hackers have been trying to get access for months now. And I’m frustrated that I haven’t found a way to change the login url. This article suggests a redirect, which won’t help. Furthermore, changing username from admin doesn’t help either – username can be determined by default url structure of all author links. Anyone have a solution? Surprised this hasn’t been addressed by WP yet. Ability to customize login url is much needed.

        • 5

          Ersan, can you explain your comment?: “This article suggests a redirect, which won’t help. ” , I cant find any problem with this solution, other than it seems too good to be true…
          Thanks.

  3. 6

    Thanks for all the tips on customizing. I was looking to customize the labels on the WordPress admin screen, since we’re using the LDAP plugin for a multisite installation. Any advice on how to change the username label?

  4. 7

    Handy after the #fowd piece which suggested doing just this!

    Many thanks :o)

  5. 8

    Will these changes be overwritten when you update WP?

    • 9

      Any change made to your themes’s function.php is kept when you update WP. That’s the “right way” to change anything.

      You lose your changes only when you modify WordPress core files (and you should never do this).

    • 10

      Todd, these changes would not be overwritten if you update your WP.. However, if you update a pre-existing theme then it would be overwritten, you can prevent this by creating a child theme and placing your functions.php in there.

      • 11

        Absolutely not. If the extension is .php, even if the user donawolds it, Apache will process the code, so the user only sees what is processed, not the code itself which contains sensitive information.

    • 12

      Aurélien Denis

      May 20, 2012 12:34 am

      Another solution is to create functions plugin in the mu-plugins folder to make it available by default – and not depending on the theme. ;)

  6. 13

    CoronaAdvances

    May 18, 2012 4:11 am

    This was helpful for me ,thank you for this post.

  7. 14

    Excellent article, very helpful.
    Thanks

  8. 15

    Kevin Armstrong

    May 18, 2012 5:05 am

    Just what I was looking for all compiled in one article. Thanks!

  9. 16

    Thanks for the helpful info
    adminimize is a great plugin which let you control what you want to show in the admin page for different user roles

  10. 17

    Frankly, adding code to change the logo seems like overkill. I just download the wordpress login logo, erase and place my client’s logo, then FTP upload it over top of the existing logo. Message me if you can’t find where the logo resides.

    I love customizing the admin screens so thank you for the other tips!

    Rod Salm
    Death At Your Door, a weekly webcomic about Death living a life.

    • 18

      The problem with doing it that way is when you update WordPress, you’re client’s logo will be overwritten with the default WP logo once again.

      I like keeping things separated when I can, so, when I need to customize the login screen I use the Theme My Login plugin.

    • 19

      The only problem with replacing the wordpress logo that way is you have to replace it every time you update your WP.

      • 20

        Thanks Jules! Just a quick note to confirm that the depvloeers have resolved this issue and you will be able to see the Events Calendar link on the 2nd navigation menu that appears when you launch your Dashboard.

  11. 21

    Love the URL rewrite idea. To take the customizations further, I would suggest making the modifications into a plugin, that way it is easily reusable; all you would need to do is change the CSS file, avoiding functions.php altogether. I just wish there was a way to do the URL rewrite from the plugin, but I guess that would not make too much sense (editing the core functionality from within).

    Great article

  12. 22

    That’s a cool article: concise, useful and very practical! Right now, I tried to experiment with custom widgets, based on the section “Adding Custom Widgets to Your Dashboard”, and it really took me under 2 minutes to test and upload my first custom widget! :-)

    So, thanks again! :)

  13. 23

    Thanks for the useful tips! I especially like the hiding of the Dashboard Widgets. I hate having to turn those off each time for every site I create! :)

  14. 24

    Excellent post!
    I’ve implemented all of them with no problems. THIS will be very useful for me when developing WP sites for clients.

  15. 25

    Woaah ! I am using WordPress for quite a long time, but to be frank I never new that !
    This post is gonna help me a lot in my future projects !
    Thanks for sharing :)

  16. 26

    Very nice, very beginner friendly unlike many instructions that are even on WordPress’ sites. Little touches that make a lot of difference in making sites look customized and professional and some that just make it easier as a developer, so thank you.

  17. 27

    Great tips thanks!

  18. 28

    One important function i was looking for very cool tips.

  19. 29

    Nicole Hammett

    May 21, 2012 4:57 am

    Awesome tutorial and simple tips to customise the admin panel. I have always used a plugin to change the WordPress login logo but this has made me think doing it manually would work much better.

    Really easy to follow as well.

  20. 30

    TiPi Com and Web

    May 21, 2012 9:02 am

    Hi there !

    Just some more customization of the code for the step : link of the login page.
    It would be better to :
    – put a title more cool than the default title of the link ;
    – define a relative link instead of the absolute link.

    So here is my code :

    function wp_url_login(){
    return “/”; // The root of your site or any relative link
    }
    function wp_url_title(){
    return “TiPi Com and Web”; // The title of your link
    }
    add_filter(‘login_headerurl’, ‘wp_url_login’);
    add_filter(‘login_headertitle’, ‘wp_url_title’);

    Have fun with WordPress ;)

  21. 31

    Great advices! Thanks!
    Right now made changes in my site.
    I would suggest to use relative path in .htaccess rule:

    /wp-login.php instead http://YOUR_SITE.com/wp-login.php

    Benefits:
    1. The url in address bar keeps clean and don’t changes to wp-login.php.
    2. This trick can be used on multisite where many other domains.

    Thanks.

    • 32

      Juan Jose de la Torre

      July 11, 2012 10:47 am

      Good tip. Is better if we use relative paths instead of absolute. In that way the physical location will not interfere in .htacces configurations.

      Another way to do that::

      RewriteRule ^admin$ http://%{HTTP_HOST}/wp-login.php [NC,L]

  22. 33

    This is a fantastic article. I mean in the past I have rarely cared about the admin screens very much but over the last few years it has become more of a burden with a bunch of CSS hacks to get stuff done. This is very helpful and I will be bookmarking this for my late 2AM nights hacking away at stuff! :)

  23. 34

    Aurélien Denis

    May 23, 2012 7:23 am

    Thanks all!

  24. 35

    Great article! Will certainly be applying some features on the next project.

  25. 36

    Great info here. I also found that creating a simple PHP plugin file is very simple to do and upload, using all of the above. Keeps it all in one place.

    • 37

      The Point and Stare CMS Functions plugin does this all for you.
      Just search the repo for it.

  26. 38

    Great tutorial! Thank you very much!
    I’m looking forward other useful tricks! ;-)

  27. 39

    Why change the WordPress admin log in screen or admin? Are you trying to make out to your customers that you built WordPress? I have seen design agency do this and it always makes me suspicious, but that maybe because I’m paranoid.

    • 40

      Aurélien Denis

      May 28, 2012 11:53 pm

      Don’t be paranoid! :)

      I believe that customizing WordPress is like customizing your computer, your car, etc. The user experience is better if you feel as at home. Users will truly appreciate it and use WordPress more.

      I cannot imagine a customer who would buy a website without knowing the adopted technical solution and thus the choice of the CMS.

      Just my 2 cents. ;)

  28. 41

    I wonder if you could give us tips to change the default login URL under Nginx and not under Apache. I guess you must use the Rewrite Rules under Nginx, but I have no idea how to do it…

    • 42

      Aurélien Denis

      June 8, 2012 10:01 am

      Hum, that’s a good question… honestly I do not have ideas me either. Always working on Apache. :(

  29. 43

    I was trying to change the log.

    I have added to code to style.css as recommended and added the following code

    #login h1 a {
    background-image: url(“http://wiki.dataportability.org/download/attachments/1114429/logo.png?”) !important;
    }

    However, this does not result in showing the new logo. What is it that I’m doing wrong? Thanks in advance

  30. 45

    Well i would seriously like to change my login URL not just redirect it
    So du u have anything for that huh ??

  31. 46

    What stinks is I didn’t want to use ^login for the HTACCESS code of my WordPress login screen. I wanted to use a different name, unfortunately it didn’t work. I tried my name initials, I tried some words related to my blog, I’m forced to stick with ^login. It’s also a drag that my blog has almost no traffic, that I have to work on, arrghh the Internets.

    I hope someone knows of a solution to my post.

  32. 47

    Nice tutorial.. :)

    Now you can customize completly your WordPress Login Screen and Dashboard easily with “Erident Custom Login and Dashboard” plugin. You can Add your logo, change background images, colors, styles ,Dashboard footer etc. from the plugin’s settings page.

    Check it: http://wordpress.org/extend/plugins/erident-custom-login-and-dashboard/

  33. 48

    Great Tute.

    Just a question..

    RewriteRule ^login$ http://YOUR_SITE.com/wp-login.php [NC,L]

    Can we exchange the word “login” to any word we like?

  34. 50

    I’ve noticed that when I create a custom dashboard widget, including a url will crash everything. Anyone else experienced this?

  35. 51

    would it not be better to use the wp function add_rewrite_rule() for modifying .htcaccess files?

  36. 52

    I was looking for a way to change the logo on the login screen without a plugin and tried the suggestion above. However, it doesn’t seem to work.

    I added this code to my functions.php file:

    function login_css() {
    wp_enqueue_style( ‘login_css’, get_template_directory_uri() . ‘login.css’ );
    }
    add_action(‘login_head’, ‘login_css’);

    Then in my login.css file I added this:

    #login h1 a {
    background-image: url(“images/custom_logo.png”) !important;
    }

    I uploaded the functions.php, login.css and custom_logo.png to the server, but the WordPress logo is still showing. I double and triple-checked all my file names and locations, everything is correct, no white space either.

    Frustrating….

  37. 53

    Just found a solution that works:

    Add this to functions.php:

    function my_custom_login_logo() {
    echo ‘
    h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/custom_logo.png) !important; }
    ‘;
    }

    add_action(‘login_head’, ‘my_custom_login_logo’);

  38. 54

    RewriteRule ^login$ http://YOUR_SITE.com/wp-login.php [NC,L]

    is not working. Don’t know why. I am using wordpress version 3.5.
    Suppose,
    RewriteRule ^login$ http://h2cweb.net/wp-login.php [NC,L]

    It returns 404 error.

    • 55

      Aurélein Denis

      May 3, 2013 4:07 am

      With WordPress 3.5 you can just add /admin in your browser to get redirected. So, it’s not useful to add another rewrite rule.

  39. 56

    I have created a plugin which does the login page customization and also a little more like changing the default url etc without making much php calls unlike other plugins. This the plugin which I use for my client wordpress sites.

    Plugin Name: My WordPress Login Logo

    http://wordpress.org/extend/plugins/my-wp-login-logo/

  40. 57

    How to add two admin for one site in word press? please anybody help me

  41. 58

    it seems to be interesting, let me try this but can we able to done it with wp 5.1?

  42. 59

    Great article! Here’s one suggestion for your rewrite rule:

    RewriteRule ^login/?$ wp-login.php [NC,L]

    Adding /? between $ and ‘login’ (or whatever word you use) makes the trailing ‘/’ optional, otherwise you get a redirect if it’s NOT there. Also, notice I’ve left off the domain part of the rewrite and just made it ‘wp-login.php’. Everything in the .htaccess file is relative to the directory it resides in. No need for the full URL.

  43. 60

    Thanks for the handy post.

    Was just looking on the Codex and it says not to use admin_print_styles to enqueue styles or scripts but to use admin_enqueue_scripts instead.

  44. 61

    Hello,

    Thanks for the good article! I’m currently looking into customising WP native wp-login.php in URLs. However, I’m looking to customise all the references to wp-login.php – when a user is requesting a new password, registering, logging out and so on, not just for login page itself.

    I can’t find any tutorial that would explain all of it. The closest I found is this article: http://en.bainternet.info/2012/wordpress-easy-login-url-with-no-htaccess however, the wp-login.php still shows up in the URL if for example I try to specify a new password and they don’t match. Here is more on the problem that I’m facing http://wordpress.stackexchange.com/questions/98200/wp-login-forms-action-urls-displayed-as-pretty-urls-in-browser-ex-with-restore

    I wonder if you know a good way to hide all the references to wp-login.php in all the cases of login in, registering, password recovery and so on.

    I would hugely appreciate any help.

    Many thanks,
    Dasha

  45. 62

    If you really want to change your login url, you should use this plugin: http://wordpress.org/plugins/rename-wp-login/
    It’s not just a RewriteRule, and it doesn’t break anything.

  46. 63

    I just wanted to write a quick note about the RewriteRule at the top of this article. If you are having trouble with it and you are not sure why, you should put “RewriteEngine On” (without the quotes) on the line before your RewriteRule.

    Also, you can remove the URL and just use “/wp-login.php” for a more concise rule. Plus, if you are using WordPress on a demo site, and you change the URL to a live site, you won’t have to change your .htaccess file after the change, because you are not using a static URL in your RewriteRule.

    This worked for me, and I hope it makes it easier for some other people.

    Thanks!

  47. 64

    I am still a beginner at WordPress. I wanted to use this codes to try and change the layout, but haven’t been successful. I have few question:
    1. When you talk about function.php don’t you mean the one that is inside our current theme? Or are we supposed to create the file in different folder? Like inside wp-admin folder… I copied these codes in function.php under the current theme and it does not work…

    2. Does this work with the new version of WordPress? Right now it is 3.8.

    Thanx.

  48. 65

    YEEES! It works! I’m already tired for looking a good method, but nothing worked. Your advices are simple and I found some of them are good for further improvements of my blog. Thanks.

    P.S: I’m your new subscriber :)

  49. 66

    hi, cool post. and what must do to when logged go to another page, different to account settings. i want to go directly to some gravity forms entries, an eg.
    its possible? tks, marcelo

  50. 67

    I know it’s extremely useful to know how to do this and that using plugins is not the best solution all the time, but I wanted to mention our White Label CMS plugin does all this and more. It redirects /login to /wp-login.php, allows you to rebrand the login page, clean up and rebrand the dashboard as well as give “Editors” access to “menus” and “widgets” and a whole lot more. http://apuvsc.net

  51. 68

    Appears to break the WP-Admin redirect. EDIT – Actually, it doesn’t. Upon second look, I had an couple extra lines after the closing of my PHP files that broke the redirect.

  52. 69

    Hi, great article!

    I’ve placed the RewriteRule ^login$ http://YOUR_SITE.com/wp-login.php [NC,L] code in my .htaccess (of course changed to actual URL), but that didn’t work. The website gets a redirect loop warning.

    Changed it back to the original file and it works. I’m using WordPress 3.8.1, I think that version does the trick by itself.

  53. 70

    I’m just loving this :D
    Thank you!

  54. 71

    Hi, I am trying to use your: “HIDING UNWANTED WORDPRESS DASHBOARD WIDGETS” I used:

    add_action(‘wp_dashboard_setup’, ‘wpc_dashboard_widgets’);
    function wpc_dashboard_widgets() {
    global $wp_meta_boxes;
    // Today widget
    unset($wp_meta_boxes[‘dashboard’][‘normal’][‘core’][‘dashboard_right_now’]);

    ….but it won’t hide it. I am using wordpress multisite. Can this be the problem?

    Thank you,
    Carlos

  55. 72

    Bonjour,
    Je cherche depuis un bon bout de temps un moyen d’avoir la connexion et l’inscription sur la page wp-login.php, exactement comme la page de connexion de Twitter, Badoo… Avez-vous une idée de comment faire cela? Un plugin?
    Merci.

  56. 73

    Very good article.
    I preffer to use admin themes to impress my clients that are already working with wordpress and know how boring default theme can be. :)
    You can see ones that I often use on this WordPress admin theme list.
    Keep up with good info and thanks.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top