Thanks!

http://userproplugin.com/userpro/profile/edit/

Thanks

Waiting 4 seconds for a register/login screen to slowly appear, with horribly laggy animations is not on.

Fortunately, the solution is “simple”, although nothing with this plugin ever seems to be simple…

1.) Output a dedicated registration, login and forgotten password form in the header of every wordpress page. You can do this using a widget if you have the functionality, or, if like me, you prefer working with the code directly, do a “do_shortcode(‘[userpro template=register type=front-page-login]’); call in the header of WP.

2.) Wrap each form in a different wrapper eg: “instant-reg-wrapper” and make it display:none;

3.) Set the wrapper to a solid background color, width: 100%, height: 100%, position: fixed, top:0, left:0; so that we get a nice background pop up.

4.) Make each form a set width and position it in the middle. Mine is 300px wide, position: fixed, left: 30%, top: 25%.

3.) Write some jQuery that activates the desired wrapper being displayed when your button is pressed. For example:
$(“a.instant-registration”).click(function () {
$(“.instant-reg-wrapper”).fadeIn();
}

4.) Repeat for each window.

—

For the pros; I’ve added extra buttons to each of the forms, restyled it in CSS to make it minimal (yes, it is BUTT UGLY out of the box) and then underneath each shortcode, added in buttons for the various other forms. For example, in my registration form, I’ve added a title: “Already a Member?” and then a “Click here to login” button which calls the login window as it has the “instant-login” class on it.

You will of course need to fade out every other window (registration and forgotten password, in this case) and then fade in the desired window.

Eg: my login window code looks like this:
$(“a.instant-login”).click(function () {
$(“.instant-reg-wrapper”).fadeOut();
$(“.instant-pass-wrapper”).fadeOut();
$(“.instant-log-wrapper”).fadeIn();
}

Bonus points if you add some FontAwesome rotating fonts on submit, fade everything out and make it clear what the error message is for the user. You’ll have to make some changes to core plugin files, which is an issue with updates coming out for bug fixes and features every week.

If you just stick with the simple JS route of hooking into a new class on every button then you don’t need to over-write anything within the code.

But the result?
No more 4 second delay; no more horrible AJAX behaviour which is worse out of the box than a typical page refresh.

Yes, there is some re-writing of code, a lot of bullshit CSS clauses to over-write all the horribly designed !important tags that have been used; and a little out of the box thinking because any code customization that goes on is almost impossible with this lovely spaghetti code.

And to think I thought I would be saving time with this purchase…

—

I’m hoping that the author is reading this, as this is the second time I’ve put together some basic code to fix some glaring issue in this plugin.

Having your users wait a year for something that should be VERY BASIC USABILITY on something that has netted you over $250k in sales is not something that should happen.

This is where you get competitors come in, fix up your holes, and take your market share (what a great idea…)

—

Here is my code:

Header.php (for WP):
Encoding on this form is stuffed up (why are you converting my characters in a code quote to unicode?!)

!–Begin instant-load ajax registration form–>
<div class=”ajax-grey-wrapper”></div>
<div class=”frontpage-lp-registration-wrapper userpro-registration-wrapper sidebar-register instant-ajax”>
<div class=”exit-wrapper”>
<i class=”fa fa-times-circle fa-2x”></i>
</div>
<div class=”logo-wrapper”>

</div>
<p class=”lp-sub-cta” style=”background-color: #524f4f; margin-top: 10px; margin-bottom: 20px; font-size: 20px;”>Enter your email and get access to the Academy’s exclusive premium content:</p>

<?php echo do_shortcode(‘[userpro template=register type=front-page-login register_redirect=”http://www.ozirig.com/academy”%5D&#8217;); ?>

<p class=”lp-sub-cta” style=”background-color: #524f4f; margin-top: 10px; margin-bottom: 10px; font-size: 20px;”>Already a member?</p>
Login
</div>

—

Here is the JS:

//Make the login, register and forgotten password forms look sexy:
$(‘.sidebar-start-cta’).click(function() {
$(‘.ajax-grey-wrapper’).fadeIn();
$(‘.instant-ajax’).delay(200).fadeIn();
});

//Make the windows close when the gray cover is clicked:
$(‘.ajax-grey-wrapper’).click(function() {
$(‘.instant-ajax’).fadeOut();
$(‘.ajax-grey-wrapper’).fadeOut();
});

—

Here is the CSS:

—

Here is a photo of the result: