Want to customize the logo of WordPress admin login page? This is possible by inserting a few lines of code in the functions.php file of your theme. Finally, a website that is more professional and close to your brand.
The topic is named “second method” ; because previously we described another similar method, which does not require the use of CSS file. Therefore, this method can be exploited to create a login page absolutely looking like your theme.
The WordPress default logo is present on your login page when accessed through the classic URL.
That is not very professional, you can replace it with one of your choice by interfering with your theme.
In fact, updates of WordPress will have no impact on your new logo; you will actually replace the default image file.
Log in first in your WordPress admin, open the Appearance menu and then click Editor.
On the right side of your screen, open the functions.php file.
Note: You can edit each file in your theme using a PHP editor for Mac OS X as Coda, Notepad + + for Windows or even Dreamweaver. The big advantage is being able to quickly undo the changes and enjoy editing features and uploaded via FTP.
Editing the file functions.php
At the beginning or end of file, insert the following lines of code:
Php / / custom logo
childtheme_custom_login function () {
echo '<link rel="stylesheet" type="text/css" href="'. get_bloginfo('stylesheet_directory').'/login.css" />';
}add_action ('login_head', 'childtheme_custom_login');?>
Do not leave lines blank if you place it at the end of file.
The third line of code adds a custom style sheet loading the login page of WordPress. For example, we noted the URL of the stylesheet contained by default in any theme.
So we must either:
- Add CSS needed for the login page;
- Or create a new CSS style sheet that contains just the styles unique to the login page;
We will hold the second solution for optimal results – although, personally, we have adopted the first solution.
Create a style sheet
Using a text editor, create a new file named login . css.
Save it in / wp-content/theme/Your_Theme/ in your WordPress site.
Then add the following lines of code:
# Login h1 a {background-image: url ("http://YOURSITE.com/wp-content/themes/YOUR_THEME/images/your-logo.png")! Important;}
A file must exist, whose name must match the one you see in the code – in this case, logo-perso.png.
Of course, feel free to change this URL if your logo is not located in the theme folder.
To save your custom logo to your server, use an FTP client like FileZilla or Cyberduck.
Edit and see the outcome
If you have not encountered any trouble, here is the result of a custom login page with custom logo:
Choose an image of 320 by 80 pixels (maximum).
Among the very common mistakes, you may get a blank page. Just make sure that there is no white line is present at end of file functions.php .
Unlike many tutorials on the subject, you should not get problems redirect to the WordPress admin page located at wp-admin.
Very important from a marketing perspective, customization of the logo is only a first step in creating your brand. Using your stylesheet, you can change all of this page and go further into what is commonly called branding.
Note: If you edit the CSS to set the background, login box style etc, you will get a totally different looking (and matching with your website’s theme) login page.
Visitors Read This Post Also Read:
- Create a custom login page in WordPress This tutorial will show you how to set up a custom login page in WordPress....
- Create a free child theme of your own in WordPress The principle of child theme is to enable the modification and adding features to a...
- Create an archive page listing of articles in WordPress sorted by date This tutorial discusses a method to automatically create an archive page in WordPress showing all...
- Create a custom menu location for WordPress Since WordPress 3.0, there has never been easier to create and edit navigation menus ....
- Highlight search results in WordPress with jQuery This PHP hack for WordPress enables you to highlight keywords in the search results of...
- Management of Gravatars in WordPress A gravatar is a miniaturized image that is associated with an e-mail. Implemented in the...
- 14 essential tips for securing your WordPress site The security of a WordPress site is not to be taken lightly. Hacking of WordPress...
- 15 Tips to secure your WordPress site Some time ago we had a problem with our WordPress site suffered a little hacking....
- Show the ID of your articles in a new column This snippet is to be pasted into the file “functions.php” your theme WordPress . It...
- Tips and tricks to start and continue a professional and successful blog In this article we will give you some tips for a having a successful and...
- Indispensable MySQL queries for custom fields in WordPress WordPress stores the data (articles, pages, categories, etc) in a MySQL database. It is therefore...
- WordPress Plugins to create a glossary in your blog Be faster and more precise, what many bloggers love. Using a glossary is widespread in the...
- Guide to Create a 3rd Party Theme We are not talking about changing the wallpapers, changing the taskbar color , saving it...
- Disable all update notifications in WordPress If you no longer wish to receive notifications of updates to your WordPress administration, a...
- How to install WordPress on Windows 7 to test themes and plugins offline Testing a new theme or plugin for developing them or just for normal usage in...
About Abhishek
