• Skip to primary navigation
  • Skip to main content

RocketGeek

Home of WP-Members, The Original WordPress Membership Plugin

  • WordPress Plugins
    • WP-Members
      • FAQs
      • Quick Start
      • Documentation
      • Extensions
    • Advanced Options
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Download Protect
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Invite Codes
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • MailChimp Integration
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • PayPal Subscriptions
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Salesforce Web-to-Lead
    • Security
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Text Editor
      • Purchase the Plugin
      • Get the Pro Bundle
    • User List
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • User Tracking
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Memberships for WooCommerce
    • WordPass
  • Store
    • Cart
    • Checkout
  • Blog
    • Basics [Free]
    • Tips and Tricks
    • Filters
    • Actions
    • Code Snippets
    • Shortcodes
    • Design
    • Release Announcements
  • Contact
  • Sign In
  • Show Search
Hide Search
Home » User List » User List profile layout tricks

User List profile layout tricks

Chad Butler · Mar 14, 2014 ·

New in version 1.3 of the User List extension is the ability to have a detailed profile page, allowing you to have limited information in the main list with links to more detail.

The shortcode for the profile is easy to install and use. It allows for you to add specific IDs and classes that you can style with CSS to get the profile looking the way you want it.

This article is only available to WP-Members Support Subscribers. If you have an existing subscription, please login below. If you do not have a current support subscription, you can purchase a support subscription here.

Already a Member? Log In Here
   
Forgot password? Click here to reset

To gain full access to WP-Members premium content, a current support subscription is required. You can purchase an annual support subscription for as little as $59, which provides you with access to priority support, a customer support forum, access to code snippets, and more.

Why wait? Choose your subscription option here.

[
Why join?]

User List tips, user-list

Welcome to RocketGeek Interactive › Forums › User List profile layout tricks

Tagged: tips, user list

  • This topic has 33 replies, 8 voices, and was last updated 4 years, 6 months ago by Chad Butler.
Viewing 11 reply threads
  • Author
    Posts
    • March 14, 2014 at 3:03 pm #4373
      Chad Butler
      Keymaster

      New in version 1.3 of the User List extension is the ability to have a detailed profile page, allowing you to have limited information in the main lis
      [See the full post at: User List profile layout tricks]

    • March 19, 2014 at 4:00 am #4427
      jcuendet
      Participant

      Hi,

      I’m looking for a solution that helps me to display not only a limited number of fields such as email, name, avatar and address. I need to display all fields in the profile, is it possible?

      Thanks
      Jerome Cuendet

      • March 19, 2014 at 2:17 pm #4433
        Chad Butler
        Keymaster

        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”]]

    • April 30, 2014 at 8:55 pm #4808
      gapao
      Participant

      Do you have any tricks to show the field name on profile detail page?

      Thanks,
      Hidde

      • April 30, 2014 at 9:18 pm #4809
        Chad Butler
        Keymaster

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

    • April 30, 2014 at 10:38 pm #4810
      gapao
      Participant

      Thank you for rapid reply!

      I want to display that like…

      <div>field label</div></div>field value</div>

      Do you have any hacks or filters for this?

      Thanks.

    • May 1, 2014 at 9:11 am #4812
      gapao
      Participant

      I found an idea for hack.

      user-profile.php

      Line:100 Separate the label and value;

      $show_label = $label . ': ';
      change to
      $show_label = $label . '</div><div class="class_name">';

      Line:114 Add a new class to label;

      $rows[$field]['div_before'] = ( $div ) ? '<div' . ( ( $div_id ) ? ' id="' . $field . '"' : '' ) . ( ( $d_class ) ? ' class="' . $d_class . '"' : '' ) . '>' : '';

      change to
      $rows[$field]['div_before'] = ( $div ) ? '<div' . ( ( $div_id ) ? ' id="' . $field . '"' : '' ) . ( ( $d_class ) ? ' class="my_class_name ' . $d_class . '"' : '' ) . '>' : '';

      Just idea.
      Thanks.

      • May 1, 2014 at 12:45 pm #4816
        Chad Butler
        Keymaster

        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.

    • May 7, 2014 at 7:55 pm #4829
      gapao
      Participant

      Wow! Thank you very much, Chad.
      I’ll try this idea on my site, and it must be able to apply another hacks.

      • May 7, 2014 at 10:38 pm #4830
        Chad Butler
        Keymaster

        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.

    • July 24, 2014 at 10:08 am #5422
      econstreams
      Participant

      Where do I place the custom CSS for the user list? I have no idea where to even begin.

      • July 24, 2014 at 10:26 am #5423
        Chad Butler
        Keymaster

        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.

        • July 24, 2014 at 11:10 am #5425
          econstreams
          Participant

          Hey Chad!

          Thanks for the speedy reply. Dug into all that material and learned quite a bit about CSS. I got it working by setting up a child theme and overwriting the old css rules.

          • July 24, 2014 at 11:15 am #5427
            Chad Butler
            Keymaster

            No problem. Glad you got things setup and working – that was really fast!

          • July 24, 2014 at 11:19 am #5428
            econstreams
            Participant

            Thanks a lot. I just followed the links you provided. Pretty straightforward. I appreciate the support.

    • August 6, 2014 at 5:52 pm #5563
      inetinitiatives
      Blocked

      Hi Chad,

      I’m sure I’m having this problem because I’m just not that experienced with CSS, however I can’t get any of my user profile detail edits, including just using your example above, to make any changes to that page’s display.

      I’ve included all the fields in the shortcode for the page that I want to display and that’s working properly. I tried adding your CSS above to the new stylesheet that I created and that I’ve identified in the WP-Member Options tab (which IS affecting the layout of the User List layout with other changes that I made using your provided code examples and those work just fine) but with no results for my detailed profile. I’m literally just copy/pasting your code into the stylesheet.

      I also thought maybe these edits should go into my child theme primary stylesheet, but no effect occurred when I tried it there either.

      I appreciate any help you can offer.

      Best regards,

      —Anji

      • August 7, 2014 at 9:30 am #5568
        Chad Butler
        Keymaster

        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.

    • August 22, 2014 at 6:01 pm #5691
      inetinitiatives
      Blocked

      That did the trick Chad, thank you!

    • September 1, 2014 at 3:04 am #5737
      mdt26a
      Participant

      Hello,

      I’m trying to produce a user profile using the following:

      [wpmem_ul_profile div_class=”field-name” avatar=”150″ fields=“user_login,first_name,last_name,institution,city,country,user_email,user_url,description,user_registered”]

      where I have some new custom fields, and I’ve updated the CSS in the way you do above.. (suitable modified for the new fields).

      However, I want each field (apart from first_name, last_name) to be on a new line, but they’re not, and I’m not seeing how to make it do that. Could you advise?

      Thanks,
      Mike

      • September 1, 2014 at 10:37 am #5738
        Chad Butler
        Keymaster

        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;
        }
        • September 2, 2014 at 4:26 am #5739
          mdt26a
          Participant

          Hi Chad,

          OK – cool, that works! Thanks very much.

          However, my profile pages still aren’t displaying properly:

          i.e. the fancy green title incorporating the user_login doesn’t display at all, nor does
          user_registered, and the first_name/last_name is indented with respect to everything else.

          Any ideas? This is produced with:

          [wpmem_ul_profile div_class="field-name" 
          avatar="150" fields=“user_login,first_name,
          last_name,institution,city,country,
          user_email,user_url,description,
          user_registered”]

          and the following CSS

          #user-list-profile .avatar {
              float:right;
              margin-top: 20px;
          }
          
          #user-list-profile .user_login {
              width:100%;
              height: 40px;
              background: #24890D;
              color:#fff;
              font-weight: bold;
              font-size: 24px;
              padding: 12px;
              border-radius: 8px;
                  margin: 0 0 15px 0;
          }
          
          #user-list-profile .last_name {
                  margin: 0 0 0 12px;
          }
          
          #user-list-profile .first_name {
                  float: left;
                  margin: 0 4px 0 12px;
          }
          
          #user-list-profile .first_name,
          #user-list-profile .last_name {
                  font: 22px bold;
          }
          
          #user-list-profile .institution {
                  font-style:italic;
          }
          
          #user-list-profile .city {
                  font-style:italic;
          }
          
          #user-list-profile .country {
                  font-style:italic;
          }
          
          #user-list-profile .user_email {
                  margin: 10px 0 0 0;
                  font-style:italic;
          }
          
          #user-list-profile .user_url {
                  font-style:italic;
          }
          
          #user-list-profile .description {
                  margin: 10px 0 0 0;
                  font-style:italic;
          }
          
          #user-list-profile .user_registered {
                  margin: 10px 0 0 0;
                  font-style:italic;
          }

          Thanks,
          Mike

          • September 2, 2014 at 12:55 pm #5751
            Chad Butler
            Keymaster

            It’s important to remember that there could be other CSS properties from your theme being inherited. My example was done on the default WP theme, so your mileage may vary.

            That being said, I’m surprised the user login background color wouldn’t show since that is specifically defined, but you’d need to look at things directly on the site to see for sure. Using the inspector in Chrome or FireFox is helpful for this because you can see what properties are defined and which properties are being attributed and if any are overridden.’

            I am pretty sure you could adjust the margins for first_name to move it to the left. My example has a 12px indent to position it where I needed it. Based on other layout elements in your theme, you may need to change that.

          • September 3, 2014 at 9:42 am #5768
            mdt26a
            Participant

            OK – I figured it out.. If you look at this:

            [wpmem_ul_profile div_class="field-name" 
            avatar="150" fields=“user_login,first_name,
            last_name,institution,city,country,
            user_email,user_url,description,
            user_registered”]

            you’ll see that the quotation marks before user_login and after user_registered are not actually quotation marks, but are ‘pictures of quotation marks’ like Microsoft smart quotes or whatever. I must have picked these up by mouse copying off your website or something.. Ah well.. Hmmmm..

            Incidentally, if I wanted to modify the output of e.g. ‘user_registered’ from ‘some random meaningless date’ to ‘Registered since: date’ how would I do it?

            Sorry to bore you with these probably trivial questions – I’m in the process of learning, as you can see..

            Thanks,
            Mike

          • September 4, 2014 at 1:49 pm #5799
            Chad Butler
            Keymaster

            The ‘random meaningless date’ is actually the raw format that WP uses in the wp_users table. If you were using PHP’s date function, the format mask of this raw value is “Y-m-d H:m:s”.

            You can change this to whatever format you like with a little bit of PHP magic.

            The user profile rows are passed through the wpmem_ul_profile_rows filter before display. Each field being displayed is a key in the array where the key value is the option name (meta key) of the field.

            So for the field “user_registered”, that’s your array key to the value in the array. In the code example, it is this:

            $user_registered = $rows['user_registered']['field'];

            You can use a couple of PHP functions to convert this to the format you want:

            • strtotime – to convert the raw date to a Unix timestamp
            • date – to format the Unix timestamp to the format you want to display

            In the example, I am using these two functions to take the $user_registered value we grabbed above and format the date as MM/DD/YYYY like this:

            $nice_date = date( "m/d/Y", strtotime( $user_registered ) );

            The format mask I used (m/d/Y) can be changed to other possibilities. Here are some examples:

            • “F j, Y, g:i a” would look like March 10, 2001, 5:16 pm
            • “m.d.y” would look like 03.10.01
            • “D M j G:i:s T Y” would look like Sat Mar 10 17:16:18 MST 2001

            Lastly, you can put the newly formatted value back into the array:

            $rows['user_registered']['field'] = "Registered since: $nice_date";

            Putting it all together, that looks like this:

            add_filter( 'wpmem_ul_profile_rows', 'my_ul_profile_date_format' );
            function my_ul_profile_date_format( $rows ) {
            	
            	// the raw date from wp_users
            	$user_registered = $rows['user_registered']['field'];
            	
            	// reformat the raw date to some other format
            	$nice_date = date( "m/d/Y", strtotime( $user_registered ) );
            	
            	// put the newly formatted date in to the array
            	$rows['user_registered']['field'] = "Registered since: $nice_date";
            
            	// in the upcoming 1.5 version, "label" is a separate array key
            	//$rows['user_registered']['label'] = 'Registered since: ';
            	//$rows['user_registered']['field'] = $nice_date;
            	
            	return $rows;
            }

            Hope that helps.

    • March 17, 2016 at 3:15 pm #9795
      AFTN
      Participant

      I’m sorry for my request may seem ridiculous, but I am new to html and French is my mother tongue which complicates a little understanding.
      But in what css file do you integrate that code? Anywhere ?
      I joined because the code in my style sheet (style.css), but no visual changes were made.

      Thank you for your answer

      • March 17, 2016 at 9:05 pm #9798
        Chad Butler
        Keymaster

        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.

    • August 23, 2016 at 2:49 pm #11144
      dzhome
      Participant

      Hi Chad,
      I want to add a link to the full frame profile picture by clicking the avatar. How can I implement that? Thank you.
      Cheers, Dirk

      • August 23, 2016 at 5:14 pm #11146
        Chad Butler
        Keymaster

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

        • August 24, 2016 at 3:15 pm #11157
          Chad Butler
          Keymaster

          I thought some more about this and it would seem apparent in the scope of the post and the thread that we are talking about the avatar image in the user profile.

          Here’s an example of my basic approach:

          add_filter( 'wpmem_ul_profile_rows', 'my_profile_rows' );
          function my_profile_rows( $rows ) {
          	
          	/**
          	 * I used the new wpmem_get() function to retrieve the User ID from the query string.
          	 * see: https://rocketgeek.com/plugins/wp-members/docs/api-functions/wpmem_get/ ).
          	 */
          	$user_id = wpmem_get( 'uid', false, 'get' );
          	if ( $user_id ) {
          		
          		/**
          		 * I used WP's get_avatar_url to get the URL of the avatar image.
          		 * see: https://developer.wordpress.org/reference/functions/get_avatar_url/
          		 */
          		$source = get_avatar_url( $user_id );
          		
          		// Apply the link
          		$link_before = '<a href="' . $source . '">';
          		$link_after  = '</a>';
          		$rows['avatar']['field'] = $link_before . $rows['avatar']['field'] . $link_after;
          	}
          	
          	// Return $rows
          	return $rows;
          }
           
          • August 30, 2016 at 11:25 am #11204
            dzhome
            Participant

            Chad, this is perfect! Thanks a lot! Exactly what I was looking for!
            Cheers, Dirk

          • August 30, 2016 at 11:33 am #11205
            dzhome
            Participant

            Oh no sorry, I found out that I only get the link to the Avatar, which is in my case normally the monster for the users. But when they have changed their Avatar (using the Plugin WP User Avatar) by their own picture, it will not appear using the link. Always the monster will be shown, despite whether they have uploaded another profile picture.

          • August 30, 2016 at 1:14 pm #11206
            Chad Butler
            Keymaster

            Ahhh… then instead of get_avatar_url() (which is a WP function), you want to use get_wp_user_avatar_src() which is a WP User Avatar function.

            The function accepts the user ID just like get_avatar_url(). It also accepts the size as either number of pixels square (i.e. “96”) or “original”, “large”, “medium”, or “thumbnail”. But I don’t know if the size argument is required or not and if omitted what the default is – you’d have to test that out or find out from WP User Avatar.

            But I suspect you could use it like this:

            
            $source = get_wp_user_avatar_src( $user_id, 'large' );

            There is more documentation on the available functions here (Note: they indicate the parameters for get_wp_user_avatar_src() are just like get_wp_user_avatar() with the difference being that the _src function returns the direct URL to the attachment/file, which is what you want to create the link in the example):
            https://wordpress.org/plugins/wp-user-avatar/installation/

          • August 30, 2016 at 1:36 pm #11209
            dzhome
            Participant

            Perfect Chad, thanks a lot for your support! It’s working!

          • August 31, 2016 at 9:06 am #11214
            Chad Butler
            Keymaster

            Glad to hear that worked!

  • Author
    Posts
Viewing 11 reply threads
  • You must be logged in to reply to this topic.
Log In

Ready to get started?

Join Today!

© 2021 · butlerblog.com · RocketGeek is built using WordPress, WP-Members, and the Genesis Framework

  • butlerblog.com
  • WP-Members Support Subscription
  • Terms of Service
  • Refund Policy