jQuery »WordPress» Tutorials »Development» PHP »Javascript» Internet »CSS» Ajax

Wordpress: step by step how to create their own login

Friday, October 24, 2008

In this tutorial we'll see how to create a personal login procedure, also using Ajax functionality using jQuery. There are several ways to customize the login of WordPress, for example through the use of hooks and filters add_action() add_filter() Here we will use a more low level, although there still Interface to the Kernel of WordPress. Furthermore we will make sure to validate a user through the dupla email / password.

Why create their own login?

  • In some contexts it may have the most control of Interest back to the login page, to propose a custom layout to our registered users. You can also enrich the page with useful information, from a logo to the classic "Forgot your password?
  • To allow access via the email (as in the example dealt with here) instead of user_login standard Wordpress
  • To have the opportunity to enter a login panel in the sidebar of our blog
  • And finally, to have a skeleton - and an idea - for a great plugin : D

Environment

In our example / tutorial will work on the root of WordPress in a folder mylogin Create two php files within this folder: index.php and logon.php The first will contain the interface of our log, with all functions Javascript / jQuery we need. The second file, logon.php will contain the code to validate the user. Then create a folder css and inside this file layout.css and a folder images Inside the images folder will put a classic Ajax loader: create it online AjaxLoad.info. The end you should have:

  • MyLogin
    • index.php
    • logon.php
    • css
      • layout.css
      • images
        • ajax-loader.gif

index.php

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

PLAIN TEXT
PHP:
  1. "-//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">
  2. "http://www.w3.org/1999/xhtml" > <Html xmlns = "http://www.w3.org/1999/xhtml">
  3. <Head>
  4. equiv = "Content-Type" content = "text/html; charset=utf-8" /> <Meta http - equiv = "Content-Type" content = "text / html; charset = utf-8" />
  5. myLogin Demo </ title > <Title> myLogin Demo </ title>
  6. "text/javascript" src = "http://www.google.com/jsapi" ></ script > <Script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script>
  7. "text/javascript" > google . load ( "jquery" , "1.2.6" ) ;</ script > <Script type = "text / javascript"> google. Load ( "jquery", "1.2.6") </ script>
  8. "text/javascript" > <Script type = "text / javascript">
  9. <! --
  10. google. setOnLoadCallback (
  11. function () (
  12. / / Puts the focus on the first input when the page is
  13. / / Load
  14. "mylogin" ] . email . focus ( ) ; document. Forms [ "MyLogin"]. email. focus ();
  15. )
  16. )
  18. / **
  19. * Display information error / warning on our
  20. * Login form
  21. * /
  22. str ) { showError function (str) (
  23. ) . html ( '<h2>' + str + '</h2>' ) . slideDown ( ) ; $ ( 'Div # error'). Html ( '<h2>' + str + '</ h2>'). SlideDown ();
  24. )
  26. / **
  27. * Validation of data provided in the login form. If all
  28. * Is correct, the data will be sent to the page logon.php
  29. * Through Ajax
  30. *
  31. * @ Author Giovambattista Fazioli
  32. * @ Email @ g.fazioli undolog.com
  33. * @ Web http://www.undolog.com
  34. * /
  35. checkLogin function () (
  36. document . forms [ "mylogin" ] ; var f = document. Forms [ "MyLogin"];
  37. ^ ( [ \w - ] + ( ? : \ . [ \w - ] + ) * ) @ ( ( ? : [ \w - ] + \ . ) * \w [ \w - ] { 0 , 66 } ) \ . ( [ a - z ] { 2 , 6 } ( ? : \ . [ a - z ] { 2 } ) ? ) $ / i ; var __filter = / ^ ([\ w -] + (?: \. [\ w -] +) *) @ ((?: [\ w -] + \.) * \ w [\ w -] (0 , 66)) \. ([a - z] (2, 6) (?: \. [a - z] (2))?) $ / i;
  38. / /
  39. ) . slideUp ( $ ( 'Div # error'). SlideUp (
  40. function () (
  41. / /
  42. f . email . value == '' ) { if (f. email. value =='') (
  43. ) ; showError ( 'You did not enter l \' email ');
  44. focus ( ) ; f. email. focus ();
  45. ; return false;
  46. )
  47. ! __filter . test ( f . email . value ) ) { if (! __filter. test (f. email. value)) (
  48. ) ; showError ( 'The email field is invalid');
  49. select ( ) ; f. email. select ();
  50. focus ( ) ; f. email. focus ();
  51. ; return false;
  52. )
  53. f . password . value == '' ) { if (f. password. value =='') (
  54. ) ; showError ( 'You did not enter the password');
  55. focus ( ) ; f. password. focus ();
  56. ; return false;
  57. )
  58. ) . show ( 'slow' ) ; $ ( 'Div # ajax-loader'). Show ( 'slow');
  59. ) . css ( 'cursor' , 'wait' ) ; $ ( 'Body'). Css ( 'cursor', 'wait');
  60. / / Sending data through POST logon.php Ajax
  61. 'logon.php' , { email : f . email . value , password : f . password . value } , $. Post ( 'logon.php', (email: f. Email. Value, password: f. Password. Value),
  62. data ) { function (data) (
  63. ) . hide ( 'slow' ) ; $ ( 'Div # ajax-loader'). Hide ( 'slow');
  64. ) . css ( 'cursor' , 'default' ) ; $ ( 'Body'). Css ( 'cursor', 'default');
  65. data ) { switch (data) (
  66. : case '0 ':
  67. / / Access allowed
  68. href = 'http://mioblog.com/' ; document. location. href = 'http://mioblog.com/';
  69. break;
  70. : case '-1':
  71. ) ; showError ( 'Access Denied. Email or Password Incorrect');
  72. break;
  73. : case '-2':
  74. ) ; showError ( 'Wrong data: Attempt to Hack');
  75. break;
  76. )
  77. )
  78. )
  79. / / Cut-off Submit
  80. ; return false;
  81. )
  82. )
  83. ; return false;
  84. )
  86. / / ->
  87. </ script>
  88. "stylesheet" href = "css/layout.css" type = "text/css" media = "screen, projection" /> <Link rel = "stylesheet" href = "css / layout.css" type = "text / css" media = "screen, projection" />
  89. </ Head>
  91. <Body>
  92. "login" > <Div id = "login">
  93. "logo" >< h1 title = "myLogin" >< span > myLogin </ span ></ h1 ></ div > <Div id = "logo"> <h1 title = "myLogin"> <span> myLogin </ span> </ h1> </ div>
  94. "error" style = "display:none" >< h2 >...</ h2 ></ div > <Div id = "error" style = "display: none"> <h2 >...</ h2> </ div>
  95. "mylogin" name = "mylogin" method = "post" action = "logon.php" onsubmit = "return( checkLogin() )" > <Form id = "MyLogin" name = "MyLogin" method = "post" action = "logon.php" onsubmit = "return (checkLogin ())">
  96. "100%" border = "0" cellspacing = "8" cellpadding = "4" > <Table width = "100%" border = "0" cellspacing = "8" cellpadding = "4">
  97. <Tr>
  98. "right" >< label for = "email" > email :</ label ></ td > <Td align = "right"> <label for = "email"> email: </ label> </ td>
  99. input type = "text" name = "email" id = "email" /></ td > <Td> <input type = "text" name = "email" id = "email" /> </ td>
  100. </ Tr>
  101. <Tr>
  102. "right" >< label for = "password" > password :</ label ></ td > <Td align = "right"> <label for = "password"> Password: </ label> </ td>
  103. input type = "password" name = "password" id = "password" /></ td > <Td> <input type = "password" name = "password" id = "password" /> </ td>
  104. </ Tr>
  105. <Tr>
  106. "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>
  107. </ Tr>
  108. </ Table>
  109. "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>
  110. </ Form>
  111. </ Div>
  112. </ Body>
  113. </ Html>

Note: the file index.php as you can see by looking at the code, could also be a normal HTML file. However, in the event that one day we want to insert some piece of PHP code, we already have the file extension.

The party JavaScript can:

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

layout.css

The layout can fix it as best you believe. I propose a simple version to customize as you wish:

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

logon.php

Page logon.php is called directly by the use of Ajax from the page index.php seen before. In the version presented here, there are no controls on the "validity" of past data in POST; is done a simple check of "presence" via the function isset() However, given that the party is subject to various Javascript tampering, you can also add a further check on the server side / php. See in this regard Classes Javascript and PHP to validate un'indirizzo mail

PLAIN TEXT
PHP:
  1. / **
  2. * Runs a user login and password by email Wordpress
  3. *
  4. * @ Author Giovambattista Fazioli
  5. * @ Email @ g.fazioli undolog.com
  6. * @ Web http://www.undolog.com
  7. * /
  9. isset ( $_POST [ "email" ] ) && isset ( $_POST [ "password" ] ) ) { if (isset ($ _POST [ "email"]) & & isset ($ _POST [ "password"])) (
  10. / / Invoke WordPress bootstrap
  11. ( '../wp-config.php' ) ; @ Require_once ( '.. / wp-config.php');
  12. ( '../wp-includes/pluggable.php' ) ; @ Require_once ( '.. / wp-includes / pluggable.php');
  13. ( '../wp-includes/registration.php' ) ; @ Require_once ( '.. / wp-includes / registration.php');
  15. 0 ; $ error = 0;
  17. / / I connect to the database
  18. mysql_connect ( DB_HOST , DB_USER , DB_PASSWORD ) ; $ db = @ mysql_connect (DB_HOST, db_user, DB_PASSWORD);
  20. / / Select id DB
  21. $db != 0 ) mysql_select_db ( DB_NAME ) ; if ($ db! = 0) mysql_select_db (DB_NAME);
  23. / / Get ID and user_login via email
  24. "SELECT `ID`, `user_login` FROM `wp_users` $ q = "SELECT` id `,` user_login `FROM` `wp_users
  25. $_POST [ 'email' ] . "'" ; WHERE `user_email` = ' ". $ _POST [' Email ']."' ";
  27. 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);
  28. $wp_r ) ; mysql_free_result ($ wp_r);
  30. / / Found
  31. $wp_n > 0 ) { if ($ wp_n> 0) (
  32. wp_authenticate ( $_POST [ 'email' ] , $_POST [ 'password' ] ) ; $ result = wp_authenticate ($ _POST [ 'email'], $ _POST [ 'password']);
  33. ! is_wp_error ( $result ) ) { if (! is_wp_error ($ result)) (
  34. [ "ID" ] , true ) ; wp_set_auth_cookie ($ row [ "ID"], true);
  35. , $row [ "user_login" ] ) ; do_action ( 'wp_login', $ row [ "user_login"]);
  36. ; echo "0";
  37. "-1" ; ) Else echo "-1";
  38. { ) Else (
  39. ; echo "-1";
  40. )
  41. { ) Else (
  42. ; echo "-2";
  43. )

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

  • everything ok, login allowed
  • username or password
  • Hacking attempt?

Related Post

Was this article helpful?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags:

21 comments to "Wordpress: step by step how to create their own login"

  1. getAvatar 1.0
    October 24, 2008 Sniper Wolf:

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

    Reply Share
  2. getAvatar 1.0
    October 24, 2008 EmaWebDesign:

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

    Reply Share
  3. getAvatar 1.0
    October 25, 2008 Alessandro:

    Hi!
    Are in the midst of creating my first blog using WordPress.
    I have a lot of knowledge of linquaggi web programming, scripting and SQL.
    However, not having experience with CMS, I found the problem in front of a search box to login to access the restricted 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 webspace FTP files, including the "ajax-loader.gif" (I state that my ISP is Netsons) .
    At this point, how to log in to see the sidebar? What else should I do?

    Thanks in advance for the answers!

    Reply Share
  4. getAvatar 1.0
    October 26, 2008 Giovambattista Fazioli:

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

    Reply Share
  5. getAvatar 1.0
    October 26, 2008 Giovambattista Fazioli:

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

    Reply Share
  6. getAvatar 1.0
    October 26, 2008 Giovambattista Fazioli:

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

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

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

  8. getAvatar 1.0
    November 10, 2008 David

    Hello! excuse the ignorance on .. but I need to input a registration form within my own site .. made in flash. Not knowing php programming could you give me some advice? E 'complex thing? Thank you!

    Reply Share
  9. getAvatar 1.0
    November 10, 2008 Giovambattista Fazioli:

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

    Reply Share
  10. getAvatar 1.0
    December 18, 2008 Luciano:

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

    Reply Share
  11. getAvatar 1.0
    December 18, 2008 Giovambattista Fazioli:

    @ Luciano:

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

    Are taken from the form itself when the user compiles the data, ie when you enter username and password.

    Reply Share
  12. getAvatar 1.0
    January 31, 2009 Santino Bivacqua:

    Interesting, I would usatoi but a little 'more' jQuery ...
    For example, you could use instead of:

    PLAIN TEXT
    JavaScript:
    1. document. forms [ "mylogin" ] ; var f = document. Forms [ "MyLogin"];
    2. / / And then
    3. f. password . value ; f. var password = password. value;

    a more 'simple:

    PLAIN TEXT
    JavaScript:
    1. $ ( '#idInputPassword' ) . val ( ) ; var password = $ ( '# idInputPassword'). val ();

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

    Reply Share
  13. getAvatar 1.0
    January 31, 2009 Giovambattista Fazioli:

    @ Santino Bivacqua:

    But I would have used a little 'more' jQuery

    is what I thought too. However, access to fields in a form is pretty simple (and fast) even without using jQuery. Not that there is to optimize in this case, however access to:

    PLAIN TEXT
    JavaScript:
    1. document. forms [ 'mylogin' ] ; var f = document. Forms [ 'MyLogin'];

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

    PLAIN TEXT
    JavaScript:
    1. ) . val ( ) $ ( 'Input # idInputPassword'). Val ()

    jQuery, in fact, must "flow" all the DOM before intercept 's input correctly. Surely this is not a critical case, since the DOM (page) small, and then you can use either jQuery or easy access to the basic functionality of Javascript.
    However you're right, it is useful to write less : D Also, if you want to apply some effect jQuery is it imperative to use your display :)

    Reply Share
  14. getAvatar 1.0
    January 31, 2009 Santino Bivacqua:

    but sorry 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') then is not that jQuery through all the nodes until you find the one thing he need is the browser's JavaScript engine that is dedicated to providing the data .....
    maybe it only does so if you disclose the name of a class type $('.class') since there is no equivalent getElementByClassName .... unfortunately

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

    PLAIN TEXT
    JavaScript:
    1. ) . remove ( ) ; // Col DOM è poco piu' complesso.... $ ( '# IdRow'). Remove (); / / When the DOM is little more 'complex ....

    Reply Share
  15. getAvatar 1.0
    January 31, 2009 Giovambattista Fazioli:

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

    Reply Share
  16. getAvatar 1.0
    March 24, 2009 Trafico Web:

    wordpress el es muy bueno, pero no he encontrado the forma de bajar la carga que este en los servidores generates, aun estamos a problem solucionar en un portal de que entretenimeto generates with tan solo unas altas cargas UNICAS 10mil visitas por dia, alguien sabe you como solucionar esto espero la ayuda por que ni en wordpress tienen solucion a esto

    Reply Share
  17. getAvatar 1.0
    May 30, 2009 Giggi:

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

    Reply Share
  18. getAvatar 1.0
    July 25, 2009 Redemption:

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

    Let me explain: I have this shelf in my closet that I will and I plan to do so through the login of this could, at the same time, run two log both the private platform to Wordpress (having identical user and pass on both) .
    At first I thought to include in your site a hidden form of private platform that would allow me to have a copy of data to log in so we say "sneaky" to Wordpress too but then I was struck by your guide and perhaps there a smarter way to send data and make sure to login to WordPress through some other site ... I do not know if I have explained myself well and I hope you answer me : D . Hello Nicola

    Reply Share
  19. getAvatar 1.0
    03 ago, 2009 Giovambattista Fazioli:

    @ Redemption: Hello Nicola, I know of course your private platform, but the procedure is certainly feasible. In theory, all the code that you server (for WordPress) is present in this post. What you have to decide just where do the "two" login contemporaries.
    If you have full access to your platform, you may enter the code to access your private platform file logon.php proposed in this post, for example.

    Reply Share
  20. getAvatar 1.0
    03 ago, 2009 Redemption:

    @ Giovambattista Fazioli:
    Thanks for your answer!

    I should begin to make this for yourself you have given me good hope for the implementation and I am grateful :) .
    I ask you one last thing, can I somehow create a user queries the user table directly from the database of wp, or are there other reports and keys to be created within the db?

    As you understand I somehow also export the users from the private platform wp :) .

    Reply Share
  21. getAvatar 1.0
    07 ott, 2009 HackersGold:

    nice guide but Nos Ola I realized a fundamental thing where I put all the files? wordpress folder? How do I?

    Reply Share

Leave a comment

TAG XHTML PERMISSIONS: <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 [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL