Theme My Login Custom Registration Page

Hello, world!

I’ve been trying out s2member recently and it’s a really good plug in. One of the main challenges I found when using it was trying to have the Login and Registration forms to be part of a page within the website, as opposed to using the wp-login.php which is difficult to customise. If you wish to skip my explanation just scroll to the bottom of my post.

I have been trying to work out how to do this and iron out the bugs that come with my solution for a while. Seeing as I have crawled my way through many pages I thought I’d write out my solution for future users of s2member. This is a solution to the conflicts caused by using Theme My Login where the javascript features on the registration page don’t work. For example after installing Theme My Login and having styled the registration page I found that the Password Strength Indicator would not work. It wasn’t just the Password Strength Indicator that wouldn’t work, but also the form validation as well. If I just typed in a username and email address and hit submit the registration form would just validate anyway and allow users to register without ticking the all important terms and conditions box.

After searching around the internet I got fed up and decided to reverse engineer the wp-login.php page and find a way to get it to work on my custom Theme My Login page. I found that two files were being loaded, one was password-strength-meter.js which is found under the url “wp-admin/js/password-strength-meter.js?ver=x” and all that contains is the javascript for the Password Strength Indicator.

The other file was /wp-content/plugins/s2member/s2member-o.php and this contains more javascript for running the site. Although these files were minified I was able to, line by line, work out the different functions. What I found was happening is the Password Strength Indicator and the Validation were not being applied to the page at all.

In the modified code below:

What is happening is on line 2, the original file said “if(location.href.match(//wp-login.php/))” meaning this would only run on the wp-login page and not my custom login. There are also a series of “d(” that actually refer to jQuery. So I replaced all of these with the jQuery function. Finally on lines 9 and 10 the original code was jQuery(“div#login….) but the major conflict between theme my login and s2member is that the form get’s wrapped up in a div whose ID is theme-my-login. Once all these are changed, the validation and password strength indicator will work on your theme my login registration page.

Hope this has helped many of you with the same problem.
-Tilley./

Solution:

To fix this all you need to do is place the following code in a javascript file or in script tags and have it load on your (Theme my Login) Login page.

jQuery(document).ready(function(d){	
	if(location.href.match(//login/)){
		jQuery("input#ws-plugin--s2member-custom-reg-field-user-pass1, input#ws-plugin--s2member-custom-reg-field-user-pass2").keyup(function(){
			ws_plugin__s2member_passwordStrength(jQuery("input#user_login"),jQuery("input#ws-plugin--s2member-custom-reg-field-user-pass1"),jQuery("input#ws-plugin--s2member-custom-reg-field-user-pass2"),jQuery("div#ws-plugin--s2member-custom-reg-field-user-pass-strength"))
		});
		jQuery("div#theme-my-login > form#registerform input#wp-submit").attr("tabindex","1000");
		jQuery("div#theme-my-login > form#registerform").submit(function(){
			var h=this,g="",f="",l="";
			jQuery("input#user_email",h).attr("data-expected","email");
			var k=jQuery('input#ws-plugin--s2member-custom-reg-field-user-pass1[aria-required="true"]',h);
			var i=jQuery("input#ws-plugin--s2member-custom-reg-field-user-pass2",h);
			var j=jQuery("input#wp-submit",h);
			jQuery("input#user_login, input#user_email, input#captcha_code",h).attr({"aria-required":"true"});
			jQuery(":input",h).each(function(){
				var m=jQuery.trim(jQuery(this).attr("id")).replace(/-[0-9]+$/g,"");
				if(jQuery.inArray(m,["user_login","user_email","captcha_code"])!==-1){
					if((g=jQuery.trim(jQuery(this).parent("label").text().replace(/[rnt]+/g," ")))){
						if(f=ws_plugin__s2member_validationErrors(g,this,h)){
							l+=f+"nn"
						}
					}
				}else{
					if(m&&(g=jQuery.trim(jQuery('label[for="'+m+'"]',h).first().children("span").first().text().replace(/[rnt]+/g," ")))){
						if(f=ws_plugin__s2member_validationErrors(g,this,h)){
							l+=f+"nn"
						}
					}
				}
			});
			if(l=jQuery.trim(l)){
				alert('— Oops, you missed something: —nn'+l);
				return false
			}else{
				if(k.length&&jQuery.trim(k.val())!==jQuery.trim(i.val())){
					alert('— Oops, you missed something: —nnPasswords do not match up. Please try again.');
					return false
				}else{
					if(k.length&&jQuery.trim(k.val()).length<6){
						alert('— Oops, you missed something: —nnPassword MUST be at least 6 characters. Please try again.');
						return false
					}
				}
			}
			ws_plugin__s2member_animateProcessing(j);
			return true
		})
	}
});

Hi…I have the same problem.
So…I copy your code in a .js file example psifix.js then…how can I load it and where?

Thanks in advance

• This reply was modified 4 years, 6 months ago by  MovLabTS.