Customizing the Login Form in WP lufy September 08, 2017 <div id="mw-content-text" class="mw-content-ltr" lang="en" dir="ltr"> <p>Origin site: <a href="https://codex.wordpress.org/Customizing_the_Login_Form#How_to_Login" target="_blank">Customizing the Login Form</a></p> <p> </p> <p>The Login Form is your gateway to using and configuring the WordPress publishing platform. It controls access to the <a title="Administration Screens" href="https://codex.wordpress.org/Administration_Screens">Administration Screens</a>, allowing only registered users to login.</p> <div id="toc" class="toc"> <div id="toctitle"> <h2>Contents</h2> </div> <ul> <li class="toclevel-1 tocsection-1"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#How_to_Login"><span class="tocnumber">1</span> <span class="toctext">How to Login</span></a></li> <li class="toclevel-1 tocsection-2"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#The_Login_Form"><span class="tocnumber">2</span> <span class="toctext">The Login Form</span></a></li> <li class="toclevel-1 tocsection-3"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#Customizing_the_WordPress_Login"><span class="tocnumber">3</span> <span class="toctext">Customizing the WordPress Login</span></a> <ul> <li class="toclevel-2 tocsection-4"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#Change_the_Login_Logo"><span class="tocnumber">3.1</span> <span class="toctext">Change the Login Logo</span></a></li> <li class="toclevel-2 tocsection-5"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#Styling_Your_Login"><span class="tocnumber">3.2</span> <span class="toctext">Styling Your Login</span></a></li> <li class="toclevel-2 tocsection-6"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#Login_Hooks"><span class="tocnumber">3.3</span> <span class="toctext">Login Hooks</span></a></li> <li class="toclevel-2 tocsection-7"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#Make_a_Custom_Login_Page"><span class="tocnumber">3.4</span> <span class="toctext">Make a Custom Login Page</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-8"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#Resources"><span class="tocnumber">4</span> <span class="toctext">Resources</span></a></li> <li class="toclevel-1 tocsection-9"><a href="https://codex.wordpress.org/Customizing_the_Login_Form#Related"><span class="tocnumber">5</span> <span class="toctext">Related</span></a></li> </ul> </div> <h2><span id="How_to_Login" class="mw-headline">How to Login</span></h2> <p>If you installed WordPress in your website's root directory, your login page is:<br /><tt>http://example.com/wp-login.php</tt></p> <p>If you installed WordPress in its own subdirectory, e.g., <tt>/directory</tt>, your login page is:<br /><tt>http://example.com/directory/wp-login.php</tt></p> <p>If you have a problem logging in, try the <a title="Login Trouble" href="https://codex.wordpress.org/Login_Trouble">Login Trouble</a> suggestions.</p> <h2><span id="The_Login_Form" class="mw-headline">The Login Form</span></h2> <p>At the top of login page is the WordPress logo and link, followed by the login form, with:</p> <div class="floatright"><a class="image" title="WordPress login form page screenshot" href="https://codex.wordpress.org/File:login_form.png"><img src="https://codex.wordpress.org/images/6/60/login_form.png" alt="WordPress login form page screenshot" width="396" height="518" /></a></div> <ul> <li>Input fields for "Username" and "Password."</li> <li>A "Remember Me" checkbox. If checked your browser keeps you logged in for 14 days. (If unchecked you're logged out when you quit the browser, or after two days.)</li> <li>The "Log In" button for submitting the form data.</li> </ul> <p>Below the form are two links: One is for registered users who've forgotten their password. The other goes to the front page of your WordPress site.</p> <p>This one login form can do three things:</p> <ol> <li>Log into a site (by filling in a valid Username and Password).</li> <li>Email a password to a registered user (by clicking the <span><span>Lost your password?</span></span> (link: <tt>wp-login.php?action=lostpassword</tt>).</li> <li>Register new users (who've arrived at this form by clicking a <span><span>Register</span></span> (link: <tt>wp-login.php?action=register</tt>).</li> </ol> <h2><span id="Customizing_the_WordPress_Login" class="mw-headline">Customizing the WordPress Login</span></h2> <p>Much of WordPress login page can be easily changed with WordPress Plugins (<a class="external text" href="http://wordpress.org/extend/plugins/search.php?q=login" rel="nofollow">search for "login"</a>). It can also be changed by manually adding code to the <a title="Functions File Explained" href="https://codex.wordpress.org/Functions_File_Explained">WordPress Theme's<tt>functions.php</tt></a> file.</p> <h3><span id="Change_the_Login_Logo" class="mw-headline">Change the Login Logo</span></h3> <p>To change the WordPress logo to your own, you will need to change the CSS styles associated with this heading:</p> <pre><h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1></pre> <p>WordPress uses CSS to display a background image -- the WordPress logo -- in the link (<tt><a></tt>) inside the heading tag (<tt><h1></tt>). You can use the <tt>login_enqueue_scripts</tt> hook to insert CSS into the head of the login page so your logo loads instead. To use the code below, replace the file named <tt>site-login-logo.png</tt> with the file-name of your logo, and store your logo with your active Theme files in a directory named <tt>/images</tt>:</p> <pre>function my_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png); height:65px; width:320px; background-size: 320px 65px; background-repeat: no-repeat; padding-bottom: 30px; } </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_logo' ); </pre> <p>The size of your logo should be no bigger than 80 x 80 pixels (though even this can change with <a href="https://codex.wordpress.org/Customizing_the_Login_Form#Styling_Your_Login">custom CSS</a>). Adjust the above <tt>padding-bottom</tt> value to the spacing you want between your logo and the login form.</p> <p>To change the link values so the logo links to your WordPress site, use the following WordPress hooks example; edit it and paste it below the previous in the <tt>functions.php</tt>:</p> <pre>function my_login_logo_url() { return home_url(); } add_filter( 'login_headerurl', 'my_login_logo_url' ); function my_login_logo_url_title() { return 'Your Site Name and Info'; } add_filter( 'login_headertitle', 'my_login_logo_url_title' ); </pre> <h3><span id="Styling_Your_Login" class="mw-headline">Styling Your Login</span></h3> <p>You can style every HTML element on the WordPress login page with CSS. To add styles to the <tt><head></tt> of your login page, use a function like the above <a href="https://codex.wordpress.org/Customizing_the_Login_Form#Change_the_Login_Logo"><tt>my_login_logo</tt></a>. Styles declared within the head element of a page are called an "embedded style sheet" and take precedence over styles in linked external style sheets.</p> <p>If you have a lot of login page styles, you may want to make your own custom login style sheet. This code, added to your <tt>functions.php</tt> file, would load a CSS file named <tt>style-login.css</tt>, stored with your active Theme files:</p> <pre>function my_login_stylesheet() { wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' ); wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' ); } add_action( 'login_enqueue_scripts', 'my_login_stylesheet' ); </pre> <p>WordPress links two of its own external style sheets to the login page: <tt><code><a class="external text" href="https://core.trac.wordpress.org/browser/tags/4.8/src/wp-admin/css/colors.css#L0" rel="nofollow">wp-admin/css/colors.css</a></code></tt> and <tt><code><a class="external text" href="https://core.trac.wordpress.org/browser/tags/4.8/src/wp-admin/css/wp-admin.css#L0" rel="nofollow">wp-admin/css/wp-admin.css</a></code></tt> (since <a title="Version 3.8" href="https://codex.wordpress.org/Version_3.8">Version 3.8</a>, previous versions used <tt>wp-admin/css/color/color-fresh.css, wp-admin/css/login.css</tt>). You can override the WordPress default styles by making your style declaration more "specific" -- when two styles apply to the same element, CSS gives precedence to the more specific selector.</p> <p>Here's some helpful, highly specifc CSS selectors for the login page:</p> <pre>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 {} </pre> <p>WordPress uses the CSS style sheet <tt>wp-admin.css</tt> to insert the logo and to hide the heading text with <tt>text-indent:-9999px;</tt>:</p> <pre>.login h1 a { background-image: url('../images/w-logo-blue.png?ver=20131202'); background-image: none, url('../images/wordpress-logo.svg?ver=20131107'); background-size: 80px 80px; background-position: center top; background-repeat: no-repeat; color: #999; height: 80px; font-size: 20px; font-weight: normal; line-height: 1.3em; margin: 0 auto 25px; padding: 0; text-decoration: none; width: 80px; text-indent: -9999px; outline: none; overflow: hidden; display: block; }</pre> <p>Using a more specific selector in your custom style sheet overrides the above <tt>background-image</tt> value, inserting your logo instead:</p> <pre>body.login div#login h1 a { background-image: url("images/site-logo.png"); }</pre> <p>The default login page style in <tt>colors.css</tt> sets the text color of the links below the form:</p> <pre>.login #nav a, .login #backtoblog a { text-decoration: none; color: #999; }</pre> <p>To override that, increase the specificity and include <tt>!important</tt>:</p> <pre>body.login div#login p#nav a, body.login div#login p#backtoblog a { color: #0c0 !important; /* Your link color. */ } </pre> <h3><span id="Login_Hooks" class="mw-headline">Login Hooks</span></h3> <div class="floatright"><a class="image" title="Login form screenshot demonstrating content added via hooks" href="https://codex.wordpress.org/File:login_hooks.png"><img src="https://codex.wordpress.org/images/e/eb/login_hooks.png" alt="Login form screenshot demonstrating content added via hooks" width="396" height="430" /></a></div> You can customize your WordPress login page with <a title="Plugin API/Action Reference" href="https://codex.wordpress.org/Plugin_API/Action_Reference">action hooks</a> and <a title="Plugin API/Filter Reference" href="https://codex.wordpress.org/Plugin_API/Filter_Reference">filter hooks</a>, including: <ul> <li>Actions in the <tt><head></tt> of the document: <tt>login_enqueue_scripts</tt>, <tt><a title="Plugin API/Action Reference/login head" href="https://codex.wordpress.org/Plugin_API/Action_Reference/login_head">login_head</a></tt>.</li> </ul> <ul> <li>Filters in the <tt><body></tt>: <a title="Plugin API/Filter Reference/login headerurl" href="https://codex.wordpress.org/Plugin_API/Filter_Reference/login_headerurl">login_headerurl</a>, <tt>login_headertitle</tt>, <tt>login_message</tt>, <tt>login_errors</tt>.</li> </ul> <ul> <li>Actions at the bottom of and below the form: <tt>login_form</tt>, <tt>login_footer</tt>.</li> </ul> <p>The image to the right shows where several of the hooks can add content.</p> <p>The above hooks run when using the form to login. Others are meant for registration, password retrieval, and WordPress Plugins.</p> <p>The WordPress file <code><a class="external text" href="https://core.trac.wordpress.org/browser/tags/4.8/src/wp-login.php#L0" rel="nofollow">wp-login.php</a></code> generates the HTML, containing the location and sequence of all the login page hooks.</p> <h3><span id="Make_a_Custom_Login_Page" class="mw-headline">Make a Custom Login Page</span></h3> <p>So far you've seen how to customize WordPress' built-in login page. You can also create your own custom login Page by using the <a title="Function Reference/wp login form" href="https://codex.wordpress.org/Function_Reference/wp_login_form">wp_login_form</a> function in one of your WordPress Theme's <a title="Pages" href="https://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates">Page Templates</a>:</p> <pre><?php wp_login_form(); ?></pre> <p>The function has <a title="Function Reference/wp login form" href="https://codex.wordpress.org/Function_Reference/wp_login_form#Usage">several parameters</a> to change the default settings. For instance, you can specify: the ID names of the form and its elements (for CSS styling), whether to print the "Remember Me" checkbox, and the URL a user is redirected to after a successful login (default is to stay on the same Page):</p> <pre><?php if ( ! is_user_logged_in() ) { // Display WordPress login form: $args = array( 'redirect' => admin_url(), 'form_id' => 'loginform-custom', 'label_username' => __( 'Username custom text' ), 'label_password' => __( 'Password custom text' ), 'label_remember' => __( 'Remember Me custom text' ), 'label_log_in' => __( 'Log In custom text' ), 'remember' => true ); wp_login_form( $args ); } else { // If logged in: wp_loginout( home_url() ); // Display "Log Out" link. echo " | "; wp_register('', ''); // Display "Site Admin" link. } ?> </pre> <div class="floatright"><a class="image" title="Screenshot of wp_login_form display, with filters adding text" href="https://codex.wordpress.org/File:login_form_template.png"><img src="https://codex.wordpress.org/images/c/ca/login_form_template.png" alt="Screenshot of wp_login_form display, with filters adding text" width="285" height="231" /></a></div> The above function parameters: <ul> <li>Redirect the user to the Administration <a title="Dashboard Screen" href="https://codex.wordpress.org/Dashboard_Screen">Dashboard Screen</a> after login.</li> <li>Set the ID name for the form: <tt>id="loginform-custom"</tt>.</li> <li>Change the text labels for the form elements (e.g., from the default "Username" to, in this example, "Username custom text").</li> <li>Print the "Rememeber Me" checkbox.</li> </ul> <p>If the user is already logged in, the form does not print; instead they see two links: <span><span>Log Out</span></span> | <span><span>Site Admin</span></span>.</p> <p>This login form has the filters: <tt>login_form_top</tt>, <tt>login_form_middle</tt>, and <tt>login_form_bottom</tt>. Each can print text in the form, as shown in the image on the right.</p> <p>The form itself is generated by code in the WordPress <code><a class="external text" href="https://core.trac.wordpress.org/browser/tags/4.8/src/wp-includes/general-template.php#L0" rel="nofollow">wp-includes/general-template.php</a></code> file. Because your custom login Page is different than the built-in WordPress login page (<code><a class="external text" href="https://core.trac.wordpress.org/browser/tags/4.8/src/wp-login.php#L0" rel="nofollow">wp-login.php</a></code>), the same CSS stylesheets do not apply. But your active Theme's stylesheet (<tt>style.css</tt>) does apply, so use that to style this form.</p> <p>Other <a title="Template Tags" href="https://codex.wordpress.org/Template_Tags#General_tags">template tags</a> related to login functionality include <a title="Function Reference/wp login url" href="https://codex.wordpress.org/Function_Reference/wp_login_url">wp_login_url</a>, <a title="Function Reference/wp logout url" href="https://codex.wordpress.org/Function_Reference/wp_logout_url">wp_logout_url</a>, <a title="Function Reference/wp loginout" href="https://codex.wordpress.org/Function_Reference/wp_loginout">wp_loginout</a>, <a title="Function Reference/wp lostpassword url" href="https://codex.wordpress.org/Function_Reference/wp_lostpassword_url">wp_lostpassword_url</a>, <a title="Plugin API/Filter Reference/login redirect" href="https://codex.wordpress.org/Plugin_API/Filter_Reference/login_redirect">login_redirect</a>, and <a title="Function Reference/wp register" href="https://codex.wordpress.org/Function_Reference/wp_register">wp_register</a>.</p> <h2><span id="Resources" class="mw-headline">Resources</span></h2> <ul> <li><a class="external text" href="http://digwp.com/2010/12/login-register-password-code/" rel="nofollow">Custom Login/Register/Password Code</a></li> <li><a class="external text" href="http://www.flickr.com/groups/bm-custom-login/pool/" rel="nofollow">Flickr: The Custom WordPress Logins Pool</a></li> </ul> <h2><span id="Related" class="mw-headline">Related</span></h2> <ul> <li><a title="Login Screen" href="https://codex.wordpress.org/Login_Screen">Login Screen</a></li> <li><a title="Administration Screens" href="https://codex.wordpress.org/Administration_Screens">Administration Screens</a></li> </ul> <p><strong>Login Tags</strong>: <a title="Function Reference/is user logged in" href="https://codex.wordpress.org/Function_Reference/is_user_logged_in">is_user_logged_in()</a>, <a title="Function Reference/wp login form" href="https://codex.wordpress.org/Function_Reference/wp_login_form">wp_login_form()</a>, <a title="Function Reference/wp loginout" href="https://codex.wordpress.org/Function_Reference/wp_loginout">wp_loginout()</a>, <a title="Function Reference/wp logout" href="https://codex.wordpress.org/Function_Reference/wp_logout">wp_logout()</a>, <a title="Function Reference/wp register" href="https://codex.wordpress.org/Function_Reference/wp_register">wp_register()</a> <br /><strong>Login URLs</strong>: <a title="Function Reference/wp login url" href="https://codex.wordpress.org/Function_Reference/wp_login_url">wp_login_url()</a>, <a title="Function Reference/wp logout url" href="https://codex.wordpress.org/Function_Reference/wp_logout_url">wp_logout_url()</a>, <a title="Function Reference/wp lostpassword url" href="https://codex.wordpress.org/Function_Reference/wp_lostpassword_url">wp_lostpassword_url()</a>, <a title="Function Reference/wp registration url" href="https://codex.wordpress.org/Function_Reference/wp_registration_url">wp_registration_url()</a></p> </div> <p> </p> <div id="catlinks"> <div id="catlinks" class="catlinks"> <div id="mw-normal-catlinks" class="mw-normal-catlinks"><a title="Special:Categories" href="https://codex.wordpress.org/Special:Categories">Categories</a>: <ul> <li><a title="Category:WordPress Lessons" href="https://codex.wordpress.org/Category:WordPress_Lessons">WordPress Lessons</a></li> <li><a title="Category:WordPress Help" href="https://codex.wordpress.org/Category:WordPress_Help">WordPress Help</a></li> <li><a title="Category:Templates" href="https://codex.wordpress.org/Category:Templates">Templates</a></li> <li><a title="Category:New page created" href="https://codex.wordpress.org/Category:New_page_created">New page created</a></li> <li></li> </ul> </div> </div> </div> <p> </p>
Comments (0)
Leave a Comment
No comments yet. Be the first to comment!