December 4, 2013

Customizing the WordPress Login Page

Before giving a client access to their brand new website, customizing the login page to reflect the branding / design of the website is just icing on the cake. Clients always mention how nice it is and really appreciate the attention to detail. Putting in the work to achieve this really isn’t all that tough either. In just a few minutes of work, you can give the wordpress login page a new look that will resemble the website you’ve created and make the user experience for the website owner more seamless.

Let’s take a look at where to get started:

First off we need to create a new css file that will contain the styles we’d like to apply to the login page. Let’s call this ‘style-login.css’ for the purposes of this tutorial. We’ll need to upload this file to the server and call it in the next step.

Next, navigate to the functions.php file and paste in the following code at the bottom:

function my_login_stylesheet() { ?>
<link rel="stylesheet" id="custom_wp_admin_css"  href="<?php echo get_bloginfo( 'template_directory' ) . '/css/style-login.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Be sure to change the path to where you’ve created your new css file ‘style-login.css’.

That’s it! Now we can begin styling the various elements on the login page. Probably the first thing you’ll want to do is replace the wordpress logo with the logo of your client. To do this, we’ll target:

body.login div#login h1 a { background-image: url('../images/site-login-logo.png'); }

Again, you’ll want to change the path of the ‘background-image’ to that of your logo. The path is relative to where you’ve uploaded the ‘style-login.css’ file. In addition, you can use any other css properties to get the logo looking great.

The fun doesn’t stop there however. You can target just about any <html> element on the page. The key is to be as specific as possible when targeting each element so that your properties will override the properties targeted by the default wordpress css file. To make things a little easier for you, here is a list of the elements you can change to create a totally customized login page:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Making every aspect of your client’s site look great isn’t all you should be doing for them. You should also make sure their site is secure— and we can help you do just that. Check out our 5 WordPress Security Tips to make sure you’ve got a secure site.

Filed under:  Tutorials Web Development  ||  Tagged under:

Dylan Dunlop

When he isn’t honing in on his coding skills, Dylan’s either mastering various styles of guitar playing or bird watching.
Leave a comment
comments powered by Disqus

Base Terminology

SEO is the process of affecting the visibility of a website or a web page in a search engine's un-paid ("organic") search results.
The semantic web refers to the next stage of the world wide web and aims to ascribe semantic meaning to all web content through a collection of systems of classification. This means that, in the future, machines will be able to better understand the content we produce, resulting in better search results, new applications and an Internet that is fundamentally different from the one we use today!
What if each of the objects around you had a unique identifier that can be connected to the Internet? The goal of the Internet of things is to equip all objects in the world with tags that allow them to be digitally organized or manipulated. The implications? Less theft, less waste and the ability to control your surroundings in a manner never before possible.
Conversion optimization is the practice of modifying the parameters of a lead-generating system to stimulate a higher success rate as defined by goals. Most conversion optimization is structured to create an increase in ROI (return on investment). We frequently use multivariate and A/B split testing when optimizing conversion, wherein we test two or more systems at the same time, analyze their performance and deduce precisely what action items will bring us closest to the set goals in the least amount of time.
Market diagnostics or analytics is the process of collecting and analyzing business data — especially consumer data. This allows us to assess and improve the effectiveness of a marketing campaign.
In many applications today, there is such a phenomenal quantity of data available that it's difficult to collect and process with traditional database tools. The field of collecting, manipulating and drawing conclusions from massive quantities of data from a particular source is known as big data.
What started as a CMS (content management system) that was only meant to create and edit blog content has grown at a tremendous rate to become the most ubiquitous system for developing websites on the internet. WordPress accounts for an incredible 15% of all sites on the web.

RT @PicardTips: Picard engineering tip: Use the metric system.

6 months ago

RT @PicardTips: Picard management tip: Suppress your inner alarm. Be the calmest person in the room.

1 year ago

RT @dakami: i'm not saying everything you need to know about hacking, machine learning, and hacking machine learning is in this photo https…

1 year ago

Request Our Portfolio

  1. Which option best describes you? *

  2. Are you a key decision maker in the business you represent? *