Customizing Forms

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)
• generic-rigid.css
• 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)

Support site members have access to additional stylesheets with the Genesis Stylesheet Pack

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