All of the style and layout elements of the WP-Members forms are driven by CSS. There are several options for customizing the look and feel of the forms and other elements in the plugin.
- Use the WordPress Customizer to apply basic CSS changes.
- Select a different stylesheet in the plugin’s main Options tab.
- Create and load a custom stylesheet.
You should NOT edit the form code directly in the plugin.
Customization beyond CSS
Customizing the stylesheets should suffice for most customization. However, there may be times when you need to insert certain style definitions, specific HTML tags, other elements beyond what is already in the plugin or in the included stylesheets..
There are several filter hooks in the plugin’s form building functions that allow you to customize the HTML that is output for the forms. This allows you to add your tags, classes, or IDs.
Form filter hooks
There are a number of form filter hooks available. These filter hooks give you the ability to replace what is generated by the plugin with your own form elements. There are many examples and tutorials on this site on how to use these filters to enable various form customizations.
- wpmem_sidebar_form (tag)
- wpmem_login_form_before (tag)
- wpmem_login_form (tag)
- wpmem_register_form_before
- wpmem_register_form (tag)
- wpmem_register_heading
- wpmem_user_edit_heading
- wpmem_recaptcha (tag)
- wpmem_tos_link_txt
Examples
Here are some posts that have some custom form layout examples using some of the plugin’s filter hooks:
- Customizing form CSS: Adjusting floated form elements [free]
- Customizing form CSS: Setting maximum form width [free]
- Customizing form CSS: Custom login form with side-by-side inputs [free]
- Customizing form CSS: Login widget with inline inputs [member only]
