All of the style and layout elements of the WP-Members forms are driven by CSS. There are a number of included stylesheets, or you can create your own stylesheet to determine the look and feel of the forms to better integrate with your theme.
You should NOT edit the form code directly in the plugin.
Once you have created a custom stylesheet, you will need to store it somewhere. It is not recommended that you store it in the plugin folder structure as this may be overwritten in the event of an upgrade.
There are a total of eleven stylesheets included in the plugin download that you may use as a starting point:
- generic-no-float.css (the plugin default, non-floated elements)
- wp-members-2016-no-float.css (non-floated elements in a Twenty Sixteen style)
- wp-members-2015-no-float.css (non-floated elements in a Twenty Fifteen style)
- wp-members-2015.css (based on Twenty Fifteen)
- wp-members-2014-no-float.css (non-floated elements in a Twenty Fourteen style)
- wp-members-2014.css (based on Twenty Fourteen)
- wp-members-2013.css (based on Twenty Thirteen)
- wp-members-2012.css (based on Twenty Twelve Theme)
- wp-members-2011.css (based on Twenty Eleven Theme)
- wp-members.css (original stylesheet based on Twenty Ten Theme)
Loading a custom stylesheet
There are three methods in which you may load a stylesheet.
Choosing a preloaded stylesheet
To choose from one of the four preloaded stylesheets listed above, there is a dropdown selector in the plugin’s Options Tab labeled “Stylesheet:” Choose one of the stylesheets from the list to change the stylesheet that will load with the plugin.
This list can be added to using the wpmem_admin_style_list filter hook. This hook allows you to write a filter function that will add your own custom stylesheet(s) to the dropdown selector.
Specify custom stylesheet location
If you have created a custom stylesheet, the simplest way to set the plugin to load it is to specify its full URL in the “Custom Stylesheet” field in the plugin’s Options Tab.
If you provide a location in this field, your custom styles will be loaded automatically rather than the default styles. When a value is provided in this setting, the plugin will load this instead of any stylesheet from the dropdown list above.
You must provide the full http path to the stylesheet (such as: http://www.mysite.com/wp-content/my-theme/my-wp-members-styles.css). It is recommended that you double check the URL in your browser. If you can’t see the stylesheet in the browser, your URL is incorrect.
See this post for more information on setting up a stylesheet this way so that it can also be edited in your theme browser.
Load the stylesheet using wp_enqueue_scripts
This is the more elegant way of loading a custom stylesheet, and it is more reliable. This post will describe how to do it. If you use the wp_enqueue_scripts method of loading a custom stylesheet, you can still store it in your theme folder to allow online editing as described in the previous method.
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 (tag)
- wpmem_recaptcha (tag)
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]