How to create a WordPress Login Page with error checking | Elementor Pro!

How to create a WordPress Login Page with error checking & Elementor Pro!
If you've used Elementor Pro to create a custom login page, you'll know that on a failed login attempt, you'll just get redirected to the default WordPress login page. Not good!
In this video, I'll show you how to build a login page with Elementor Pro and setup error checking to stop this from happening.
WordPress Flow Article & Code: bit.ly/2B0e3Cr
Buy Elementor Pro: jo.my/1s0t2s2
WPTuts Facebook Group: / wpcrue
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► WORDPRESS VISUAL PAGE BUILDERS ◄
★ ELEMENTOR PRO: jo.my/1s0t2s2
★ Brizy Pro: bit.ly/2Ji97r8
★ WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
★ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
★ GeneratePress Premium: bit.ly/2Ydn1SE
★ OCEANWP: bit.ly/2fRHBr0
★ DIVI Theme: bit.ly/2G8JMiA
★ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
★ SMART SLIDER 3: bit.ly/2G0G1vB
★ CSSHERO: bit.ly/2qbrRl6
★ SLIDER REVOLUTION 6 - jo.my/sr6
► WORDPRESS PLUGINS ◄
★ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk

[@MuttaqiAliMuhammad]

I've been searching for this for the longest time. By far this is the simplest and the most elegant solution without having to install another plugin. Appreciate it Paul!

[@formgarten]

As some people have already written in the comments: this video urgently needs an update, because what was not taken into account in the code snippet is that when you call the original wp-admin or login.php page you end up in an endless loop. Of course, this has a very negative effect. Unfortunately I have not enough coding experience, otherwise I would have sat down and looked for a solution. 🤷‍♂

[@wplearnonline628]

My oh my Paul ,I love your channel. Much love from Nigeria. I always thought this was a major drawback to using elementor login widget. It's very golden finding a solution to it redirecting to the WordPress default login page. Thanks man.

[@_h1ghlife_]

Thankyou thankyou thankyou - I have already been to a number of github posts and forums for this solution but none worked. Your solution was easy to follow and well spelled out for noobs like me. Cheers

[@StevanOvich61]

Nice tut again Paul! Used code snippets a little already. Saves delving into sites file system ...👍

[@lamaraustin7088]

Very simple solution to an issue that Elementor has failed to address but should. No one wants to see the WP Admin login.On an otherwise great website they have built. Thanks so such for your good work!

[@volkerschuster8079]

thank you for another brilliant video Paul, code snippets here I come

[@michael.faufra]

Thank you so much Paul !! Very nice tutorial !

[@digitalbizconsultant]

That is Awesome Paul, thank you.

[@saxirlo-it2016]

Great Paul always great content, it will be complete with another content of the WordPress admin dashboard and thank you so much Paul C.

[@personalwealthpulse]

Amazing tutorial mate.

[@johnboyd8053]

In your previous tutorial, you convinced me to start using the Code Snippets plugin. And now an example of some things we can do. Thank You. Any other little Snippets of Code would be nice to see. (Hint Hint)!

[@SpencerTaylorOnline]

John, you can use any WordPress functions in Code Snippets. You can find thousands of examples using Google or check out stackexchange.com. Using snippets instead of child theme simply makes adding functions more accessible, and arguably can allow you not to use a child theme. But you can Google any features you want.

[@davidsots558]

So many thanks for this video!

[@DimitrisLoizos]

Thank you! That was more than amazing!

[@Deepakkumar-hx6oc]

This is a great help. Thank you so much

[@andrewdowniephd]

Nice post. Think I'll add this to a few sites in the next few days.

[@SteeveeDan]

Thanks for this!

[@AllanSamayoa]

You are the best man! Thanks that was graet, it helps me with a main project!

[@pbrunnerUK]

Great video. Thanks!!

[@elysamsudin7474]

Thanks a lot! You're awesome!

[@PunyapatFungtammasarn]

This is awesome !!!!!!

[@Milena-jq8ul]

excellent, really helpful... thanks

[@Vivazart]

TKS SO MUCH! YOUR THE BEST BRO! BIG HUG FROM BRAZIL !!! S2

[@wgm247]

Great video! Paul what camera / mic and software setup do you use to create video content? It's good stuff!

[@DahakaProductions]

You are my savior! Thanks (L)

[@sbtechnollc]

Best Tutorial

[@mr.mahadi6326]

Great Video

[@clementyo4526]

Great video, Paul 😉 is it possible to integrate with limit login plugin?

[@LuongThanhHung]

Thanks bro,

[@raynellbell2428]

Excellent! One question.. how will this work in the use case that the user has entered in to many attempts and now they need to rest their credentials?

[@askopromet]

Thanks for another awesome video Paul! --- My PROBLEM: I've added the newly created custom login page URL in the Login Form's "Redirect After Logout field" but for some reason when I log-out it takes me to a blank page (/wp-login.php?loggedout=true&wp_lang=en_US). ---> What am I missing here?

[@mamanhanisami9847]

thank you

[@francinesafron1918]

WARNING: You can't ever get back into your WordPress login once you use this solution. You better have access to cPanel or you will be locked out and not even be able to get in to delete what is detailed in this video. I tried the solution and it worked great, but then got locked out of WordPress and none of us could figure out how to get WordPress login page to work again until this solution was deleted.

[@ADASADALOL32]

Thanks

[@JC-jn1xd]

This has been a lifesaver, I almost want to kiss you! Exactly what I needed. A beginner question here, I have a Hello child theme where I've been making small changes for register redirect etc. May I use the Snippet tool for all code changes as needed? Or is this used only for certain changes? Again, thank you very much!

[@franciszek1977]

hi WPTuts, thank you, excellent video... one question?.. how put message inside popup wordpress?... thanks again

[@176dude]

What about the lost your password link on this login form? Is there a way to avoid it from redirecting to the default wordpress login page. Would love a follow up video with some additional code to accomplish this.

[@hongernest9519]

add_filter( 'lostpassword_url', 'my_lost_password_page', 10, 2 ); function my_lost_password_page( $lostpassword_url, $redirect ) { return 'The new created page url'; }

[@diamondplanetmedia]

The link in the description doesn't work any more. Elementor Pro also doesn't have a fix for this yet. My solution to this issue was to use the login form from Ultimate Add-ons for Elementor.

[@michaeltrachtman7095]

I would love if you made a video that combined "code snippets" with "unlimited elements for Elementor". I haven't tried this yet, so I don't know if it is possible. The idea is simple: 1 - Have some code-snippet that also takes parameters. For example, take the code that you had in the "how to get error messages on a login page". But add to it "parameters" (such as "Error Message", "Font and so forth", "Background Color of Error Message", etc. Then convert it into an Elementor Widget using the free version of Unlimited Elements for Elementor. Now, all of a sudden, I can "drop in" the error message in case of the failed login, and stylize it using full Elementor capabilities. Since I have not tried it yet, I am not sure whether we would need both "Code Snippets" as well as "Unlimited Elements", but I suspect we do. The first code snippet you used in that video would be installed via the code-snippets plugin. I'm not sure if "code snippets" allows for parameterized snippet code. Then the actual definition of the shortcode would have parameters for the above mentioned items (text, styling, etc).. Then this would all be wrapped up into an Elementor Widget using Unlimited Elements for Elementor (free version). That would be both cool, as well as a generally instructive technique. Assuming that all the pieces would line up with each other .. What do you think? p.s. I will cross-post this also on the other KZbin you did in the last few days.

[@hectortirado1236]

This was a really good tutorial, even today. One thing though, if someone presses the spacebar, they will be taken to the WP login page. To test this, if you enter your username and then press the spacebar once or as many times as you want in the password field, once you click login, it will redirect you to the WP login page with the error message. You can do it the reverse way with spacebar for the username and type anything for the password. Anyway to fix the code to take the spacebar character into consideration? Also, is there anyway to fix the Forgot password link that also redirects to the old page? Or is a plugin/add-on to elementor pro the only fix? I would prefer to use code if it was possible. Thank you, and really nice work.

[@alexkilby9995]

Yeah, as mentioned below this doesn't work anymore, if you try and access /wp-admin or /wp-login.php you redirect to just / ?login=failed straight away. The video definitely needs an update, people will get locked out of their websites!

[@KonstantinPulman]

Yes, I got into loop redirection now... need that code update. Also need the solution to replace the entire wp-login.php with the custom made login page. So when the entre site is restricter for none registered users, then the custom login page would be the default one.

[@francinesafron1918]

@@KonstantinPulman THIS VIDEO NEEDS AN UPDATE ASAP -- GREAT SOLUTION IF IT DID CAUSE AN EVEN BIGGER ISSUE

[@subrung.online]

My elemontor is giving problem. using basic version not the pro one when i disable it works ok. so now what i have to do with this as i want elementor and dont want to remove it further my home page is on elementor and i am not pro so it will be will difficult to make it again.

[@qysrmacasayon5625]

Nice Work, Can you make a tutorial on Password toggle visibility , I believe this is an important function. Thanks

[@vighnesh.acharya]

Great!! Can you please help me to build printshop (+design services) website! Importantly when customer ordered a printing services they should able to upload file when checkouting the order even after order we need to chat with the customer in a particular order regarding their orders like design approval, file uploads profing etc

[@maryammehmood6902]

Hey thanks for the nice video, it helped me alot, but by adding this i am unable to access my wp-admin default login page. Can you help me how can i change the script?

[@Sakura-zt8td]

thanks you mate, no skip ads!!! thanks

[@WPTuts]

Maybe you need KZbin Red!

[@katherinehoulding2397]

The only issue I see with this Paul is that now my client has access to the login page to edit. Is there away to add it to a template or popup? something they cant see in the backend?

[@aviman2010]

Hi Paul. Love your videos. I've just started developing a new site and decided to use this process. I got the login screen set up but didn't get as far as the extra code for reasons I shan't bore you with. The login screen isn't working and I just can't get past it even with wp-admin. Wp-admin just returns me to the login screen I created. Any ideas on how I can get into my dashboard.

[@francinesafron1918]

WHY IS NO ONE GETTING A REPLY TO THIS SERIOUS PROBLEM AND WHY IS THIS UPDATE STILL POSTED.

[@kjangmy]

Should be a standard feature of Elementor Pro Now how hard would it be ???

[@orcunaksoy2007]

I have the problem that the shortcode doesn't work. When I press login, the shortcode doesn't want to appear on the page. I need urgent help, please

[@dennislucking4362]

Hey! Error is only showing when field are EMPTY.. not when the entered are wrong. You got an idea? :( I can't find.. Thanks for the awesome video!

[@davidadams421]

Very nice! Instead of implementing this as a page, could it be implemented as an Elementor Popup? This way the popup could be shown as a modal overlay onto whatever the visitor was looking at? I guess the redirect after login would at the very least refresh the page, and you'd have to build the referer per the comments in the code snippet ... OK, maybe a little challenging.

[@taichikung2491]

I'm trying to do this too!

[@jakeschroader5977]

I would love to see a solution to this as well...my pop up login design be poppin'. I'd rather keep than use a dedicated page. Any ideas, Paul?

[@davidadams421]

I did look into this further and, whilst it is certainly possible to popup the Elementor login form element and use the code in this video to manage failed logins, it's still not a complete solution because the 'Lost password' feature still resorts to WordPress. As coincidence would have it the PaidMembershipsPro plugin recently released a full login replacement solution in v2.3.x. It handles the login, failed login, reset password and even login redirects ... but ... the code is beyond my level of expertise to decipher and re-use. It's open source, though ... give it a go?! (github.com/strangerstudios/paid-memberships-pro)

[@jakeschroader5977]

@@davidadams421 I think I will give it a go after my current project is finished. I ended up creating a really good looking 2 column login (welcome | login), meant for this project to simply track orders, and it looks beautiful. The failed messaging works great. Thanks for looking into the Popup issue, David!

[@ioriamt9774]

@@jakeschroader5977 hi. Have you done it on a pop up? Can you share the solution?

[@georges2721]

It all works all fine until you have a failed login. Once you login successfully after a failed login the Oops error message is still there with the message underneath displaying "You are Logged in Username (logout)". Have I missed something, are you able to shed some light? Thank you for your tutorials.

[@williamcooper8559]

Could you could redirect it a different page after login or redirect back to the to the login page if you didn't want it to go somewhere else?

[@armallpk]

Hi, I am using free versions of ocean wp & free elementor, Can I make head just like amazon and flipkart, can I add woocommerce login icon and cart on header, (when mouse come on these icons drop down window will appear and show all the options i.e. (in account, dashboard, order, download etc & in cart number of items in cart in dropdown menu).

[@designdrudge]

Great stuff. Bonus question: I wonder how does one create a fully integrated custom login with Elementor and 2FA (for example iThemes Security). The same problem: you will be redirected to the 2FA login form of iTSec, which is annoying. Would you have a similar solution for this, keeping QR code and such in mind. Quite challenging.

[@SpencerTaylorOnline]

You can't directly use 2FA and the Elementor login widget together, as the code for 2FA is not in the widget. You would have to code your own widget. You can also use something like iThemes Security Pro, which has both 2FA and magic links sending built into it.

[@designdrudge]

Spencer Taylor I helped myself by redesigning the entire login to fit into the frontend design but that’s not what I would like to have as a workflow. Elementor should cover 2FA and the WP login page. Maybe in the future that’s possible. I will poke the Elementor devs.

[@bentleys5059]

I see this thread is 2 years old now and the link to WordFlow no longer works. Any way to get the code snippet and short code? Thanks!

[@Sekobra]

Can I change the text on the "Oops! Looks like...." I would like to have it in another language

[@raynellbell2428]

you mention the link for code snippets but I do not see the link

[@stephaneboisnault2757]

Good morning, the link to retrieve the code no longer works ?

[@AsitAithal]

The link to the code is no longer active.

[@bartwlkns7084]

HI, the link to the snippet code doesn't work anymore. Can anyone drop it here please? thx

[@michaelhines6967]

Hey Paul, What would be the result if the Elementor login page got deleted would it revert back to the default wordpress login system?

[@SpencerTaylorOnline]

No, because the code is in your Functions.PHP or snippets. You would need to take that code out, or modify it to use something other than Elementor.

[@taichikung2491]

Please what if I'm using a POP-UP for the log in?

[@abioyehamid5458]

How can I create an admin dashboard to monitor all my clients and activities

[@BrunoSouza]

Great! But the "Lost your password" page will still be the default WordPress page =/

[@Unfunctional]

Hm, it works, but when you go back to log in page again, it says to login again :) It does not say that you are logged in as ("username") anymore...

[@pakman-4379]

I tried and found some success, but now after the theme editor changes, I think i created a bug and can't figure it out. Is there you can help me directly (I am willing to compensate for your time) can you kindly help. What would be a great contact to connect with? 🙏

[@TalhaKhan-zw7th]

Hello Its really Great! Can you Please share with me Custom code, The Link is not opening....

[@74giannico]

does it works with elementor pop-up?

[@Abdulkalam-zg3bk]

Hello sir, I am using a popup to show the form but when I put the wrong information in the form , It redirect to the home page. Why it is happening sir? Please help me sir

[@princemerise7877]

What about Popup login form?

[@giordanacamargo3203]

Anyone has any solution to the fact that the "Remember me" button from the login form doesn't seems to work?

[@vincentkhoo791]

How can I create a post visibility login page?

[@diegozayas6816]

Great vid, however, site with the script is down. Where can I find it now?

[@loiclecolier1652]

Redirect on Failed Login: add_action( 'wp_login_failed', 'elementor_form_login_fail', 9999999 ); function elementor_form_login_fail( $username ) { $referrer= $_SERVER['HTTP_REFERER']; if ((!empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer, 'wp-admin') )) { wp_redirect(preg_replace('/\?.*/', '', $referrer) . '/?login=failed' ); exit; } } add_action( 'wp_authenticate', 'elementor_form_login_empty', 1, 2); function elementor_form_login_empty( $username, $pwd ) { $referrer= $_SERVER['HTTP_REFERER']; if ( empty( $username ) || empty( $pwd ) ) { if ((!strstr($referrer, 'wp-login') && !strstr($referrer,'wp-admin') )) { wp_redirect(preg_replace('/\?.*/', '', $referrer) . '/?login=failed' ); exit; } exit(); } } Failed Login Error Message: function generate_login_fail_messaging(){ ob_start(); if(isset($_GET['login']) && $_GET['login'] == 'failed'){ echo '!Oops! Looks like you have entered the wrong username or password. Please check your login details and try again. '; } $return_string = ob_get_contents(); ob_end_clean(); return $return_string; } add_shortcode('login_fail_messaging', 'generate_login_fail_messaging');

[@user-my1ws8et4f]

Hi where can i find the code please? the link does not work

[@MattyPod27]

Links are not working anymore :( Any new update about this issue ? :)

[@asrockdigital]

Has this been fixed yet by elementor themselves?

[@teodorobasta3096]

your tutorial are great demonstration of a masters! but you need to speak slower! ah ah ah...you are great!

[@ampersandstudios4458]

The URL and the whole website is not longer working. The snippets are lost.

[@TheChefchapa]

how to integrate recaptcha in this login?

[@SpencerTaylorOnline]

Unless I'm missing something, this method does not include registration?

[@WPTuts]

No, it's simply for the login as mentioned at the top of the video, registration, etc., is not handled by Elementor Pro at this point in time.

[@SpencerTaylorOnline]

@@WPTuts I don't think I've used Elementor Pro without WooCommerce in a few years. One would think they built registration into a widget by now. I don't think Divi does registration either.

[@WPTuts]

@@SpencerTaylorOnline you certainly think they would have included it. Just having the login widget and nothing more is a little half baked for sure.

[@SpencerTaylorOnline]

@@WPTuts considering the extensive feature set of most things in Elementor, like ACF and deep Woo support, it amazes me that they don't have registration built into a login widget.

[@zinnque3394]

There is a problem there, once you refresh it, that error wont go away..

[@alvvoss]

my page crash with both one activated at the same time

[@MuhammadBilal-oc6pi]

website link is not working

[@USATanuki]

Link to code is dead

[@afrartlantika6479]

PLEASE UPDATE YOUR SOURCE CODE ON WEBSITE

[@sigaraybrak1791]

++++++++

[@FaroukNasri]

Dead link

[@TrueKindness]

Guess my comment got deleted. To fix the problems add check that the parameters exist using "isset" for all three chunks of the program. Put a if(isset($_SERVER["HTTP_REFERER"])) {} and if (isset($_GET['login'])) {} around the code.

[@TerranceBryantTheWiz]

Those still facing an issue with empty spaces fooling the login try this in the "add_action( 'wp_authenticate', 'elementor_form_login_empty', 1, 2 );" code block. $pwd = isset($pwd) ? trim($pwd) : false; $username = isset($username) ? trim($username) : false;

[@hjkgk5e3]

Where exactly in this code block I have to place the code?

[@cindycharvet875]

Please HELP! if you try and access /wp-admin or /wp-login.php you redirect to just / ?login=failed straight away. The video definitely needs an update, we are getting locked out of our websites!

[@TrueKindness]

It's not that bad. There is just some warnings that can be overcome with minor modifications - check my comment.

[@francinesafron1918]

This is happening to anyone who uses this -- the video needs to be updated asap because it does not point out that you solve one problem BUT create a nightmare.

[@stephaneboisnault2757]

Good morning, the link to retrieve the code no longer works ?