Customizing Login Page Logo & Link

If you are familiar with the WordPress platform pretty well then you should have known by now that the default log in Page (wp-admin.php) is really boring. Especially the logo of WordPress on the login page is a major turn off for me. Additionally, if you click on the logo it will straight take you to the home page of WordPress.

However, using a very little snippet code you can change the default logo and the link with your very own logo and your site’s link. Don’t worry, it’s really easy to do.

Here is what you have to do

Step 1: Create a logo image (preferably PNG format) for the login page. WordPress Codex suggest that the logo should not be bigger than 323 pixels wide and 67 pixels high. Once done with creating the logo, upload it to your current theme’s “images” folder.

Step 2: Log in to your WordPress admin panel and go to “Appearance > Editor”. From there select the theme’s functions.php (create one if your theme doesn’t have any) file and add the following snippet code.

<?php 
function custom_login_logo() {
echo '<style type="text/css">
   h1 a {
   background: url('.get_bloginfo('template_url').'/logo.png)!important;
   background-repeat: none; } 
 </style>'; }
   add_action('login_head','custom_login_logo');
function login_logo_url() { return get_bloginfo('url'); }
   add_filter('login_headerurl','login_logo_url');
function login_logo_url_title() { return 'iftekhar.net'; }
   add_filter('login_headertitle','login_logo_url_title');
?>

Now, before you update your functions.php file make the necessary changes. Look at the fourth line carefully, I created “login-logo.png” image as my logo which belongs to my current theme’s “images” folder. You can use either PNG, JPG, or GIF file format. However, I would recommend using transparent images so that it can get melt with the background easily.

On sixth line we used “get_bloginfo(‘url’);” function to call the default home page address of our site. However, if you want to customize the parameter, visit the function’s WordPress reference page for more available options.

On eleventh line we used the title of our site (iftekhar.net) as the default title of the link and the tool tip message of the logo image which you can change manually with yours one.

Step 3: Once done with all the necessary changes you want to make, press “Update” button to save the theme’s functions.php file.

You are pretty much done. Now, go back to your WordPress login page (wp-login.php) and take a look at the changes. Please remember that these functions will work only and if only you are using your current theme’s functions.php file. So basically, you have to follow the same procedure every time you change your site or blog’s theme.

Today In History

  •  
  •  

Comment

Leave a Reply

Note: Convet HTML, PHP, JavaScripts from Postable, before posting from comment section.
License: By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution. Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.