Create a custom login page in WordPress

This tutorial will show you how to set up a custom login page in WordPress. No special knowledge required for it.

To log into WordPress administration, it is convenient to go through one of two following URLs:

 

 

http://Yoursite.com/wp-admin/orhttp://Yoursite.com/wp-login.php 

 

This method is however not very friendly if you allow the registration of new users. In fact, unless you know WordPress, you should enter the URL corresponding to each of the new registrants.

So the easiest thing to create a login form and then insert it into a new page. We will therefore use page templates in WordPress .

 

Creating the page template

 

Using an FTP client, go to / wp-content/themes/Name_of_your_THEME / then duplicate the page.php file.

Rename the copy by an evocative title as template-login.php.

Open it and then convert it as a page template by adding lines of code at the beginning of file:

 

<? Php/ *Template Name: Login Area* /?>

 

Insert the login form

 

Then locate the line containing:

 

Php the_content

 

This line will display the contents entered in the TinyMCE editor from your WordPress administration.

 

Case 1 – Using a PHP command

 

Just above or below – is to your liking, place the following PHP command:

 

<? Php wp_login_form ();?>

 

Save the file to your FTP server and then connect to your WordPress administration. Changes in the module, click Add Item. This command has many parameters that can be added between parentheses as shown in the WordPress code page.

 

Case No. 2 – Use an HTML form

 

This second method has the great advantage of not containing a single line of PHP code. So you can insert directly into a page, section or even a widget for WordPress.

The second advantage of hard-coding – instead of going through the arguments to insert in the PHP (which is not obvious when you start), it is much easier to customize. It is neither more nor less than a form can no longer be standard HTML.

 

<form method="post" action="http://www.YOUR_SITE.com/wp-login.php" id="loginform" name="loginform"><p><label for="user_login"> id </ label><input type="text" tabindex="10" size="20" value="" id="user_login" name="log"></ P><p><label for="user_pass"> Password </ label><input type="password" tabindex="20" size="20" value="" id="user_pass" name="pwd"></ P><p> <label> <input type="checkbox" tabindex="90" value="forever" id="rememberme" name="rememberme">Stay connected </ label>| <a Href="http://www.YOUR_SITE.com/wp-login.php?action=lostpassword"> Forgot password </ a> </ p><p><input type="submit" tabindex="100" value="Se connecter" id="wp-submit" name="wp-submit"><input type="hidden" value="http://www.YOUR_SITE.com/" name="redirect_to"></ P></ Form>

 

Encompass the whole of a tag  with <div> , sprinkle with CSS and get a result according to your needs. Do not forget to replace the URLs in the domain of your site.

Bravo! You now have a connection zone (login) personalized and easily repositioned on your site.

 

 

This Article Has Been Shared 159 Times!

Facebook Twitter Pinterest