WordPress Login Page Change Issues

Question

So, I'm working on modifying my account again ... and I'm having another problem. Here is the script ... I have a plugin that consists of two components: a script that rewrites the username in the login / registration form and a function that overrides the verification handler during registration.

Here are the files in question ...

validator.php

<?php // Rewrite registration form function mpm_registration_form() { wp_enqueue_script('login_form', plugin_dir_url(__FILE__).'js/usernamerewrite.js', array('jquery'), false, false); } add_action('login_head', 'mpm_registration_form'); // Register actions add_action('register_post', 'mpm_validator_verify_account', 10, 3); // Check username against minecraft.net database function mpm_validator_verify_account($login, $email, $errors) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_URL, 'http://www.minecraft.net/haspaid.jsp?user='.rawurlencode($login)); $mcacct = curl_exec($curl); curl_close($curl); if($mcacct != 'true') { if($mcacct == 'false') { $errors->add('mc_error', __('<strong>Error:</strong> Minecraft account is invalid.')); return $errors; } else { $errors->add('mc_error', __('<strong>Error:</strong> Unable to contact minecraft.net.')); return $errors; } add_filter('registration_errors', 'mpm_validator_verify_account', 10, 3); } } 

Js / usernamerewrite.js

 jQuery(document).ready(function ($) { 'use strict'; /*global document: false */ /*global $, jQuery */ var username, reset; if ($('body').hasClass('login')) { username = document.createElement("input"); username.type = 'text'; username.name = 'log'; username.id = 'user_login'; username.className = 'input'; username.size = '20'; username.tabIndex = '10'; reset = document.createElement("input"); reset.type = 'text'; reset.name = 'user_login'; reset.id = 'user_login'; reset.className = 'input'; reset.size = '20'; reset.tabIndex = '10'; $('label').each( function () { if ($(this).text().trim() === 'Username') { $(this).html('Minecraft Username<br/>'); $(this).append(username); } else if ($(this).text().trim() === 'Username or E-mail:') { $(this).html('Minecraft Username or E-mail:<br/>'); $(this).append(reset); } } ); } }); 

The problem is that if I write the line wp_enqueue_script as it is at the moment (when loading the script into the header), the action function is processed properly, but rewriting never happens. Conversely, if I change it so that the script is loaded in the footer, rewriting occurs, but the action is no longer handled properly (username field reset before sending). I have a complete loss.

The second (minor) annoyance: there is always a slight delay between the loading of the page and the appearance of rewriting. Any thoughts on how to make this more transparent would be greatly appreciated.

EDIT: If you are going to vote for a question, the least you could do is indicate why ...

Answer 1

Finally got it! The way I did this was horrible ... I really need to refresh my JS / jQuery. Here is what I ended up with, which works great in all my test cases, and also rewrites not only field labels, but also messages ...

 jQuery(document).ready(function ($) { 'use strict'; /*global document: false */ /*global $, jQuery */ $('label').each( function () { $(this).html($(this).html().replace('Username', 'Minecraft Username')); } ); $('.message').each( function () { $(this).html($(this).html().replace('username', 'Minecraft username')); } ); }); 

Answer 2

Could you just include your function in:

 jQuery( document ).ready ( function( $ ) { // your js here } ); 

No need to put (jQuery) behind your function.

If you perform DOM modifications before the page loads, it may not work. Now you can load it into the header and be sure that it works.

I do not quite understand why the fields will be reset before sending, since you are not attached to any dispatch event handler. If this is still happening, let us know.

Instead of calling if ($('body').hasClass('login')) in js, you probably want to check php (use the login_head action) if you are on the login page and don't send this js to all pages of your site. But first run it before optimizing.

If the view doesn’t go to the backend, it is possible that your javascript recreates the inputs with the same identifier as the wordpress inputs, and thereby replaces them. As far as I can tell, this is not at all what you need. Just replace existing tags.