WORDPRESS CUSTOM LOGIN PAGE WITHOUT USING A PLUGIN – THE RIGHT WAY

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="page-content content" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 40px;"> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>is one of the most widely use Blog Engine today and many web developers are using <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>as CMS to build Blog, Personal and Business site, on past few days, I was working on a <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>site that need Custom Login page functionality, you may see a lot of plugins out there to create wordpress login page but this tutorial might helpful to all web developer who interested to learn in <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress</a>.</div> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> In this tutorial I will explain <strong style="line-height: inherit;">how to make a <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>custom login page without using any plugin</strong>.</div> <h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;"> PHP code</h3> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> This contains <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">php </a>script to validate and accept posted data from our <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form.</div> <div data-settings=" minimize scroll-mouseover" id="crayon-52ae9767d2e28486432881" style="text-align: justify;"> <div data-settings=" show"> PHP</div> <div> </div> <div> <table style="border-collapse: collapse; border-spacing: 0px;"><tbody> <tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52ae9767d2e28486432881-1"> 1</div> <div data-line="crayon-52ae9767d2e28486432881-2"> 2</div> <div data-line="crayon-52ae9767d2e28486432881-3"> 3</div> <div data-line="crayon-52ae9767d2e28486432881-4"> 4</div> <div data-line="crayon-52ae9767d2e28486432881-5"> 5</div> <div data-line="crayon-52ae9767d2e28486432881-6"> 6</div> <div data-line="crayon-52ae9767d2e28486432881-7"> 7</div> <div data-line="crayon-52ae9767d2e28486432881-8"> 8</div> <div data-line="crayon-52ae9767d2e28486432881-9"> 9</div> <div data-line="crayon-52ae9767d2e28486432881-10"> 10</div> <div data-line="crayon-52ae9767d2e28486432881-11"> 11</div> <div data-line="crayon-52ae9767d2e28486432881-12"> 12</div> <div data-line="crayon-52ae9767d2e28486432881-13"> 13</div> <div data-line="crayon-52ae9767d2e28486432881-14"> 14</div> <div data-line="crayon-52ae9767d2e28486432881-15"> 15</div> <div data-line="crayon-52ae9767d2e28486432881-16"> 16</div> <div data-line="crayon-52ae9767d2e28486432881-17"> 17</div> <div data-line="crayon-52ae9767d2e28486432881-18"> 18</div> <div data-line="crayon-52ae9767d2e28486432881-19"> 19</div> <div data-line="crayon-52ae9767d2e28486432881-20"> 20</div> <div data-line="crayon-52ae9767d2e28486432881-21"> 21</div> <div data-line="crayon-52ae9767d2e28486432881-22"> 22</div> <div data-line="crayon-52ae9767d2e28486432881-23"> 23</div> <div data-line="crayon-52ae9767d2e28486432881-24"> 24</div> <div data-line="crayon-52ae9767d2e28486432881-25"> 25</div> <div data-line="crayon-52ae9767d2e28486432881-26"> 26</div> <div data-line="crayon-52ae9767d2e28486432881-27"> 27</div> <div data-line="crayon-52ae9767d2e28486432881-28"> 28</div> <div data-line="crayon-52ae9767d2e28486432881-29"> 29</div> <div data-line="crayon-52ae9767d2e28486432881-30"> 30</div> <div data-line="crayon-52ae9767d2e28486432881-31"> 31</div> <div data-line="crayon-52ae9767d2e28486432881-32"> 32</div> <div data-line="crayon-52ae9767d2e28486432881-33"> 33</div> <div data-line="crayon-52ae9767d2e28486432881-34"> 34</div> <div data-line="crayon-52ae9767d2e28486432881-35"> 35</div> <div data-line="crayon-52ae9767d2e28486432881-36"> 36</div> </td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae9767d2e28486432881-1"> <?php</div> <div id="crayon-52ae9767d2e28486432881-2">     global $wpdb;</div> <div id="crayon-52ae9767d2e28486432881-3"> </div> <div id="crayon-52ae9767d2e28486432881-4">     $err = ”;</div> <div id="crayon-52ae9767d2e28486432881-5">     $success = ”;</div> <div id="crayon-52ae9767d2e28486432881-6"> </div> <div id="crayon-52ae9767d2e28486432881-7">     if(isset($_POST['task']) && $_POST['task'] == ‘login’ )</div> <div id="crayon-52ae9767d2e28486432881-8">     {</div> <div id="crayon-52ae9767d2e28486432881-9">         //We shall SQL escape all inputs to avoid sql injection.</div> <div id="crayon-52ae9767d2e28486432881-10">         $username = $wpdb->escape($_POST['log']);</div> <div id="crayon-52ae9767d2e28486432881-11">         $password = $wpdb->escape($_POST['pwd']);</div> <div id="crayon-52ae9767d2e28486432881-12">         $remember = $wpdb->escape($_POST['remember']);</div> <div id="crayon-52ae9767d2e28486432881-13"> </div> <div id="crayon-52ae9767d2e28486432881-14"> </div> <div id="crayon-52ae9767d2e28486432881-15">         if( $username == “” || $password == “” ) {</div> <div id="crayon-52ae9767d2e28486432881-16">             $err = ‘Please don\’t leave the required field.’;</div> <div id="crayon-52ae9767d2e28486432881-17">         } else {</div> <div id="crayon-52ae9767d2e28486432881-18">             $user_data = array();</div> <div id="crayon-52ae9767d2e28486432881-19">             $user_data['user_login'] = $username;</div> <div id="crayon-52ae9767d2e28486432881-20">             $user_data['user_password'] = $password;</div> <div id="crayon-52ae9767d2e28486432881-21">             $user_data['remember'] = $remember;</div> <div id="crayon-52ae9767d2e28486432881-22">             $user = wp_signon( $user_data, false );</div> <div id="crayon-52ae9767d2e28486432881-23"> </div> <div id="crayon-52ae9767d2e28486432881-24">             if ( is_wp_error($user) ) {</div> <div id="crayon-52ae9767d2e28486432881-25">                 $err = $user->get_error_message();</div> <div id="crayon-52ae9767d2e28486432881-26">                 exit();</div> <div id="crayon-52ae9767d2e28486432881-27">             } else {</div> <div id="crayon-52ae9767d2e28486432881-28">                 wp_set_current_user( $user->ID, $username );</div> <div id="crayon-52ae9767d2e28486432881-29">                 do_action(‘set_current_user’);</div> <div id="crayon-52ae9767d2e28486432881-30"> </div> <div id="crayon-52ae9767d2e28486432881-31">                 echo ‘<script type=”text/javascript”>window.location=’. get_bloginfo(‘url’) .’</script>’;</div> <div id="crayon-52ae9767d2e28486432881-32">                 exit();</div> <div id="crayon-52ae9767d2e28486432881-33">             }</div> <div id="crayon-52ae9767d2e28486432881-34">         }</div> <div id="crayon-52ae9767d2e28486432881-35">     }</div> <div id="crayon-52ae9767d2e28486432881-36"> ?></div> </td></tr> </tbody></table> </div> </div> <h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;"> Confused?</h3> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> Okay, let me explain further the lists of <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>function we’re using.</div> <ul style="list-style: square outside; margin: 20px 0px 20px 40px; padding: 0px; text-align: justify;"> <li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">is_wp_error:</code> this will check whether variable is a <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>Error.</li> <li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">wp_set_current_user:</code> We use this <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>built in function because many user report when using <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">wp_signon()</code> function logs a user in but for some reason the global user variables such as <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">$current_user</code> and <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">$user_ID</code> are not populated until the page is refreshed and calling <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">get_currentuserinfo()</code> doesn’t populate as well. The<code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">is_user_logged_in()</code> function also returns false.</li> </ul> <h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;"> HTML code</h3> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> This contains <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>code for our login page.</div> <div data-settings=" minimize scroll-mouseover" id="crayon-52ae9767d2e34981066578" style="text-align: justify;"> <div data-settings=" show"> XHTML</div> <div> </div> <div> <table style="border-collapse: collapse; border-spacing: 0px;"><tbody> <tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52ae9767d2e34981066578-1"> 1</div> <div data-line="crayon-52ae9767d2e34981066578-2"> 2</div> <div data-line="crayon-52ae9767d2e34981066578-3"> 3</div> <div data-line="crayon-52ae9767d2e34981066578-4"> 4</div> <div data-line="crayon-52ae9767d2e34981066578-5"> 5</div> <div data-line="crayon-52ae9767d2e34981066578-6"> 6</div> <div data-line="crayon-52ae9767d2e34981066578-7"> 7</div> <div data-line="crayon-52ae9767d2e34981066578-8"> 8</div> <div data-line="crayon-52ae9767d2e34981066578-9"> 9</div> <div data-line="crayon-52ae9767d2e34981066578-10"> 10</div> <div data-line="crayon-52ae9767d2e34981066578-11"> 11</div> <div data-line="crayon-52ae9767d2e34981066578-12"> 12</div> <div data-line="crayon-52ae9767d2e34981066578-13"> 13</div> <div data-line="crayon-52ae9767d2e34981066578-14"> 14</div> <div data-line="crayon-52ae9767d2e34981066578-15"> 15</div> <div data-line="crayon-52ae9767d2e34981066578-16"> 16</div> <div data-line="crayon-52ae9767d2e34981066578-17"> 17</div> <div data-line="crayon-52ae9767d2e34981066578-18"> 18</div> <div data-line="crayon-52ae9767d2e34981066578-19"> 19</div> <div data-line="crayon-52ae9767d2e34981066578-20"> 20</div> </td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae9767d2e34981066578-1">     <form method=”post”></div> <div id="crayon-52ae9767d2e34981066578-2">         <h2>Already have an account? Please login.</span></h2></div> <div id="crayon-52ae9767d2e34981066578-3">         <p></div> <div id="crayon-52ae9767d2e34981066578-4">             <?php</div> <div id="crayon-52ae9767d2e34981066578-5">             if( !empty($sucess) )</div> <div id="crayon-52ae9767d2e34981066578-6">                 echo $sucess;</div> <div id="crayon-52ae9767d2e34981066578-7"> </div> <div id="crayon-52ae9767d2e34981066578-8">             if( !empty($err) )</div> <div id="crayon-52ae9767d2e34981066578-9">                 echo $err;</div> <div id="crayon-52ae9767d2e34981066578-10">             ?></div> <div id="crayon-52ae9767d2e34981066578-11">         </p></div> <div id="crayon-52ae9767d2e34981066578-12">         <p><label for=”log”>Email</label></div> <div id="crayon-52ae9767d2e34981066578-13">             <input type=”text” name=”log” id=”log” value=”" /></p></div> <div id="crayon-52ae9767d2e34981066578-14">         <p><label for=”pwd”>Password</label></div> <div id="crayon-52ae9767d2e34981066578-15">             <input type=”password” name=”pwd” id=”pwd” value=”" /></p></div> <div id="crayon-52ae9767d2e34981066578-16">         <p><input type=”submit” value=”Login” class=”button” /></p></div> <div id="crayon-52ae9767d2e34981066578-17"> </div> <div id="crayon-52ae9767d2e34981066578-18">         <label><input type=”checkbox” name=”remember” value=”true” /> Remember Me</label></div> <div id="crayon-52ae9767d2e34981066578-19">         <input type=”hidden” name=”task” value=”login” /></div> <div id="crayon-52ae9767d2e34981066578-20">     </form></div> </td></tr> </tbody></table> </div> </div> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> I’ve added one hidden field to validated if the form submitted is the Login page.</div> <h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;"> Full Code</h3> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> Below is the complete custom login page source code, try it yourself and you can share your opinion below.</div> <div data-settings=" minimize scroll-mouseover" id="crayon-52ae9767d2e3a804751671" style="text-align: justify;"> <div data-settings=" show"> XHTML</div> <div> </div> <div> <table style="border-collapse: collapse; border-spacing: 0px;"><tbody> <tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52ae9767d2e3a804751671-1"> 1</div> <div data-line="crayon-52ae9767d2e3a804751671-2"> 2</div> <div data-line="crayon-52ae9767d2e3a804751671-3"> 3</div> <div data-line="crayon-52ae9767d2e3a804751671-4"> 4</div> <div data-line="crayon-52ae9767d2e3a804751671-5"> 5</div> <div data-line="crayon-52ae9767d2e3a804751671-6"> 6</div> <div data-line="crayon-52ae9767d2e3a804751671-7"> 7</div> <div data-line="crayon-52ae9767d2e3a804751671-8"> 8</div> <div data-line="crayon-52ae9767d2e3a804751671-9"> 9</div> <div data-line="crayon-52ae9767d2e3a804751671-10"> 10</div> <div data-line="crayon-52ae9767d2e3a804751671-11"> 11</div> <div data-line="crayon-52ae9767d2e3a804751671-12"> 12</div> <div data-line="crayon-52ae9767d2e3a804751671-13"> 13</div> <div data-line="crayon-52ae9767d2e3a804751671-14"> 14</div> <div data-line="crayon-52ae9767d2e3a804751671-15"> 15</div> <div data-line="crayon-52ae9767d2e3a804751671-16"> 16</div> <div data-line="crayon-52ae9767d2e3a804751671-17"> 17</div> <div data-line="crayon-52ae9767d2e3a804751671-18"> 18</div> <div data-line="crayon-52ae9767d2e3a804751671-19"> 19</div> <div data-line="crayon-52ae9767d2e3a804751671-20"> 20</div> <div data-line="crayon-52ae9767d2e3a804751671-21"> 21</div> <div data-line="crayon-52ae9767d2e3a804751671-22"> 22</div> <div data-line="crayon-52ae9767d2e3a804751671-23"> 23</div> <div data-line="crayon-52ae9767d2e3a804751671-24"> 24</div> <div data-line="crayon-52ae9767d2e3a804751671-25"> 25</div> <div data-line="crayon-52ae9767d2e3a804751671-26"> 26</div> <div data-line="crayon-52ae9767d2e3a804751671-27"> 27</div> <div data-line="crayon-52ae9767d2e3a804751671-28"> 28</div> <div data-line="crayon-52ae9767d2e3a804751671-29"> 29</div> <div data-line="crayon-52ae9767d2e3a804751671-30"> 30</div> <div data-line="crayon-52ae9767d2e3a804751671-31"> 31</div> <div data-line="crayon-52ae9767d2e3a804751671-32"> 32</div> <div data-line="crayon-52ae9767d2e3a804751671-33"> 33</div> <div data-line="crayon-52ae9767d2e3a804751671-34"> 34</div> <div data-line="crayon-52ae9767d2e3a804751671-35"> 35</div> <div data-line="crayon-52ae9767d2e3a804751671-36"> 36</div> <div data-line="crayon-52ae9767d2e3a804751671-37"> 37</div> <div data-line="crayon-52ae9767d2e3a804751671-38"> 38</div> <div data-line="crayon-52ae9767d2e3a804751671-39"> 39</div> <div data-line="crayon-52ae9767d2e3a804751671-40"> 40</div> <div data-line="crayon-52ae9767d2e3a804751671-41"> 41</div> <div data-line="crayon-52ae9767d2e3a804751671-42"> 42</div> <div data-line="crayon-52ae9767d2e3a804751671-43"> 43</div> <div data-line="crayon-52ae9767d2e3a804751671-44"> 44</div> <div data-line="crayon-52ae9767d2e3a804751671-45"> 45</div> <div data-line="crayon-52ae9767d2e3a804751671-46"> 46</div> <div data-line="crayon-52ae9767d2e3a804751671-47"> 47</div> <div data-line="crayon-52ae9767d2e3a804751671-48"> 48</div> <div data-line="crayon-52ae9767d2e3a804751671-49"> 49</div> <div data-line="crayon-52ae9767d2e3a804751671-50"> 50</div> <div data-line="crayon-52ae9767d2e3a804751671-51"> 51</div> <div data-line="crayon-52ae9767d2e3a804751671-52"> 52</div> <div data-line="crayon-52ae9767d2e3a804751671-53"> 53</div> <div data-line="crayon-52ae9767d2e3a804751671-54"> 54</div> <div data-line="crayon-52ae9767d2e3a804751671-55"> 55</div> <div data-line="crayon-52ae9767d2e3a804751671-56"> 56</div> <div data-line="crayon-52ae9767d2e3a804751671-57"> 57</div> <div data-line="crayon-52ae9767d2e3a804751671-58"> 58</div> <div data-line="crayon-52ae9767d2e3a804751671-59"> 59</div> <div data-line="crayon-52ae9767d2e3a804751671-60"> 60</div> <div data-line="crayon-52ae9767d2e3a804751671-61"> 61</div> <div data-line="crayon-52ae9767d2e3a804751671-62"> 62</div> <div data-line="crayon-52ae9767d2e3a804751671-63"> 63</div> <div data-line="crayon-52ae9767d2e3a804751671-64"> 64</div> <div data-line="crayon-52ae9767d2e3a804751671-65"> 65</div> <div data-line="crayon-52ae9767d2e3a804751671-66"> 66</div> <div data-line="crayon-52ae9767d2e3a804751671-67"> 67</div> <div data-line="crayon-52ae9767d2e3a804751671-68"> 68</div> <div data-line="crayon-52ae9767d2e3a804751671-69"> 69</div> <div data-line="crayon-52ae9767d2e3a804751671-70"> 70</div> <div data-line="crayon-52ae9767d2e3a804751671-71"> 71</div> </td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae9767d2e3a804751671-1"> <?php</div> <div id="crayon-52ae9767d2e3a804751671-2"> /*</div> <div id="crayon-52ae9767d2e3a804751671-3"> Template Name: Login Page</div> <div id="crayon-52ae9767d2e3a804751671-4"> */</div> <div id="crayon-52ae9767d2e3a804751671-5"> </div> <div id="crayon-52ae9767d2e3a804751671-6"> the_post();</div> <div id="crayon-52ae9767d2e3a804751671-7"> get_header();</div> <div id="crayon-52ae9767d2e3a804751671-8"> ?></div> <div id="crayon-52ae9767d2e3a804751671-9"> </div> <div id="crayon-52ae9767d2e3a804751671-10"> <div class=”wrapper”></div> <div id="crayon-52ae9767d2e3a804751671-11"> </div> <div id="crayon-52ae9767d2e3a804751671-12">     <?php</div> <div id="crayon-52ae9767d2e3a804751671-13">         global $wpdb;</div> <div id="crayon-52ae9767d2e3a804751671-14"> </div> <div id="crayon-52ae9767d2e3a804751671-15">         $err = ”;</div> <div id="crayon-52ae9767d2e3a804751671-16">         $success = ”;</div> <div id="crayon-52ae9767d2e3a804751671-17"> </div> <div id="crayon-52ae9767d2e3a804751671-18">         if(isset($_POST['task']) && $_POST['task'] == ‘login’ )</div> <div id="crayon-52ae9767d2e3a804751671-19">         {</div> <div id="crayon-52ae9767d2e3a804751671-20">             //We shall SQL escape all inputs to avoid sql injection.</div> <div id="crayon-52ae9767d2e3a804751671-21">             $username = $wpdb->escape($_POST['log']);</div> <div id="crayon-52ae9767d2e3a804751671-22">             $password = $wpdb->escape($_POST['pwd']);</div> <div id="crayon-52ae9767d2e3a804751671-23">             $remember = $wpdb->escape($_POST['remember']);</div> <div id="crayon-52ae9767d2e3a804751671-24"> </div> <div id="crayon-52ae9767d2e3a804751671-25"> </div> <div id="crayon-52ae9767d2e3a804751671-26">             if( $username == “” || $password == “” ) {</div> <div id="crayon-52ae9767d2e3a804751671-27">                 $err = ‘Please don\’t leave the required field.’;</div> <div id="crayon-52ae9767d2e3a804751671-28">             } else {</div> <div id="crayon-52ae9767d2e3a804751671-29">                 $user_data = array();</div> <div id="crayon-52ae9767d2e3a804751671-30">                 $user_data['user_login'] = $username;</div> <div id="crayon-52ae9767d2e3a804751671-31">                 $user_data['user_password'] = $password;</div> <div id="crayon-52ae9767d2e3a804751671-32">                 $user_data['remember'] = $remember;</div> <div id="crayon-52ae9767d2e3a804751671-33">                 $user = wp_signon( $user_data, false );</div> <div id="crayon-52ae9767d2e3a804751671-34"> </div> <div id="crayon-52ae9767d2e3a804751671-35">                 if ( is_wp_error($user) ) {</div> <div id="crayon-52ae9767d2e3a804751671-36">                     $err = $user->get_error_message();</div> <div id="crayon-52ae9767d2e3a804751671-37">                     exit();</div> <div id="crayon-52ae9767d2e3a804751671-38">                 } else {</div> <div id="crayon-52ae9767d2e3a804751671-39">                     wp_set_current_user( $user->ID, $username );</div> <div id="crayon-52ae9767d2e3a804751671-40">                     do_action(‘set_current_user’);</div> <div id="crayon-52ae9767d2e3a804751671-41"> </div> <div id="crayon-52ae9767d2e3a804751671-42">                     echo ‘<script type=”text/javascript”>window.location=’. get_bloginfo(‘url’) .’</script>’;</div> <div id="crayon-52ae9767d2e3a804751671-43">                     exit();</div> <div id="crayon-52ae9767d2e3a804751671-44">                 }</div> <div id="crayon-52ae9767d2e3a804751671-45">             }</div> <div id="crayon-52ae9767d2e3a804751671-46">         }</div> <div id="crayon-52ae9767d2e3a804751671-47">     ?></div> <div id="crayon-52ae9767d2e3a804751671-48"> </div> <div id="crayon-52ae9767d2e3a804751671-49">     <form method=”post”></div> <div id="crayon-52ae9767d2e3a804751671-50">         <h2>Already have an account? Please login.</span></h2></div> <div id="crayon-52ae9767d2e3a804751671-51">         <p></div> <div id="crayon-52ae9767d2e3a804751671-52">             <?php</div> <div id="crayon-52ae9767d2e3a804751671-53">             if( !empty($sucess) )</div> <div id="crayon-52ae9767d2e3a804751671-54">                 echo $sucess;</div> <div id="crayon-52ae9767d2e3a804751671-55"> </div> <div id="crayon-52ae9767d2e3a804751671-56">             if( !empty($err) )</div> <div id="crayon-52ae9767d2e3a804751671-57">                 echo $err;</div> <div id="crayon-52ae9767d2e3a804751671-58">             ?></div> <div id="crayon-52ae9767d2e3a804751671-59">         </p></div> <div id="crayon-52ae9767d2e3a804751671-60">         <p><label for=”log”>Email</label></div> <div id="crayon-52ae9767d2e3a804751671-61">             <input type=”text” name=”log” id=”log” value=”" /></p></div> <div id="crayon-52ae9767d2e3a804751671-62">         <p><label for=”pwd”>Password</label></div> <div id="crayon-52ae9767d2e3a804751671-63">             <input type=”password” name=”pwd” id=”pwd” value=”" /></p></div> <div id="crayon-52ae9767d2e3a804751671-64">         <p><input type=”submit” value=”Login” class=”button” /></p></div> <div id="crayon-52ae9767d2e3a804751671-65"> </div> <div id="crayon-52ae9767d2e3a804751671-66">         <label><input type=”checkbox” name=”remember” value=”true” /> Remember Me</label></div> <div id="crayon-52ae9767d2e3a804751671-67">         <input type=”hidden” name=”task” value=”login” /></div> <div id="crayon-52ae9767d2e3a804751671-68">     </form></div> <div id="crayon-52ae9767d2e3a804751671-69"> </div> <div id="crayon-52ae9767d2e3a804751671-70"> </div></div> <div id="crayon-52ae9767d2e3a804751671-71"> <?php get_footer() ?></div> </td></tr> </tbody></table> </div> </div> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> For the detailed tutorial how to create basic custom page template visit WP Codex.</div> <div style="line-height: inherit; margin-bottom: 18px; text-align: justify;"> That’s it happy coding, if you have question, clarification just use the comment below or contact me directly.</div> </div> </div>

WORDPRESS CUSTOM LOGIN PAGE WITHOUT USING A PLUGIN – THE RIGHT WAY

WordPress  is one of the most widely use Blog Engine today and many web developers are using  WordPress  as CMS to build Blog, Personal a...

Read more »