• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Customize the logo of your WordPress login page : second method

By Abhishek Ghosh March 29, 2011 4:51 am Updated on October 17, 2014

Customize the logo of your WordPress login page : second method

Advertisement

Want to customize the logo of WordPress admin login page? This is possible by inserting a few lines of code in the <span style="background: #E9EEF3;">functions.php</span> 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.

Advertisement

---

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 <span style="background: #E9EEF3;">functions.php</span> 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 logochildtheme_custom_login function () {echo '&lt;link rel="stylesheet" type="text/css" href="'. get_bloginfo('stylesheet_directory').'/login.css" /&gt;';}add_action ('login_head', 'childtheme_custom_login');?&gt;&nbsp;

 

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 <span style="background: #E9EEF3;">/ wp-content/theme/Your_Theme/</span> 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:

 

Customize the logo of your WordPress login page

 

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 <span style="background: #E9EEF3;">functions.php</span>.

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.

 

Signature

This Article Has Been Shared 728 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Orthopaedic Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Customize the logo of your WordPress login page : second method

  • Create mouse hover effect for button using CSS sprite

    You must have noticed buttons in various websites that change its appearance on mouse hover. Here is tutorial on how to create very easily.

  • Create custom menus in WordPress

    Creating custom menus is now possible in Wordpress via drag and drop interface, make your own menus using a combination of external links, categories or pages in a few clicks.

  • Create your own custom WordPress mobile theme

    After reading this guide you can create your own custom wordpress theme with logo for major mobile phone browsers.

  • Usage of elegant and light typography to speed up your website

    Typography is an important part of web designing. We can use light typographical designs and CSS to spice up the website’s look.

  • How to get different theme for different category in WordPress

    You might want to use different theme for different category in your Wordpress blog, here is how you can apply so.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

You can subscribe to our Free Once a Day, Regular Newsletter by clicking the subscribe button below.

Click To Subscribe

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (20K Followers)
  • Twitter (4.9k Followers)
  • Facebook (5.8k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.2k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Cloud Computing : Cybersecurity Tips for Small Business Owners January 20, 2021
  • Arduino : Independently Blink Multiple LED January 18, 2021
  • What is a Loosely Coupled System? January 17, 2021
  • How To Repack Installed Software on Debian/Ubuntu January 16, 2021
  • Components of Agile Software Development January 15, 2021

 

About This Article

Cite this article as: Abhishek Ghosh, "Customize the logo of your WordPress login page : second method," in The Customize Windows, March 29, 2011, January 20, 2021, https://thecustomizewindows.com/2011/03/customize-the-logo-of-your-wordpress-login-page-second-method/.

Source:The Customize Windows, JiMA.in

 

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Cookie Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2021 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy