Customise the WordPress login page (Thesis theme)

Does your WordPress login page look like this?

Standard WordPress login page.

The standard WordPress login page has a simple form, asking for a Username and Password. Above it is a WordPress logo that links to wordpress.org.

At first glance it looks as though you have to meddle with the WordPress core files to customise this page, but in fact you don’t.

A tweet from Heather Burns put me on the right track. A couple of simple additions to your Custom Functions file is all you need — no plugins required.

A post at WPRecipes, Customize WordPress login logo without a plugin, has the basic information (also see the comment from Matt for additional coding).

Here’s how users of the Thesis theme (affiliate link) can actually implement it.

Create a suitable graphic

WordPress logo on login page.

The WordPress logo on the login page is 310 pixels * 70 pixels. If you use a larger image, only part of it will be displayed.

Create the graphic you want to use. Note the file name — you need to insert that name where the code below has this text: [your-image-name].

Upload the graphic into your Thesis theme’s custom images folder: http://example.com/wp-content/themes/thesis/custom/images.

Edit custom_functions.php

Next edit the Thesis custom_functions.php file. You can do that via your FTP software or from your site’s Dashboard with Thesis 1.7′s Custom File Editor. If you use a text editor that can interact directly with a server, such as BBEdit, then that’s another way to do it.

Thesis 1.7′s Custom File Editor.

I prefer to use FTP or direct access with my text editor, as then if something breaks and I can no longer access the site’s Dashboard, at least I can fix it immediately.

Add your custom image

Add the following function to use your image, instead of the standard image:

<?php
// custom login image

function my_custom_login_logo() {
 echo '<style type="text/css">
 h1 a { background-image:
url('.get_bloginfo('template_directory')
.'/custom/images/[your-image-name])
 !important; }
 </style>';
}

add_action('login_head', 'my_custom_login_logo');

Now load your login page, and Refresh or Reload if necessary. You should see your new login image.

Troubleshoot

Is your website now totally broken so nothing at all displays, or only some error message? Open custom_functions.php via FTP and remove the code you just added. Save and check. Your site should now work correctly again.

My new login page, with custom image.

Check the code you added: it should be identical to the code above, except that [your-image-name] should be replaced with the filename of your custom image.

Is your image missing? Refresh your browser, try another browser. Check that you uploaded the image to the correct place and have used the correct file name.

If you have other functions already in custom_functions.php you may need to remove the <?php line from the coding above.

Change the image link

If that all worked correctly you should now see your custom image in place of the WordPress logo. But the image links through to wordpress.org.

If you’d like to change that link you need another custom function. Add the following at the end of your custom_functions.php file, just after the previous code:

//Custom Login Screen
function change_wp_login_url() {
echo bloginfo('url');
}

function change_wp_login_title() {
echo get_option('blogname');
}

add_filter('login_headerurl', 'change_wp_login_url');
add_filter('login_headertitle', 'change_wp_login_title');

Test

Check your login page. You should see your new custom image.

Hover over the image (or click on it) and it should link to your site’s home page. Instead of the previous tooltip, ‘Powered by WordPress’, the new tooltip should offer your site’s name and tagline.

I manage multiple blogs. Adding a different custom image to the login page of each one is an excellent visual reminder of which site I’m logging into. If you’re setting up a site for a client, this is a nice touch.

4 comments

Tagged as: customise, login, themes, thesis, WordPress

You may also like -

Log in quickly to WordPress with QuickLoginThesis and WordPress: a winning teamMake the most of Safari on the MacMacTips.infoSave a page in Safari to read later on your Mac or iPadMacTips.infoHow to read Kindle books on your Mac, iPad or iPhoneMacTips.info