![\"wp-login-boring\"](\"/de62cef1a8e9b1e555aa0ccb212c95d6/wp-login-boring.webp\")
In this tutorial I will demonstrate how to build a custom login form scratch. This time instead of using the default function call Wordpress provides us, we will create this login form and the styling from scratch, making it a very customized form. I will be providing the CSS I am using, however you may style this however you wish.
\n
This is what WordPress gives us out of the box.. Boring, right?
\nI am going to show this part once again because it is probably the easiest to implement for beginners. I covered this in Part 1, but we'll go through it again just in case you're skipping ahead
\nTo start our page theme you will need to do the following
\n1. Install WordPress\n2. Navigate to your wp-content/themes folder and choose a theme to edit or install a new one\n3. create a file called page-login-custom.php in the theme directory (Notice we are now making a new Page Theme)\n4. Next open that file with a text editor of your choosing and add the following at the top of the php file
\n-->
\nTo initialize this page template make sure to activate the theme you've selected and then navigate to a page or post. On the right hand side of your page/post editor you should now see a dropdown available for template. Change your template to Login Custom and that will attach that page theme to this page/post.
\nNow for the custom code. Below I have provided an example of some code that I have customized to make my custom login form.
\n<form method="post" action="" class="wp-user-form">\n\n:\n<input type="text" name="log" value="" size="20" id="user_login" tabindex="11" />\n\n:\n\nRemember me\n\n<input type="submit" name="user-submit" value="" tabindex="14" class="user-submit" />\n<input type="hidden" name="redirect_to" value="" />![\"login-2-custom\"](\"/056be2feb51f0d6db967dbd19ed17b74/login-2-custom.webp\")
Let's take a look at that custom form
\nTo handle the Login Form response use the exact same method we used in part 1. Remember to place that function within your functions.php file within your theme unless you're building a plugin.
\nIn this example we have built a custom WordPress login form that you could customize and style to your desire. In the next section I will be demonstrating how to build a lost password form that is fully customized. Our custom lost password form will send an email to the user as well as handle creating a new password for the user.
\n","headings":[{"value":"Building a Custom Login Form","depth":2},{"value":"Handling the Login Form response","depth":2}],"fields":{"slug":"/engineering/part-2-creating-a-custom-login-form/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":null,"title":"Part 2 - Creating a Custom Login Form","canonical":null,"date":"December 08, 2015","updated_date":null,"tags":["Engineering","Login"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/c77161283a52150af28cf97603d842a3/e8bcc/cust-login-2-150x150.webp","srcSet":"/static/c77161283a52150af28cf97603d842a3/e8bcc/cust-login-2-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Zoie Carnegie","github":null,"bio":"Graduated from NAIT Digital Media and IT specializing in application development. PHP is my favorite language. I am a continuous learner always trying new languages, applications, frameworks. Passions are Programming, Photography and Travel.","avatar":null}}}},"pageContext":{"id":"da619579-7270-565c-9e4a-1464a5bae851","fields__slug":"/engineering/part-2-creating-a-custom-login-form/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}