{"id":772,"date":"2026-10-20T09:03:45","date_gmt":"2026-10-20T08:03:45","guid":{"rendered":"https:\/\/userswp.io\/documentation\/article\/customize-login-and-register-forms\/"},"modified":"2026-10-20T09:03:45","modified_gmt":"2026-10-20T08:03:45","slug":"customize-login-and-register-forms","status":"publish","type":"gd_place","link":"https:\/\/userswp.io\/documentation\/article\/how-tos\/customize-login-and-register-forms\/","title":{"rendered":"How to customize the UsersWP login and register forms"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fields<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/userswp.io\/documentation\/article\/first-steps\/working-with-the-form-builder\/\">Working with the Form Builder<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Colours<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;s text colour, which is why a dark theme with white text can give you white labels on a white form. See <a href=\"https:\/\/userswp.io\/documentation\/article\/first-steps\/ayecode-user-interface-aui\/\">AyeCode User Interface (AUI)<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For anything else, add CSS in Appearance > Customize > Additional CSS. The login form has the class <code>uwp-login-form<\/code>, the register form <code>uwp-registration-form<\/code> and the forgot password form <code>uwp-forgot-form<\/code>. Each block sits inside a wrapper with the class <code>uwp-login-class<\/code>, <code>uwp-register-class<\/code> or <code>uwp-forgot-class<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This example gives the login and register forms a white card with a black border and dark labels:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.uwp-login-class .card,\n.uwp-register-class .card {\n\tbackground-color: #fff;\n\tborder: 1px solid #000 !important;\n}\n\n.uwp-login-form label,\n.uwp-registration-form label {\n\tcolor: #333;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If a rule has no effect, use your browser&#8217;s inspect tool to see which theme rule wins, and make your selector more specific.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add a logo above the form<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">UsersWP runs the <code>uwp_template_form_title_before<\/code> action above each form title. This snippet adds a logo to the login and register forms. Change the image URL to your own.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-php\">add_action( &#039;uwp_template_form_title_before&#039;, &#039;my_uwp_form_logo&#039; );\nfunction my_uwp_form_logo( $form_type ) {\n\tif ( in_array( $form_type, array( &#039;login&#039;, &#039;register&#039; ), true ) ) {\n\t\techo &#039;&lt;p class=&quot;text-center&quot;&gt;&lt;img src=&quot;&#039; . esc_url( home_url( &#039;\/wp-content\/uploads\/logo.png&#039; ) ) . &#039;&quot; alt=&quot;&quot; width=&quot;120&quot;&gt;&lt;\/p&gt;&#039;;\n\t}\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Template files<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For bigger changes, such as moving the links under the button, copy the template into your theme:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Find the template in <code>wp-content\/plugins\/userswp\/templates\/bootstrap\/<\/code>. The login form is <code>login.php<\/code>, the register form <code>register.php<\/code> and forgot password <code>forgot.php<\/code>.<\/li>\n\n\n\n<li>In your child theme, create the folders <code>userswp\/bootstrap\/<\/code>, so the path is <code>wp-content\/themes\/your-child-theme\/userswp\/bootstrap\/<\/code>.<\/li>\n\n\n\n<li>Copy the file into that folder and edit the copy. UsersWP loads your copy instead of its own.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/userswp.io\/documentation\/article\/how-tos\/how-to-override-templates-for-userswp\/\">How to Override Templates for UsersWP<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[41,7],"class_list":["post-772","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-how-tos","gd_placecategory-tips-tricks-more"],"_links":{"self":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/comments?post=772"}],"version-history":[{"count":0,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/772\/revisions"}],"wp:attachment":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/media?parent=772"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/tags?post=772"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/categories?post=772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}