User List profile layout tricks

Hi Jerome,

I don’t have total documentation complete yet, but yes – you can display any field in the profile that is not an array (meaning, it is not limited to only fields you have in WP-Members).

Any fields you want displayed in the profile should be passed in the “fields” parameter, separated by commas. For WP-Members fields, these are the “option name” for the field. These would correspond to the meta key value from wp_usermeta, so if there is data you want to display that is not a field from WP-Members field manager, you can still display it as long as the value is a string.

[[wpmem_ul_profile div_class=”field-name” avatar=”125″ fields=”user_login,first_name,last_name,addr1,city,country,zip,phone1,user_email,user_url”]]

Yes – if you pass the argument labels=true in the shortcode it will display the field labels in front of each field.

I would advise against that approach. You really should never make changes to the core code because it leaves you in a situation where you can’t upgrade without reapplying your hack. WordPress, WP-Members, and many other plugins make use of filter and action hooks to allow you points in the code where you can create your own external customizations. This is much preferred over changing the code directly since you can just add your custom filter/action functions to your theme’s functions.php file (which is what that file is for). That way your changes are not overwritten when you upgrade the plugin.

The shortcode allows you to pass both a div and a span wrapper for the entire field (not the label and the field value separately). Using that would be the easiest (although it wraps the entire row and it seems you want to wrap the two elements separately). I’ve updated the list of the all shortcode parameters for the profile shortcode here.

There is a filter applied to the profile rows – wpmem_ul_profile_rows. If the above doesn’t get exactly what you want, the next best approach would be to use this filter. The problem here is similar to the above which is the label and the field value are together – but that issue is not insurmountable.

If you can wait a little, the 1.5 version in development actually does break these out into two separate elements, which would allow you to do a simple filter like this:

add_filter( 'wpmem_ul_profile_rows', 'my_profile_rows_filter' );
function my_profile_rows_filter( $rows )
{
	foreach( $rows as $key => $row ) {
		$row[$key]['label'] = '<div class="my-label-class">' . $row[$key]['label'] . '</div>';
		$row[$key]['field'] = '<div class="my-field-class">' . $row[$key]['field'] . '</div>';
	}
	// return the result
	return $rows;
}

I don’t have a specific time that 1.5 is expected to be released, but it won’t be too long – some time in May for sure.

The current version 1.4, you need to break the field value apart first so that you can wrap the label and the field value separately:

add_filter( 'wpmem_ul_profile_rows', 'my_profile_rows_filter' );
function my_profile_rows_filter( $rows )
{
	foreach( $rows as $key => $row ) {

		// check if the field contains a label (with ":")
		if( strpos( $rows[$key]['field'], ':' ) ) {

			// split the field value into an array at the ":" character
			$split = explode( ":", $rows[$key]['field'] );	
			
			// the first part is the label, the second is the value.
			// reassemble accordingly.
			$label = '<div class="my-label-class">' . $split[0] . '</div>';
			$field = '<div class="my-field-class">' . $split[1] . '</div>';
			
			$rows[$key]['field'] = $label . $field;
		}
	}

	// return the result
	return $rows;
}

Hope that helps.

Yes – there are a lot of other filters and actions in the plugin that allow you to apply custom functions. You can find a full list here.

There are several approaches to including custom CSS.

The most simple approach would be to add this to your theme stylesheet. (On a side note here, it is best if you are using a child theme to hold your customizations. There is some info on that here.)

Another place you could add this would be to your WP-Members stylesheet (if you are using a custom stylesheet – if not, I would not advise this since you would overwrite your customizations when the plugin is updated). There is some info on how to create a custom stylesheet for the plugin here and information on different ways to load them here.

You could also add this to a custom stylesheet for the User List. This can be loaded with the wpmem_ul_style_path filter. Since this involves all the styles for the User List – not just these customizations – I would suggest copying the stylesheet you are using for the User List as a starting point. Then you can add your customizations in there.

Hi Anji,

Sorry to hear you’re having trouble with this. You mentioned that you copy/pasted the CSS exactly as displayed here. Are you using the exact same fields as well? That will make a difference because the class names will be the option names of the fields.

Assuming that’s not the issue, another thing to check would be looking at your theme. The CSS provided assumes that the profile is displayed within the .entry-content class. Perhaps your theme does not use this class or uses another. A possible solution to try would be to replace all instances of .entry-content with #user-list-profile in the example.

Hope that helps.

Hi Mike,

All fields should naturally display on a new line. So to clarify, some of the CSS above is to get certain fields to be on the same line. That’s part of why the float and width specifications are what they are. So after the .avatar and .user_login properties, you probably want to make sure you only specify width/margin properties for first_name and last_name. Hopefully, this will help get you started:

.entry-content .last_name {
	margin: 0 0 0 12px;	
}

.entry-content .first_name {
	float: left;
	margin: 0 4px 0 12px;
}

.entry-content .first_name,
.entry-content .last_name {
	font: 22px bold;
}

.entry-content .user_email {
	font-style:italic;
}

Some of this example depends on the field names used and other parts depend on your theme. So unlike some posts where I am able to give cut-and-paste code, this one is more general in nature and requires a little bit of knowledge of how CSS works.

All of the classes the example are specified like this:
.entry-content .first_name
Where the field’s option name is “first_name”

So make sure that the classes for the fields are the correct values (the option name from the fields tab).

The other part is .entry-content

This may not be the same class in your theme (and probably isn’t, which is likely why you are seeing no change when you add this to your styles.css).

Look at the main div wrapper for your theme’s content area. If the class name isn’t “entry-content” then change this to whatever that class is in your theme.

Hope that helps.

Are you thinking of the main user list? Or on the detailed user profile?