Wordpress Custom Admin Branding

Customize the login screen, header and footer of the Wordpress Admin

Jan 08

24

What is it? (Updated 7/21/2008)

Inspired by the Custom Login Plugin by Ben Gillbanks The Custom Admin Branding Plugin allows you to not only re-brand the Wordpress login screen, but also the admin header and footer with your own custom images. The plugin has been completely updated for WP 2.5+ and includes a custom admin color scheme stylesheet.

It should be fairly easy to use for anyone familiar with Wordpress and has basic css and html skills. At its simplest it only requires you to activate and then replace three images with your own. Photoshop templates are included to help you with that.

Download

Wordpress 2.5+ v1.1.2
Wordpress 2.3.3 v0.3

Installation

  1. Download the Custom Branding Plugin
  2. Upload the ‘custom_branding’ folder to your plugins folder
  3. Go to the plugin section in your admin and activate

Customization

Using the Photoshop templates, replace the custom images in the images folder with your own.
If you are familiar and competent (or just adventurous) with css you can customize the values in the included css files. Some of things you may wish to change are:

  • The bg color, border, and text color of the button in the login screen
  • The bg color and text color of the admin header (note that there are different values for regular text and links)

If you are using Wordpress 2.5+ the plugin includes a custom admin color scheme. You can modify the values in the css file “custom-wp-admin.css” for a unique look. This is activated in your individual user profile.

The image in the footer can be linked as well. I use that area to put my logo for sites I’ve created for clients. If you are using WP 2.5+ and version 1.1 or later of the plugin go to the options page under the settings menu. Type in the url you would like to link to, click “update” and you are good to go.

If you are using the legacy version for Wordpress 2.3 and below, to change the link you’ll need to open up custom_branding.php and change the value on or around line 43 to point to whatever url you want. You’ll also want to change the ‘alt’ value in case the image can’t be loaded.

Code Example

For all versions: If you wish to use other types of images (.jpg, .gif, etc…) you can, but you need to manually change the names in the custom_branding.php file also.

Drop Down Menu Integration for WP 2.5+

One of my favorite Admin plugins is the drop down menu plugin from Ozh at Planet Wordpress. The custom branding plugin will work the WP 2.5+ version of drop down menus.

WordPress Upgrades

WordPress 2.5 brought about some major changes to the structure and markup of the administration system (hence the two versions of this plugin). But as long as the markup in the core files does not change the plugin will continue to work as you upgrade WordPress. This plugin does not modify any core files.

Changelog

Wordpress 2.5+

  • 1.1.2
    • Updated css to work with latest version of OZH Drop Down Menu.
    • Verified 2.6 compatibility.
  • 1.1.1
    • Added custom classes to style the login button.
  • 1.1
    • Added a settings page to update the footer link.
  • 1.0.1
    • Added a priority to the style sheet to have seamless integration with the Drop Down Menu Plugin.
  • 1.0
    • Adjusted plugin to the new Admin for WP 2.5
    • Simplified the login image
    • Enlarged the main logo image for the admin header
    • Added support for Ozh’s Drop Down Menu Plugin

Wordpress 2.1-.3

0.3 - Cleaned out some unnecessary code, corrected some links, and added some additional custom styles.
0.2 - Removed some whitespace in the code to eliminate some javascript and header errors.

Screenshots

For Wordpress 2.5

Custom Login Screen
Custom Admin HeaderCustom Admin Footer
Custom Header with Drop Down Menu

For Wordpress 2.1 - 2.3

Login Examples
Header Screenshot
Footer Screenshot

This is my first Wordpress plugin so if you have any questions or comments or suggestions please don’t hesitate to comment below or let me know.

Posted in Admin, Plugins

Trackback URL

54 Responses to “Wordpress Custom Admin Branding”

  1. 1

    Hi there - This is a great plugin, thanks. The only - and significant - problem though is that, when activated, the plugin is preventing certain dashboard and posting functionality from showing up.

    For example, I activated it on two sites running WP 2.2x, after which I could no longer see the “View site” link on the top left of the dashboard and, more importantly, I could see any of the WYSIWIG icons or code shortcuts in the write post interface.

    Any idea how these could be fixed please, as otherwise this is a cool and really useful plugin. Cheers, Richard.

  2. 2

    Sorry, I meant to say I could “not” see any of the WYSIWIG icons or code shortcuts in the write post interface… . Thanks.

  3. 3

    Hi Richard,

    Thanks for pointing out that error. Unfortunetely I don’t have a solution yet. I did notice that if you deactivate the plugin, bring up the write page and then re-activate the plugin it works - but only for that session.

    It seems like the css for the WYSIWIG is getting confused a little bit. I will continue to look into this and post a solution when I find one.

    If anyone else has an idea I would welcome any feedback.

  4. 4

    I tried out your branding plugin and it works for me sort of. however, when i click log out i get some errors.

    I suppose there might be a conflict with another plugin. I can send you a list or screen shot of the plugins i am using.

    I also tried to use your contact form and you are having issues with the verify image.

    Shoot me an email

  5. 5

    Hi

    I tried your plugin but receive the same errors on logging out

    Great idea though!

  6. 6

    I would like to see a continuation of the topic

  7. 7

    Love your plug-in. Thanks so much. Was working on this and just decided to do a quick google and found you.

    THanks. This is exactly what I need for clients. I use WP for a basic Content Management system - it is so much easier for a client to learn than larger CMS.

    This is great.

    Thanks again.!

  8. 8

    Hopefully the update should eliminate the errors some of you have been getting. There was some whitespace at the end of the code which was causing some havoc with the headers.

    Let me know if there are additional issues.

  9. 9

    Thanks so much for the plugin. I’ve always wanted to develop one for this purpose but fortunately, I have found it already done.

    Thanks for the update as it was causing an error which I wanted to point out but now it is fine.

  10. 10

    Hello,

    thank you for this great plugin, but I have this problem:

    Warning: Cannot modify header information - headers already sent by (output started at /mounted-storage/home50b/sub009/sc34411-EILL/
    czechbracelet.info/wp-content/plugins/custom_branding/custom_branding.php:56) in /mounted-storage/home50b/sub009/sc34411-EILL/czechbracelet.info/wp-includes/pluggable.php on line 391

    Can you help me?

    Thank you for reply.

    Kind regards,
    Edie

  11. 11

    I responded to an email to Edie but the most recent release of the plugin should clear up the remaining header issues.

    It should be noted that the plugin is compatible with Wordpress 2.2 and up.

    Please let me know if you have any other bugs or general comments.

  12. 12

    Very cool plugin. Adds a really nice polish to a site before handing it over to a client. :)

    I’m also excited that this will work with the Drop-Down Menus plugin, though I do hope you (perhaps working with that plugin’s author) do find a way to make them work without modifications. What happens the next time he puts out an update? It’ll be re-screwed up every time an update comes out unless you two build support in.

    Still, Nice effort. :)

    (I normally rankle at the necessity of modifying plugin files directly when there could be a Settings page, but in this case I think it works. It makes it a little less easy to mess up the “application design” that you the installer create. I… think… I like this better.)

  13. 13

    Hey Stephen,

    Thanks for the comment.

    I agree that it would nice if the integration would be seamless. The reason you have to modify the Ozh’s code is because my stylesheet is called before his. If anybody has any ideas along this route - I’m totally open for suggestions.

    I would actually really like to build in a settings page and if I can find the time in the future there will be. The problem with saving settings is that you then have to build in integration with the database - which is a whole new ballgame.

  14. 14

    “The problem with saving settings is that you then have to build in integration with the database - which is a whole new ballgame.”

    It’s actually really easy. I’m a hack and I’ve made a few plugins with Settings Screens. You don’t have to work the SQL directly at all — WP has functions that do it.

    I even managed to put all of a plugin’s options into an array so it’s one entry in the DB — prevents clutter in users’ tables! :)

    Look for:

    get_option()
    add_option()
    update_option()

    As for calling your CSS before Ozh’s, I think you can set a priority when adding the header hook. Set it really high and it should run later.

  15. 15

    Sounds good. I’ll give it a try.

  16. 16

    Change line 31 of your plugin to this:

    add_action('admin_head', 'custom_header', 11);

    Now it is compatible with Drop-Down Menus. :)

    Oh yeah, and the Plugin URL is incorrect.

    Let me know if you want help with the Settings page.

  17. 17

    Worked like a charm! I’ll update the plugin. Thanks Stephen!

  18. 18

    It now has a settings page for the footer link!

    Thanks for the inspiration Stephen.

  19. 19

    Im very excited about this plugin, and am just trying it out on my test site. i ran into one problem. i set my header area to white, and cant seem to get the link colors in the upper right to change;
    http://skitch.com/bewmedia/etrf/custom-branding-problem

    i changed the setting in the css to this
    #wphead_custom a {
    color: #000000;
    border:none;
    }

    but its not working for me.
    maybe im just way over tired, and missing something obvious.

    any advice?

  20. 20

    oh, also this class doesnt seem to be working completely either, background took but font color didnt

    #wphead_custom {
    background: white;
    padding: .8em 19em .8em 2em;
    color: #dd0460;
    }

  21. 21

    Hey Brooke,

    You need to add a couple additional classes to the style sheet (custom_branding_css). For individuals reading this later, these last couple of comments are referring to the legacy version of the plugin for WP 2.3.3 and down.


    #wphead_custom a, #wphead_custom a:visited {
    color: #000;
    border:none;}


    #user_info, #user_info a{
    color:#000;
    border-bottom:none;}

    When I get a chance I’ll update the plugin to include these classes by default.

  22. 22

    Hi,

    Great plugin. No errors at all.
    My only question is, how do I change the backgroundcolor of the login-button. It remains blue, whatever I do…

    Thanks, Janet

  23. 23

    Hi Janet,

    Thanks for the comment.

    What version of the plugin are you using?

  24. 24

    @Janet

    The login button’s values are coming from the ‘colors-fresh.css’ file in the css folder which is in the wp-admin folder.

    I will update the plugin to include these classes on the custom_branding stylesheet.

  25. 25

    Thanks for your good advice Josh!

    Now that my login screen is (almost) perfect, I see that the border of the “remember me” radiobutton is still blue.
    I’m sure you know how to fix that too…
    Cannot find it in the ‘colors-fresh.css’ file you mentioned earlier.

    Janet

  26. 26

    @Janet
    Unfortunately styling radio buttons and checkboxes is somewhat quirky. I believe WordPress actually hasn’t applied any style to it. The blue border you are seeing is coming from your browser.

    The only good way I know to style checkboxes is with css and javascript together.

  27. gravatar FabriceV
    27

    Hi,
    I am a newbie that currently test locally WordPress. Why the plugin is not registered at the official site. I have luckily discover it after hazardous web surfing. It’s really convenient to users to search WordPress plugins and consult, rate, comment with only one profile. However, I do not know if it’s convenient too for developer…
    Regards.

  28. 28

    It is a actually registered at the official site but I’ve never been able to figure out how to use Subversion to actually get it on there.

    Unfortunately its a real hassle and for me there are too many hoops to jump through. Maybe in the future though…

  29. 29

    uh… it doesn’t work? I uploaded all the files to the folder, and activated the plug in… but my login screen still looks the same as before?

  30. 30

    I can try and help but you’ll need to provide a little more information - like what version of WP and the plugin you are using for starters.

  31. 31

    Janet(April 8, 2008):
    Try this in the plugin’s css:

    #rememberme {
    background-color: transparent;
    border: transparent;
    }

    rememberme is the id of the checkbox in the login form. This worked for me in IE6/7 & FF2.

    k.

  32. 32

    Hi Kerry,

    Sorry for my delayed reaction, but your solution solved the problem.
    Thanks a lot!!!

    Janet

  33. 33

    Thank you for sharing the plugin. Great stuff!

  34. 34

    Love the plugin, I blogged about it. There was one issue though, when using a custom administrator interface, the header and footer parts of the plugin would interfere with the interface. So I modified (more or less removed) part of the code so the plugin would only customize the login screen.

    The details are here: http://blog.dimonay.com/500/wordpress-custom-admin-branding-login-only/

  35. 35

    Hey Dennis,

    Thanks for the kind review.

    Yeah, the header and footer customization is an issue when used with other custom admin plugins since they are using the same hooks.

    You can potentially use both if you just modify the css and image file to fit the dimensions that the other plugin’s header is using.

    For the next release I will think about putting in support for the some of the more common admin themes out there like the Leopard theme, and Fluency.

  36. 36

    It appears the new Ozh Admin Drop Down menu (released today?) breaks when used with your plugin. I get the menu appearing below the header image, thus overlapping the page title.

    Anyone else get this?

  37. 37

    I’ll take a look and get it fixed as soon as I can.

  38. 38

    Hi Paul,

    I have updated the Custom Branding Plugin. Download the new version and it should work fine with the drop down menu plugin.

    Let me know if there are any issues.

Trackbacks

  1. Wordpress Custom Admin Branding : Josh Byers | My Digital Playground of Fun and Frivolity
  2. Completing the CMS With Wordpress : Pressing Pixels | A Wordpress Magazine
  3. WordPress 2.5 und Theme-definiertes Login - bueltge.de [by:ltge.de]
  4. How To Customise Your Wordpress 2.5+ Log In Screen
  5. Skylog » Blog Archive » links for 2008-04-04
  6. Je inlogscherm aanpassen in WordPress | I-Dimensie
  7. ITz Blog - Blogger - 13 Great Wordpress Admin Themes
  8. Customizing WordPress 2.5 Login Screen » Amor’s Blog
  9. 14 Great Wordpress Admin Themes | CoryMathews.com
  10. WordpressIntoCMS
  11. WPCandy - WordPress Themes, Plugins, Tips, and Tricks — 6 Plugins for Branding the WordPress Admin
  12. Customize your Wordpress Admin Interface (Part One) | dimonay.blog
  13. Wordpress Custom Admin Branding (Login-only) | dimonay.blog
  14. The Life of Me » Blog Archive » Wordpress as a CMS and the plugins to help
  15. Custom Admin Branding » Wordpress Plugins
  16. Schweizer WordPress Magazin » Anleitungen CSS und XHTML » WordPress Login Gestaltung

Leave a Reply