Place a single WordPress function in your code to generate the login form.
Jupiterimages/Brand X Pictures/Getty Images
Since WordPress 3.0, adding a custom login form to your WordPress theme is easy. Past tutorials on the subject showed that custom logins required coding an HTML form from scratch and then adding WordPress template tags to make it all work. Now a single function -- wp_login_form() -- is used to generate the form. Customizing the form requires some basic knowledge of WordPress functions, PHP, HTML and CSS.
Add the Login Form Function to Your Theme
Step 1
Open the WordPress template file for the page where you will place your login form. For example, to add the login to your theme's sidebar, open up the sidebar.php file in your theme's folder. Do not write your login form's code between the sidebar's conditional statements, though, since doing so will remove the login form if the theme is using any widgets.
Step 2
Place the following code (without the quotation marks) where you want the login form to appear on the page: "<?php wp_login_form(); ?>". This code works with WordPress 3.0 and above and will generate a full login form on your page that is, in essence, the same as the form on the regular WordPress login page.
Step 3
Type the code "<?php if(!is_user_logged_in()) : ?>" above wp_login_form(). This code checks to see if the user is not logged in by asking if the result of the is_user_logged_in() function is false. If the result is false, then the form will appear on the page. Remember to add "<?php endif; ?>" below wp_login_form() to close your if-statement.
Add Arguments to the Login Form Function
Step 1
Edit the functionality of the login form by giving the wp_login_form() function some arguments. In the WordPress Codex, there is a page dedicated to wp_login_form() which lists the available arguments and their parameters. Arguments and their parameters go between the parentheses at the end of "wp_login_form".
Step 2
Redirect the user to a different page on your WordPress site by using the following argument (with the quotation marks): 'redirect=http://yoursite.com/blog-URL/custom-page/'. This form cannot redirect to a page off your WordPress site.
Step 3
Add a custom parameter for the "form_id" argument to change the form's ID in HTML. A custom ID makes it possible to give your login form its own styling later on. Type the code as follows: 'form_id=your-custom-id' where "your-custom-id" is whatever name you want to give the form's ID.
Style Your Form
Step 1
Visit your WordPress site and then go to the page where the custom login form shows. Right-click on the page and then select "View Page Source" to see the code generated by wp_login_form(). Scroll down to the line that begins with "<form name='loginform'..." and use the code HTML code between the <form> and </form> tags as a reference for your CSS style rules.
Step 2
Open up your theme's CSS file -- in most cases, this is style.css -- in the code editor of your choice. Style the login form by targeting the ID of the <form> tag. This is a block-level tag, so by default its width will stretch to the full width of its containing element (such as a <div> tag).
Step 3
Type a style rule as follows: #form-id {background: grey;} or #form-id input {color: blue;}. In this example, the background for the entire form is gray, and the text inside the form's text fields is blue. Styling of the form is only limited to your CSS skills and imagination.
Tip
- .
Warning
- Remember to always back-up your original code before making changes to a WordPress theme
References
Photo Credits
- Jupiterimages/Brand X Pictures/Getty Images
