How to Customize WordPress Login Page Logo and Link Without Any Plugin

by • On Feb 20, 12 23:13pm • 4267 Views

Wordpress Tips and TricksIf 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-image: url(' . get_bloginfo( 'template_directory' ) . '/images/login-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 '360° Blog'; }
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 eighth line we used the title of our site (360° Blog) 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.

You can follow us on Twitter, add on your Google+ circle or Like our Facebook page to get the latest news, updates and reviews.

advertisement

Comments