Change WordPress Login Logo

February 11th, 2009 Posted in Wordpress MU

At first I would like to show you, how to replace the standard wordpress logo on your login page.

wp_login_form

This is very simple. All we have to do is to replace the background image at <h1> stylesheet. Let’s go:

Create a new css file. I will name this file “mg_login_style.css”. Add this few lines:

  1. h1 a {
  2. background: url(mg_login_logo.png) no-repeat top center;
  3. width: 326px;
  4. height: 50px;
  5. text-indent: -9999px;
  6. overflow: hidden;
  7. padding-bottom: 15px;
  8. display: block;
  9. }

Now, you have to create your own logo with transparent background. Name your logo “mg_login_logo.png”, because we’ve defined it’s name at this line:

  1. background: url(mg_login_logo.png) no-repeat top center;

At this moment, you should have two files, one logo image and one css-file. Finaly, you have to create a hook to replace the original logo. We need a new file. Name it “mg_login.php”. This php script contains one function, which prints your css file into login page and one hook which is called, when someone will login.

The code below shows, how it works on wordpress mu (wpmu). For “normal” wordpress you have to replace “mu-plugins” with “plugins”.

  1. function mg_login() {
  2. $csslocation = get_settings('siteurl')
  3. . '/wp-content/mu-plugins/mg_login_style.css';
  4. // print the css file
  5. echo '<link rel="stylesheet" type="text/css" href="'
  6. . $csslocation . '" />';
  7. }
  8. /* H O O K */
  9. add_action('login_head', 'mg_login');

wp_login_form_new

Here you can download this wordpress mu plugin:

 

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • MisterWong
  • Y!GG
  • Webnews
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit

Comments are closed.

My-Guide Interessante Guides: You must be jok..BodybuildingTutorialsGeschenkeLaTeX