Search Results for: short code

The login, registration, and widget forms can be viewed in the “logged in state” when using the WordPress Customizer. The Customizer is a helpful tool that allows you to manage various WordPress options visually, and it can be used to apply custom CSS for your forms, especially if you just need to make a few minor changes.

• To use the WordPress Customizer, make sure you are signed in. Then from the WordPress Toolbar on your site, select “Customize”, which will usually be to the left side of the menu. (NOTE: If you use a theme that supports Full Site Editing (FSE), you may notice this option is gone from the menu. You can add it back in with this simple trick.)
• Once the Customizer is open, browse to a page that has the form you want to work on (such as login or register).
• From the Customizer menu, select “WP-Members”. In the WP-Members Customizer menu item, you will have a checkbox to “show forms as logged out.”  Check that to allow the form to display.
• Now you can begin customizing CSS for the form in the Customizer. Go back to the Customizer main menu and select “Additional CSS.”

Example of Using the Customizer

Here is an example of using the Customizer to create a custom property for the font weight of the login form label tag.

Browse the page containing the login form shortcode ([wpmem_form login]).  Make sure you are logged in and open the Customizer from the WordPress Toolbar. Click the WP-Members menu item in the Customizer (see image below):

With the WP-Members Customizer menu item open, check the box to “Show forms as logged out.”  The page should display the form as if you were not logged in (see image below):

Now you can go back to the main Customizer menu (click the back arrow next to “Customizing WP-Members” in the upper left of the Customizer). Now select “Additional CSS” from the Customizer menu.  This will open the Custom CSS area.  You may also want to use the browser inspector to help you identify certain elements.  To do that, right click the “username” label in the form (which is what we are going to customize in this example).  Your inspector may display to the right or the bottom depending on your settings. In this screenshot, we have it set to display across the bottom.  Note by looking at the “label” tag properties to the right that the font-weight is 800.  We will change it to 300.

Take note of the HTML. A common question when customizing CSS for the WP-Members forms is, “What specific tag do I use to customize?” But all this information is in the Inspector for you. In this case, the form is wrapped with a div tag with the ID “wpmem_login” so we will specify #wpmem_login.  We will be customizing the HTML label tag so we’ll add “label” to our property.

In that definition, we will specify font-weight: 300;  Note that anything applied in the Customizer’s Custom CSS is loaded after any theme or plugin styles so that the Customizer CSS will be the priority (latest has priority) without the need for a messy !important property.  AND the Customizer Custom CSS is a live view so you’ll see what the change looks like right away.  That way you can make adjustments as needed without having the publish to see them.  But don’t forget to click “Publish” when you are done so that it saves your changes!

Once you publish your changes, they will be applied live.  If you log out of the Customizer and from WordPress and browse to the login page, you’ll see your change applied.

Use this feature to customize your forms and other elements in the plugin to blend more seamlessly with your theme without the need to create and load a custom stylesheet for the plugin.  Keep in mind that depending on the level of customization you are applying, working with an entirely custom stylesheet for the plugin may be necessary.  But for simple changes, use the Customizer.

Once the main list is implemented, if you wish to have detailed profile pages for each user, you can create a link to an optional detailed user profile page. For this feature, you will need to create a separate page and add the following shortcode:

[wpmem_ul_profile]

IMPORTANT: [wpmem_ul_profile] cannot be used alone. It is only used for displaying additional detail for a specific user from the main list.

To complete proper setup of the profile shortcode, you must define its location in the plugin’s settings. There is a selector in the admin panel for you to define a profile page (if used). Set this to the location of the page you have placed this shortcode on. The setting will create a link at the H2 heading in the main list that passes the user ID to the profile page.

Parameters for Profile Detail Shortcode

The profile shortcode accepts a number of attributes (see list below). Several of these are selectable in the plugin’s options and do not need to be defined in the shortcode unless you’re deviating from what you have set in the plugin’s options. Others are specific to the HTML displayed (such as div and span tags). There is default HTML defined, and it is not recommended to use these unless you have a specific reason to do so (such as integrating with your theme’s existing styles).

It is recommended that you use the bare shortcode with no attributes first and get as much of it configured and styled with the available options prior to applying any of the following attributes.

• fields – the fields that you wish to display for the user’s profile. These correspond to the option name (meta_key) of any fields you have set up in WP-Members. Values should be comma separated with no spaces (i.e. “user_login,user_email,first_name,last_name”) Example: [wpmem_ul_profile fields=”user_login,user_email,first_name,last_name”]
• show_empty – shows or hides empty fields. Defaults to true (show).Example: [wpmem_ul_profile show_empty=”false”]
• avatar – the numeric value of avatar size in pixels (i.e. 20 would make the displayed avatar 20px x 20px). Use a negative value for no avatar.Example: show a 80px square gravatar [wpmem_ul_profile avatar=”80″]
  Example: do not display a gravatar image [wpmem_ul_profile avatar=”-1″]
• labels – true|false – determines if the field names are displayed as labels (i.e. First Name: Bob). Defaults to false.Example: [wpmem_ul_profile labels=”true”]
• id – the numeric ID of a user for which the profile will be displayed. By default, this value is passed to the page in a querystring. But you can display a profile for a specific user by setting this value. Value should be an integer corresponding to a user ID in the wp_users table.
• div – true|false – determines if the fields should be wrapped with a <div> tag. Defaults to true.
• div_id – sets an id for the <div> tag (if used).
• div_class – sets a class for the <div> tag (if used). Defaults to “field-name”.
• span – true|false – determines if the fields should be wrapped with a <span> tag. Defaults to false.
• span_id – sets an id for the <span> tag (if used).
• span_class – sets a class for the <span> tag (if used).
• main_div_before – applies a <div> wrapper to the entire profile. Defaults to “<div id=”user-list-profile”>”.
• main_div_after – applies a closing </div> tag to the main wrapper set above. Defaults to “</div>”.  Should be the closing value of whatever is used in main_div_before.

Examples

This example would show fields with the meta keys first_name, last_name, user_email, and user_url.  It will show labels for these fields and if the field is empty it will still display the label with no value (indicating an empty field).  No avatar is displayed.

[wpmem_ul_profile fields=”first_name,last_name,user_email,user_url” show_empty=”true” labels=”true” avatar=”-1″]

This adds a shortcode that creates a list of users on a page. It has an optional search form and prev/next navigation links. You can set your list defaults in the plugin settings.  Go to the WP-Members Options and select the User List tab.

Settings

• Display list as – allows you to display the list in its standard view, or as a table.
• Role – determine the role of users to list. The dropdown will display all roles available, including any custom roles added.
• User IDs to Exclude – A list of User IDs (numeric) to exclude from the list display.
• Records per page – determines the number or users to be displayed per page.
• Include search form – check this if you would like to enable and display the search box.
• Local avatar – uses local avatar image instead of WP’s standard gravatar.
• Avatar size – the size in pixels of the user avatar.  Use a negative number for no avatar.
• Heading value – the record or value to display in the H2 heading for each user.
• Order by – the field to use to order the list. If you select “User Meta,” you can then select the meta to sort by. For either selection, you can sort ascending or descending.
• Show labels – can show no labels, the field names, or the meta key.
• Show empty – determines whether to show empty fields or not.
• Profile page – if you set up a more detailed user profile page with the optional profile shortcode, select the page in this selector so the heading value can link to it.
• Profile permalink – If “profile page” has selected a page for a detailed profile, this setting will allow you to choose the type of permalink used for user profiles.

Default display fields

Below the settings you will find a selection of fields to display.  This will determine which fields are displayed for the user records.  You can also determine which fields to use for the “search by:” list.  NOTE: for best results, it is recommended that you limit search fields to text fields only. This panel is for setting your own defaults for the user list shortcode.  However, you can override any of your default settings with parameters passed in the shortcode. There are several optional parameters that can be passed through the shortcode.

Implement the User List on a page