Change or Add Text on Page Load With jQuery

When a plugin’s form doesn’t give you a setting for a piece of text, you can change it in the browser with jQuery as soon as the page loads. This snippet changes a link’s text, replaces a link’s content with HTML, and adds a new paragraph after a registration form.

Place the lines inside your jQuery ready function, $(document).ready(), in your theme’s JavaScript file. In WordPress, make sure that wrapper maps $ to jQuery, because WordPress loads jQuery in no-conflict mode.

//change text
$(".user-registration-error li a").text("Forgot your password?");
//add text
$(".user-registration-register.register a").html("Don't have an account? <b>Register for free</b>.");
$( ".tuw-reg-form form.register" ).after( "<p>Already have an account? <b><a href='/user-login-form'>Login</a></b></p>" );

How it works

• .text() replaces an element’s text. Here it sets the link inside the .user-registration-error message to “Forgot your password?”. Text set this way is plain text, so HTML tags would show as written.
• .html() replaces the content with HTML, which is why it can wrap “Register for free” in a <b> tag.
• .after() inserts new HTML right after each matching element. Here it adds a paragraph with a login link below the .tuw-reg-form registration form. Change /user-login-form to your login page’s URL.

The selectors come from the original site’s registration and login forms, so inspect your own forms and use their classes. Keep in mind that the code runs once, when the page loads. The original text may flash briefly before it changes, and messages added later, for example after an AJAX form submit, stay unchanged. If the text comes from a translatable PHP string, a gettext filter can change it on the server instead, as in changing the Lost your password link text with gettext.

Related articles

• changing a button’s text on click and back again: the same .text() method, triggered by a click