You can change the UsersWP login, register and other account forms in several ways: the fields, the colours, CSS and the template files. Start with the simplest one that does what you need.
Fields
Register and account fields are managed in UsersWP > Form Builder. You can add fields such as a phone number, country or a text field for a postal address, and choose which ones show on the register form. See Working with the Form Builder.
The UWP > Login and UWP > Register blocks also have a Form title setting (enter 0 for no title) and an Extra class setting, so you can target one form with CSS.
Colours
The forms use AyeCode UI, which is based on Bootstrap. Button and link colours come from Appearance > Customize > AyeCode UI, where you set a Primary Color and Secondary Color. Text such as labels can also pick up your theme’s text colour, which is why a dark theme with white text can give you white labels on a white form. See AyeCode User Interface (AUI).
CSS
For anything else, add CSS in Appearance > Customize > Additional CSS. The login form has the class uwp-login-form, the register form uwp-registration-form and the forgot password form uwp-forgot-form. Each block sits inside a wrapper with the class uwp-login-class, uwp-register-class or uwp-forgot-class.
This example gives the login and register forms a white card with a black border and dark labels:
.uwp-login-class .card,
.uwp-register-class .card {
background-color: #fff;
border: 1px solid #000 !important;
}
.uwp-login-form label,
.uwp-registration-form label {
color: #333;
}
If a rule has no effect, use your browser’s inspect tool to see which theme rule wins, and make your selector more specific.
Add a logo above the form
UsersWP runs the uwp_template_form_title_before action above each form title. This snippet adds a logo to the login and register forms. Change the image URL to your own.
add_action( 'uwp_template_form_title_before', 'my_uwp_form_logo' );
function my_uwp_form_logo( $form_type ) {
if ( in_array( $form_type, array( 'login', 'register' ), true ) ) {
echo '<p class="text-center"><img src="' . esc_url( home_url( '/wp-content/uploads/logo.png' ) ) . '" alt="" width="120"></p>';
}
}
Template files
For bigger changes, such as moving the links under the button, copy the template into your theme:
- Find the template in
wp-content/plugins/userswp/templates/bootstrap/. The login form islogin.php, the register formregister.phpand forgot passwordforgot.php. - In your child theme, create the folders
userswp/bootstrap/, so the path iswp-content/themes/your-child-theme/userswp/bootstrap/. - Copy the file into that folder and edit the copy. UsersWP loads your copy instead of its own.
Use a child theme so a theme update does not remove your changes, and after a UsersWP update compare your copy with the new template. See How to Override Templates for UsersWP.