WordPress: step by step how to create their own login

In this tutorial we will see how to create a personal login procedure, also using Ajax functionality via jQuery . ). There are several ways to customize the login of WordPress, for example by the use of hooks and filters ( add_action() , add_filter() ). Here we will use a lower-level procedure, although there still interfaces to the kernel of WordPress. In addition we will attempt to validate a user through the dupla email / password.

Why create their own login?

  • In some contexts can return uitle have maximum control on the login page, to propose a custom layout to our registered users. You can also enhance the page with useful information, a logo from the classic "Lost Password?"
  • To allow access via the email (as in the example discussed here) instead of user_login standard WordPress
  • To be able to enter a login panel in the sidebar of our blog
  • And finally, to have a skeleton - and an idea - a great Plugin : D

Environment

In our example / tutorial we will work on the root of a folder inside of WordPress mylogin . . We create two php files within this folder: index.php and logon.php . The first will contain our login interface with all functions JavaScript / jQuery we need. The second file, logon.php , will contain the code for user validation. e una cartella images . Then create a folder css and within this file layout.css and folder images . Inside the images folder insert a classic Ajax loader: create it online AjaxLoad.info . At the end you should have:

  • mylogin
    • index.php
    • logon.php
    • Feed
      • Layout.css
      • images
        • ajax-loader.gif

index.php

, email e password: This file shows the form of access through a form with two fields input , email and password:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml" > <Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
equiv = "Content-Type" content = "text/html; charset=utf-8" /> <Meta http - equiv = "Content-Type" content = "text / html; charset = utf-8" />
myLogin Demo </ title > <Title> mylogin Demo </ title>
"text/javascript" src = "http://www.google.com/jsapi" > </script> <Script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script>
"text/javascript" > google . load ( "jquery" , "1.2.6" ) ; </script> <Script type = "text / javascript"> google. Load ("jquery", "1.2.6") </ script>
"text/javascript" > <Script type = "text / javascript">
<! -
google. setOnLoadCallback (
function () {
/ / Puts the focus on first input when the page is
/ / Loaded
"mylogin" ] . email . focus ( ) ; document. forms ["mylogin"]. email. focus ();
}
);

/ **
* Display error information / warning on our
* Login form
* /
str ) { showError function (str) {
) . html ( '<h2>' + str + '</h2>' ) . slideDown ( ) ; $ ('Div # error'). Html ('<h2>' + str + '</ h2>'). SlideDown ();
}

/ **
* Validation of the data provided in the login form. If all
* Is correct, the data will be sent to the page logon.php
* Through Ajax
*
* @ Author Giovambattista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
* /
checkLogin function () {
document . forms [ "mylogin" ] ; var f = document. forms ["mylogin"];
^ ( [ \w - ] + ( ? : \ . [ \w - ] + ) * ) @ ( ( ? : [ \w - ] + \ . ) * \w [ \w - ] { 0 , 66 } ) \ . ( [ a - z ] { 2 , 6 } ( ? : \ . [ a - z ] { 2 } ) ? ) $ / i ; __filter var = / ^ ([\ w -] + (?: \. [\ w -] +) *) @ ((?: [\ w -] + \.) * \ w [\ w -] {0 , 66}) \. ([a - z] {2, 6} (?: \. [a - z] {2})?) $ / i;
/ /
) . slideUp ( $ ('Div # error'). SlideUp (
function () {
/ /
f . email . value == '' ) { if (f. email. value =='') {
) ; showError ('You did not enter \' email ');
focus ( ) ; f. email. focus ();
; return false;
}
! __filter . test ( f . email . value ) ) { if (! __filter. test (f. email. value)) {
) ; showError ('The email field is invalid');
select ( ) ; f. email. select ();
focus ( ) ; f. email. focus ();
; return false;
}
f . password . value == '' ) { if (f. password. value =='') {
) ; showError ('You have entered the password');
focus ( ) ; f. password. focus ();
; return false;
}
) . show ( 'slow' ) ; $ ('Div # ajax-loader'). Show ('slow');
) . css ( 'cursor' , 'wait' ) ; $ ('Body'). Css ('cursor', 'wait');
/ / Sending data via Ajax POST logon.php
'logon.php' , { email : f . email . value , password : f . password . value } , $. Post ('logon.php', {e: f. Email. Value, password: f. Password.} Value,
data ) { function (data) {
) . hide ( 'slow' ) ; $ ('Div # ajax-loader'). Hide ('slow');
) . css ( 'cursor' , 'default' ) ; $ ('Body'). Css ('cursor', 'default');
data ) { switch (data) {
: case '0 ':
/ / Access allowed
href = 'http://mioblog.com/' ; document. location. href = 'http://mioblog.com/';
break;
: case '-1':
) ; showError ('Access Denied. Email or password incorrect');
break;
: case '-2':
) ; showError ('Wrong data: Hack attempt!');
break;
}
}
);
/ / Submit cut-off
; return false;
}
);
; return false;
}

/ / ->
</ Script>
rel = "stylesheet" href = "css/layout.css" type = "text/css" media = "screen, projection" /> < link rel = "stylesheet" href = "css / Layout.css" type = "text / css" media = "screen, projection" />
</ Head>

<Body>
"login" > <Div id = "login">
"logo" >< h1 title = "myLogin" >< span > myLogin </ span ></ h1 ></ div > <Div id = "logo"> <h1 title = "mylogin"> <span> mylogin </ span> </ h1> </ div>
"error" style = "display:none" >< h2 >...</ h2 ></ div > <Div id = "error" style = "display: none"> <h2 >...</ h2> </ div>
"mylogin" name = "mylogin" method = "post" action = "logon.php" onsubmit = "return( checkLogin() )" > <Form id = "mylogin" name = "mylogin" method = "post" action = "logon.php" onsubmit = "return (checkLogin ())">
"100%" border = "0" cellspacing = "8" cellpadding = "4" > <Table width = "100%" border = "0" cellspacing = "8" cellpadding = "4">
<Tr>
"right" >< label for = "email" > email :</ label ></ td > <Td align = "right"> <label for = "email"> Email: </ label> </ td>
input type = "text" name = "email" id = "email" /></ td > <Td> <input type = "text" name = "email" id = "email" /> </ td>
</ Tr>
<Tr>
"right" >< label for = "password" > password :</ label ></ td > <Td align = "right"> <label for = "password"> Password: </ label> </ td>
input type = "password" name = "password" id = "password" /></ td > <Td> <input type = "password" name = "password" id = "password" /> </ td>
</ Tr>
<Tr>
"2" align = "center" >< input type = "submit" name = "send" id = "send" value = "Invia" /></ td > <Td colspan = "2" align = "center"> <input type = "submit" name = "send" id = "send" value = "Submit" /> </ td>
</ Tr>
</ Table>
"ajax-loader" style = "display:none" >< img src = "css/images/ajax-loader.gif" /></ div > <Div id = "ajax-loader" style = "display: none"> <img src = "css / images / ajax-loader.gif" /> </ div>
</ Form>
</ Div>
</ Body>
</ Html>

Note: the file index.php , as you can see by taking a look at the code, you may also be a normal html file. However, in the event that one day we want to insert some php code snippet, we have prepared the file extension.

The part you need JavaScript allows you to:

  • Run a series of checks on email and password fields (see also Validate email in Javascript and PHP )
  • Block sending (on submit) automatic and uses Ajax via jQuery to send the data to POST to the page logon.php

Layout.css

The layout you can fix it as you see fit. I propose a version easy to customize as you wish:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
, Helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif;
12px font-size: 12px
}
div table {# log
32px 0 0 0 ; margin: 32px 0 0 0;
}
div # error {
8px auto margin: 8px Car
}
# h2 {font error
block ; the display: block;
#fc3 ; background: # fc3;
1px solid #f60 ; border: 1px solid # F60;
12px ; padding: 12px;
16px ; font-size: 16px;
#a50 ; color: # a50;
}
div # ajax-loader {
/ * To change depending on the type of
Ajax Loader that you downloaded
* /
220px ; width: 220px;
0 auto ; margin: 0 auto;
}

logon.php

vista in precedenza. The page logon.php is called directly from the page using Ajax index.php seen before. In the version presented here there are no checks on the "validity" of the data passed with the POST, a simple check is carried out of "presence" through the function isset() . However, since the JavaScript is more susceptible to various modifications, you can also add an additional server-side control / php. See in this regard Classes un'indirizzo Javascript and PHP to validate e-mail

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/ **
* Runs a user's login and password via email Wordpress
*
* @ Author Giovambattista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
* /

isset ( $_POST [ "email" ] ) && isset ( $_POST [ "password" ] ) ) { if ( isset ($ _POST ['email']) & & isset ($ _POST ['password'])) {
/ / Invoke bootstrap WordPress
( '../wp-config.php' ) ; @ Require_once ('.. / wp-config.php');
( '../wp-includes/pluggable.php' ) ; @ Require_once ('.. / wp-includes / pluggable.php');
( '../wp-includes/registration.php' ) ; @ Require_once ('.. / wp-includes / registration.php');

0 ; $ Error = 0;

/ / I connect to the database
mysql_connect ( DB_HOST , DB_USER , DB_PASSWORD ) ; $ Db = @ mysql_connect (DB_HOST, DB_USER, DB_PASSWORD);

/ / Select id DB
$db != 0 ) mysql_select_db ( DB_NAME ) ; if ($ db! = 0) mysql_select_db (DB_NAME);

/ / Get ID and your email address you USER_LOGIN
"SELECT `ID`, `user_login` FROM `wp_users` $ Q = "SELECT` id `,` USER_LOGIN `FROM` `wp_users
$_POST [ 'email' ] . "'" ; WHERE `user_email` = '". $ _POST [' Email ']."' ";

mysql_query ( $q ) ; $row = mysql_fetch_array ( $wp_r ) ; $wp_n = mysql_num_rows ( $wp_r ) ; $ Wp_r = mysql_query ($ q); $ row = mysql_fetch_array ($ wp_r) $ wp_n = mysql_num_rows ($ wp_r);
$wp_r ) ; mysql_free_result ($ wp_r);

/ / Found
$wp_n > 0 ) { if ($ wp_n> 0) {
wp_authenticate ( $_POST [ 'email' ] , $_POST [ 'password' ] ) ; Wp_authenticate $ result = ($ _POST ['email'], $ _POST ['password']);
! is_wp_error ( $result ) ) { if (! is_wp_error ($ result)) {
[ "ID" ] , true ) ; wp_set_auth_cookie ($ row ["id"], true);
, $row [ "user_login" ] ) ; do_action ('wp_login', $ row ["USER_LOGIN"]);
; echo "0";
"-1" ; } Else echo "-1";
{ Else {}
; echo "-1";
}
{ Else {}
; echo "-2";
}

This code makes a login similar to that done with the WordPress system. It is interesting to note that the first thing to do is to include the kernel of WordPress so you can use some of its functions. In this way we will be in effect a "piece" of WordPress. Being a file processed via Ajax, this resrituisce three values: 0, -1 and -2, respectively:

  • ok, login allowed
  • username or password is incorrect
  • Hacking attempt?

24 comments to "WordPress: step by step how to create their own login"

  1. October 24, 2008 Sniper Wolf :

    Excellent guide! Congratulations for the clarity and immediacy with which you express yourself ;)

    Reply Quote
  2. October 24, 2008 EmaWebDesign :

    Apart from the improvements or the usefulness, let's face it, customize it's always fun and enjoyable ;)

    Reply Quote
  3. October 25, 2008 Alexander :

    Hi!
    I'm in the middle of creating my first blog using WordPress.
    I have quite a bit of knowledge of linquaggi web programming, scripting, and SQL.
    However, not having experience with CMS, I found myself in front of the trouble of plugging in a login box to access the private members only.
    Reading the article I understood the functionality of files and I have done everything to the letter, creating files and folders in the root of my web space in the FTP file, including the "ajax-loader.gif" (I state that my provider is Netsons) .
    At this point, how to display the sidebar LOGIN? What else should I do?

    Thanks in advance for the answers!

    Reply Quote
  4. October 26, 2008 Giovambattista Fazioli :

    @ Sniper Wolf: Thank you! : D It's always nice that someone appreciates the effort ...

    Reply Quote
  5. October 26, 2008 Giovambattista Fazioli :

    @ EmaWebDesign: exactly the same thing ... I wanted to write in the reasons but I see that you are perceived equally, without explicitly saying so : D

    Reply Quote
  6. October 26, 2008 Giovambattista Fazioli :

    @ Alexander: login to view the inside of the front end of your blog, you suffciente you play through, with the necessary modifications to the layout, the contents of the file "index.php" by inserting, for example, in the "sidebar". The important thing is to respect the logic of the operation but the field FORM with INPUT (email and password) you can basically put it anywhere you want.
    If you want to insert it into the "sidebar" in WordPress, for esemopio, just edit the file "sidebar.php" link in your theme folder.

    Reply Quote
  7. October 27, 2008 Wordpress: write a personal logout | Undolog.com :

    [...] [...] Previous Undolog.com

  8. November 10, 2008 david:

    Hello! excuse the ignorance on the subject .. but I would need to enter a registration form in my site .. done in flash. Not knowing php programming you would know me some advice? And 'complex thing? Thank you!

    Reply Quote
  9. November 10, 2008 Giovambattista Fazioli :

    @ David: If you talk about "registration form" I immediately think that you have to interact in some way with the server, such as registering users on a MySQL database. If so, you are unfortunately forced to use a "language" on the server side, such as PHP, ASP, etc. ... The front-end, however, that the form of registration, you can achieve in both Flash and plain HTML. This, ultimately, does nothing more than "send" data to the server that performs the actual recording, using PHP, ASP, etc. ...
    The thing itself is not "complex", but if you do not know a "minimum" program could be least difficult.

    Reply Quote
  10. December 18, 2008 luciano:

    hello ... congratulations for the site and the example ...
    I did not understand one thing ... the form called post logon.php the file that makes the query and returns a result ... but where is the "caller" index.php logon.php takes the values ​​that sends him?
    thank you!

    Reply Quote
  11. December 18, 2008 Giovambattista Fazioli :

    @ Luciano:

    but where is the "caller" index.php logon.php takes the values ​​that sends him?

    Are taken from FORM same as the user fills in the data, that is, when you enter your username and password.

    Reply Quote
  12. January 31, 2009 Santino Bivacqua :

    Interesting, I would usatoi though a little 'more' jQuery ...
    eg you could use instead of:

    1
    2
    3
    document. forms [ "mylogin" ] ; var f = document. forms ["mylogin"];
    / / And then
    f. password . value ; f. var password = password. value;

    a more 'simple:

    1
    $ ( '#idInputPassword' ) . val ( ) ; var password = $ ('# idInputPassword'). val ();

    incidentally by jQuery:
    "LASS DO WRITE MORE ...." ;) well it means something : D

    Reply Quote
  13. January 31, 2009 Giovambattista Fazioli :

    @ Santino Bivacqua:

    But I would have used a little 'more' jQuery

    I thought that you, too. However, access to fields of a form is quite simple (and fast) without using jQuery. It's not that there is to be optimized in this case, however access to:

    1
    document. forms [ 'mylogin' ] ; var f = document. forms ['mylogin'];

    is of type array / index, and then more rapidly:

    1
    ) . val ( ) $ ('Input # idInputPassword'). Val ()

    jQuery, in fact, have to "scroll" around the DOM to intercept the first ' input correctly. Surely this is not a critical case, since the DOM (top) small, and then you can use either jQuery or easy access to the basic functionality of Javascript.
    But you're right, it is useful to write less : D Also, if you want to apply some jQuery effect you're forced to use your display :)

    Reply Quote
  14. January 31, 2009 Santino Bivacqua :

    sorry but I do not know how it works internally jQuery, but I think that if you use the id, starting with # jQuery understand and use document.getElementById('id') so that jQuery is not flowing all the nodes until it finds what he need is the browser's javascript engine is responsible for providing the data ... ..
    …. perhaps it is only if you indicate the name of a class type $('.class') because there is no equivalent getElementByClassName .... unfortunately

    In any case, one or the other, is just to have a unique way to program, since I know most do not use jQuery 'methods of the DOM, much more' wordy ... I'll give you an example, try writing with methods of the DOM code to remove a row of a table, with just jQuery:

    1
    ) . remove ( ) ; // Col DOM è poco piu' complesso.... $ ('# IdRow'). Remove () / / When the DOM is little more 'complex ....
    Reply Quote
  15. January 31, 2009 Giovambattista Fazioli :

    @ Santino Bivacqua: right :) id if you are absolutely right ... it would be interesting to test run at ... almost ... : D

    Reply Quote
  16. March 24, 2009 Trafico Web :

    es muy bueno el wordpress, but not to the form he encontrado bajar de este generates the carga en los que servidores, aun en estamos solución a problem generates a portal que de unas entretenimeto cargas altas tan with only 10mil visitas UNICAS por dia, you alguien sabe Solucion como esto por que ayuda espero the wordpress tienen ni en esto Solucion to

    Reply Quote
  17. May 30, 2009 giggi:

    This only happens to me or anyone who logs in the script regardless of the password entered?

    Reply Quote
  18. July 25, 2009 Redemption :

    Hello, I came across your blog by doing a lookup on the login of WordPress and I must say that this tutorial - I congratulate you because it's done very well - I can be very useful, however, are slightly rusty in programming so I wanted to ask, given that I know for fleets : D If
    I make sure to log on WordPress platform, private and another in the same instant.

    Let me explain: I have this private platform that I can program at will and wanted to do so through the login of this could, at the same time, the platform is to run two private log in to WordPress (having the same on both user and pass) .
    At first I thought the login page to enter the private platform a hidden form that would allow me to have a copy of the data to log in to say "subtle" even WordPress, but then I was struck by your guide and maybe there a smarter way to send data and make sure to login to WordPress through another page ... I do not know if I explained well and I hope you answer me : D . Hello Nicola

    Reply Quote
  19. August 3, 2009 Giovambattista Fazioli :

    @ Redemption: Hello Nicola, I know of course, your private deck, but the process is definitely feasible. In theory, all the code that we Server (for WordPress) is present in this post. What you have to decide just where to perform the "two" concurrent logins.
    If you have full access to your platform, you may enter the code for access to your private deck in the file logon.php proposed in this post, for example.

    Reply Quote
  20. August 3, 2009 Redemption :

    @ Giovambattista Fazioli:
    Thanks for the reply!

    Should I start to experiment, however, have given me hope for a good implementation and I am grateful :) .
    I ask you one last thing, I can somehow create a user query the user table directly from the database of wp or are there other relationships and keys to be created in the db?

    As you know I have to somehow also export the users from the private deck wp :) .

    Reply Quote
  21. October 7, 2009 HackersGold :

    Ola nice guide, but I realized a fundamental thing No where do I put all the files? folder of wordpress? how do I?

    Reply Quote
  22. May 22, 2010 Lorenzo :

    Great post ... thanks a lot!

    Reply Quote
  23. June 16, 2010 Umberto:

    If I wanted to save the data access login of wordpress, which would be the two variables user and pass I have to save?

    Reply Quote
  24. October 8, 2011 Guido:

    Hello, excellent tutorial!
    I only have a small doubt: how do you set so that the WordPress home page is the index.php in the folder mylogin and not the root index.php?
    Today I put a redirect in the root index.php of WordPress:

    There is another more elegant method?

    thanks

    Reply Quote

Leave a comment

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL