How To Make Certain User Meta Profile Fields Readonly On Edit Page

If you’ve included default WordPress profile fields such as Username or other extra custom fields that you don’t want your users to be able to change after they register, you can easily make specific input fields Readonly using jQuery.

In the default WordPress profile field for Username, the field is Readonly once a user has registered.  But this field is still editable on the new User Meta Profile page.  Add the following jQuery to the text editor of the Profile page you created.

You will need to inspect your Profile page (using F12) to get the unique ID of the input field (Username) to target.  In the example below, our Username field had an ID of um_field_19_my_profile_form_name.  Change all instances of my_profile_form_name to the name of your User Meta form name.

// The original shortcode that was added previously
[user-meta-profile form="my_profile_form_name"]

<script>
// The code to change the property of the form field to Readonly
jQuery(document).ready(function($) {
    $("#um_field_19_my_profile_form_name").prop("readonly", true);
    $("#um_field_19_my_profile_form_name").css("color","#aaaaaa");
});
</script>