• 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 » Create a Table Style Layout for the User List Extension

Create a Table Style Layout for the User List Extension

Chad Butler · Mar 14, 2014 ·

user-list-table-layout.fwI recently was asked if the User List extension could display a table style layout with links to a more detailed user profile. My initial thought was “Great idea. How can we do that?”

CSS is a powerful tool, and with a little bit of CSS here, and a very simple filter (only for the heading), you can have a table style layout for the user list that looks like the screenshot to the left.

The screenshot was taken from the my test of how to put together such a customization. To be very honest, it took me less than 30 minutes to put this together – and that’s working from scratch. I’ll show you in this post exactly what I did, so while it might take you a little time to read, it should take you only a few minutes to implement. 

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, wpmem_ul_style_path, wpmem_ul_user_list

Welcome to RocketGeek Interactive › Forums › Create a Table Style Layout for the User List Extension

Tagged: tips, user list, wpmem_ul_style_path, wpmem_ul_user_list

  • This topic has 34 replies, 9 voices, and was last updated 2 years, 5 months ago by Chad Butler.
Viewing 17 reply threads
  • Author
    Posts
    • March 14, 2014 at 12:04 am #4356
      Chad Butler
      Keymaster

      I recently was asked if the User List extension could display a table style layout with links to a more detailed user profile. My initial thought was
      [See the full post at: Create a Table Style Layout for the User List Extension]

    • July 15, 2014 at 6:38 pm #5356
      Jason
      Participant

      Could I limit this list to users that are marked as Active?

    • July 15, 2014 at 10:42 pm #5358
      Chad Butler
      Keymaster

      Yes – if you are using moderated registration, active users will have a meta key “active” with a value of 1. So you could add the meta_key/meta_value parameters to your shortcode:

      [wpmem_ul meta_key=”active” meta_value=”1″]

      (Update: Since most people have search enabled and generally try to sort by a meta field such as last name, this method has certain limitations in those situations. This post discusses a query filter that will overcome those issues and is probably better for the widest range of uses.)

    • July 16, 2014 at 12:54 pm #5367
      Jason
      Participant

      Nice, this is exactly what I was looking for. Damn it I love WP-Members. I’m implementing nearly all of these little tips and I’ve neglected to read the finer details of each. I’ll do that now.

      • July 16, 2014 at 7:51 pm #5373
        Chad Butler
        Keymaster

        Glad you are liking the plugin Jason!

    • August 26, 2014 at 12:05 pm #5702
      novusweb
      Participant

      For some reason, this filtering is not not working for us.

      I’ve tried [wpmem_ul meta_key=”active” meta_value=”1″], yet all users appeared, even the inactive ones.

      I also tried [wpmem_ul meta_key=”first_name” meta_value=”Anne”], but it still showed all users, not just the user whose first name is Anne.

      Is there a setting or such that I may be overlooking?

      • August 26, 2014 at 2:23 pm #5703
        Chad Butler
        Keymaster

        I made a change in the last version to some of the logic that involves setting certain fields for search, filtering for meta values, etc. This change was implemented to provide additional functionality that was a user request.

        It appears that the change I made actually broke some basic functionality involving filtering by meta key/values.

        I’ll need to take a look at this block of logic and come up with a fix that correctly accommodates all the possibilities.

    • August 26, 2014 at 2:35 pm #5704
      novusweb
      Participant

      Thanks for the reply.

      Do you know of any workaround we could use in the meantime to only show active members?

      • August 26, 2014 at 6:34 pm #5705
        Chad Butler
        Keymaster

        I think the change will be as follows:

        In the file wp-members-user-list.php at line 154, you will find the following block of code:

        /** add search/meta elements to the user query */
        if( ! $search_by ) {
        	$the_user_query['search']         = $search_term;
        	$the_user_query['search_columns'] = array( 'user_login', 'user_nicename', 'user_email' );
        } elseif( $search_b == 'user_login' || $search_b == 'user_email' ) {
        	$the_user_query['search']         = $search_term;
        	$the_user_query['search_columns'] = $search_b;
        } else {
        	$the_user_query['meta_key']   = ( $search_b )    ? $search_b    : ( ( $meta_key ) ? $meta_key : '' );
        	$the_user_query['meta_value'] = ( $search_term ) ? $search_term : ( ( $meta_val ) ? $meta_val : '' );
        }
        

        Change that to this:

        /** add search/meta elements to the user query */
        if( ! $search_by ) {
        	$the_user_query['search']         = $search_term;
        	$the_user_query['search_columns'] = array( 'user_login', 'user_nicename', 'user_email' );
        } elseif( $search_b == 'user_login' || $search_b == 'user_email' ) {
        	$the_user_query['search']         = $search_term;
        	$the_user_query['search_columns'] = $search_b;
        }
        
        $the_user_query['meta_key']   = ( $search_b )    ? $search_b    : ( ( $meta_key ) ? $meta_key : '' );
        $the_user_query['meta_value'] = ( $search_term ) ? $search_term : ( ( $meta_val ) ? $meta_val : '' );
        

        Please report back on how this performs.

        (Also, after you let me know about that, I will break this conversation out to a new thread for the support forum – it’s kind of off-topic where it is now – not a big deal; I just want to let you know in case you need to find it later.)

    • September 8, 2014 at 3:23 pm #5819
      msargenttrue
      Participant

      Hi Chad,

      I’m also trying to limit the User list to active members. I tried the shortcode by itself first:

      [wpmem_ul meta_key="active" meta_value="1"]

      Then I tried the wp-members-user-list.php change mentioned above.

      I’m still getting results that include inactive members.

      Any ideas?

      Thanks,
      Mike S

    • September 8, 2014 at 10:36 pm #5821
      Chad Butler
      Keymaster

      Hi Mike,

      Since this thread opened up, I’ve put together a filter that actually works a little better and cleaner than adding this as a meta parameter in the shortcode.

      add_filter( 'wpmem_ul_user_query', 'my_user_query_filter' );
      function my_user_query_filter( $query ){
      	
      	/** 
      	 * meta_query for displaying only active users 
      	 */
      	$meta_query = array(
      		0 => array(
      			'key'     => 'active',
      			'value'   => '1',
      			'compare' => '='
      		),
      	);
      	
      	/**
      	 * check if we are doing a search and if so, add to the
      	 * meta_query to include search parameters, then clear
      	 * the meta_value so it does not conflict.
      	 */
      	if( isset( $_REQUEST['Submit'] ) && ( strpos( $_REQUEST['Submit'], 'Search' ) !== FALSE ) ) {
      
      		$sb = ( isset( $_REQUEST['sb'] ) ) ? $_REQUEST['sb'] : false;
      		$sm = ( isset( $_REQUEST['sm'] ) ) ? $_REQUEST['sm'] : false;
      
      		if( $sb && $sm ) {
      			$meta_query['relation'] = 'AND';
      			$meta_query[1] = array(
      				'key' => $sb,
      				'value' => $sm,
      				'compare' => 'LIKE'
      			);
      			$query['meta_value'] = '';
      		}
      	}
      	
      	/**
      	 * add the meta_query
      	 */
      	$query['meta_query'] = $meta_query;
      	
      	/**
      	 * return the filtered query
      	 */
      	return $query;
      }

      The main problem with doing it in the shortcode is that limits you from being able to search by or order the list by a meta key since that meta key will take the place of “active” in the query, resulting in a query of all users.

      The filter above solves this by overriding the default query and allowing a more complex user query.

    • September 10, 2014 at 3:28 pm #5837
      msargenttrue
      Participant

      Awesome! The my_user_query_filter appears to work well. I cross-checked it with my database and the User List is only showing members with active=”1″ and also people who are not specifically excluded from it ( Using the mod here: https://rocketgeek.com/forums/topic/showinghiding-users-in-the-user-list-by-checkbox-field/ ).

      Thanks,
      Mike S

    • September 15, 2014 at 5:21 am #5869
      chavalu
      Participant

      Thanks for this. It’s a great start. Since I’m added many more fields to my user list I want to add more columns but I know CSS so I should be able to do that on my own.

      The thing that I’m having trouble is- each of the user’s info is showing up with the heading- ex: First Name- Sam (and I only want it to show Sam).
      Your help is greatly appreciated.
      Thanks!

    • September 15, 2014 at 9:54 am #5873
      msargenttrue
      Participant

      Hi chavalu,

      I was able to resolve this in my User List with the following settings:

      WP-Members > User List Tab > User List Settings > Heading value: First Name / Last Name
      The First and Last name will show up in the heading without any labels.

      WP-Members > User List Tab > User List Display Fields: Make sure List is unchecked for “First Name” and “Last Name”
      This will remove the First Name / Last Name labels and values from the list of fields for that user.

      • September 15, 2014 at 10:14 am #5874
        Chad Butler
        Keymaster

        Actually, this sounds like “Show labels” is set to “Yes”. It should be set to “No”.

        I didn’t mention this in the original post, but I’ll update it to reflect that.

        • September 15, 2014 at 10:27 am #5878
          msargenttrue
          Participant

          I should have clarified, for my setup that I described: First Name / Last Name show in the heading without labels but the rest of the fields show up with labels. So it sounds like it depends on if chavalu wants all labels hidden or just the name labels hidden.

    • September 23, 2014 at 4:20 am #5957
      chavalu
      Participant

      Hi! Me, again.
      I’ve added several custom fields to WP-Members. I’ve added them to my user list table but they’re appearing out of order, not matching the titles that I’ve configured in the functions file. How would I change this?
      (I’m guessing it’s somewhere in the wp-members-user-list.php file?)

      Thanks!

      • September 23, 2014 at 9:59 am #5958
        Chad Butler
        Keymaster

        I’ve added them to my user list table but they’re appearing out of order

        Actually, there is always an order, so it’s just not being ordered by the field that you think it’s being ordered by.

        The default for the WP’s User Query (and thus, the User List extension) is to order by the user login field (regardless of whether you are displaying that field or not).

        In the User List settings tab, there is a set of selectors for “Order by”. The first one allows you to select the orderby parameter. Only if you select “User Meta” from this list will the next two dropdowns apply.

        If you select “User Meta”, then you need to select which meta field from the second dropdown to indicate which meta field you will order the list by.

        It is important to note that if you are filtering your list by a meta field, you cannot order it by another without implementing a custom query filter as mentioned above. Applying a custom query via a filter function does allow you to use more complex queries.

    • May 14, 2017 at 7:13 am #12985
      Diana Burr
      Blocked

      I am using this tip & trick to create a table layout of my members. I have it working with a couple of test rows and I’m showing the fields I want to show. It works perfectly. But I realized after I implemented it that I really have a different need than what this tip and trick or user list extension was intended for. I wanted to use it to display members of my association and not really users of the WordPress site.

      I have the members directory right now in an excel file which I planned to import using a CSV import plugin.

      So, after I do the import, is is it possible to show everyone I import in this list who aren’t activated as registered members by the admin? Or do they have to be activated in order to appear in the list? Does that make sense? So, I want to be able to show users who haven’t been activated by me (admin). Then if a member wants to view the list, then they would have to be activated.

      Please let me know if this is doable with this plugin or should I be using another method to display my members directory. I really hope not because I love your plugin!

      • May 15, 2017 at 8:15 am #12994
        Chad Butler
        Keymaster

        While the association members need to be WP users to be displayed in the list, that doesn’t necessarily mean they have to be “users” of the site. But yes, you’ll need to import them.

        For displaying the list, you can display all users or just activated users. It sounded like you want to display non-activated users? I’m sure that can be done, but I’ll need to look at how to filter the query for that. So maybe if you can clarify things on what exactly you want to display in the list.

        Then, to view the list, if you put it on a page that is blocked, to view it the user would need to be activated (and logged in).

        Hope that helps.

    • September 6, 2017 at 3:05 pm #13618
      SkiptonGC
      Participant

      I have this setup and working well but there is one slight drawback – display on mobile devices. As I have a responsive theme, what happens on smaller devices (or when narrowing a browser on desktop) is that the header and content columns compress to different widths, knocking out the alignment.

      I’ve tried to think of some different solutions but haven’t managed to implement anything. These are my ideas:

      1. Rather than use the CSS table display property, could the list be output into a normal HTML table? I realise this might go against good web design principles but it might be easier to adapt for the smaller screen!

      2. Somehow use the CSS overflow property to have a horizontal scrollbar when the table is wider than the screen. I’ve tried implementing this with a fixed DIV width but cannot get it to work.

      3. Use something like CSS data tables (https://datatables.net/) to handle the display of the data.

      For background, I am implementing a member directory for a golf club so it will be used extensively on mobile devices for looking up playing partners. At the moment, I just cannot deploy the directory as-is due to the mobile display problems.

      Really hoping you might be able to come up with an elegant solution.

      Many thanks.

      • September 7, 2017 at 9:01 am #13619
        Chad Butler
        Keymaster

        Actually, if you want to develop a mobile responsive layout, the CSS table display is the way to go. HTML tables are rigid and cannot reflow text. If you want something for a moble display such as on a phone, you’ll most certainly need to reflow the layout for smaller screens.

        Let me see what I can come up with.

        • September 27, 2017 at 3:09 pm #13662
          SkiptonGC
          Participant

          Hi Chad

          Just wondered if you had made any progress on this one?

          Many thanks.

          • September 28, 2017 at 11:00 am #13664
            Chad Butler
            Keymaster

            1. Rather than use the CSS table display property, could the list be output into a normal HTML table? I realise this might go against good web design principles but it might be easier to adapt for the smaller screen!

            Actually, using an HTML table would lock you into a table layout – which on a smaller screen would not reflow and would not be workable. (It would also require a much more complicated filter on the provided layout as you’d be completely changing the existing generated HTML output)

            Using the CSS table display property is much better for mobile use because in a smaller screen environment you can reflow and display in a non-table layout when that becomes a better option. (That’s actually the approach that I’ve given in the example provided below)

            2. Somehow use the CSS overflow property to have a horizontal scrollbar when the table is wider than the screen. I’ve tried implementing this with a fixed DIV width but cannot get it to work.

            One important thing to point out about giving examples like these is that there are elements that will/can be inherited from other stylesheets. Also, depending on how you approached it would depend on how (and if) it is displayed. Different phones use different browsers which have different handles for defining scrollbars.

            3. Use something like CSS data tables (https://datatables.net/) to handle the display of the data.

            I think you mean jQuery rather than CSS. While CSS is applied there, it is an example of a jQuery library – far beyond the example provided here. Could something like that be implemented? Probably, but it would be much more complex and time intensive to produce.

            So to add to the exact example provided in the post, the following CSS could be added to it in order to handle smaller mobile screens (added to the end of the original CSS in the article):

            @media screen and (max-width: 460px) {
            	#wpmem-ul-list-heading,
            	#wpmem-ul-list {
            		display: block;
            		width: 100%;
            	}
            
            	#wpmem-ul-list .wpmem-ul-user,
            	#wpmem-ul-list .wpmem-ul-user-odd {
            		display: block;
            		height: auto;
            		padding: 10px;
            	}
            
            	#wpmem-ul-list-heading {
            		display: none;
            	}
            
            	#wpmem-ul-list h2,
            	#wpmem-ul-list .first_name,
            	#wpmem-ul-list .last_name,
            	#wpmem-ul-list .country{
            		display: block;
            		padding: 2px 4px;
            		margin: 2px 4px;
            	}
            
            	#wpmem-ul-list h2,
            	#wpmem-ul-list .first_name,
            	#wpmem-ul-list .last_name,
            	#wpmem-ul-list .country {
                        width: 100%;
            	}
            }
          • October 25, 2017 at 3:08 pm #13766
            SkiptonGC
            Participant

            Hi Chad

            I finally got around to giving this a try and it’s working well! Thanks for the code.

            The only issue I have is that on medium sized screens (i.e. before the @media section is triggered) each of the heading columns resizes at different widths to the columns containing the data.

            Can you think of a way to tie the heading and data columns together in some way such that when the table resizes, the headings and data remains aligned?

            Hope that makes sense.

            Thanks.

          • October 26, 2017 at 8:58 am #13769
            Chad Butler
            Keymaster

            The only thing I can think of would be that the text in either the heading or the table is pushing things out (whichever has a longer text string). That may require adding an intermediate definition to adjust for that.

            If you do something for screens at 720px, that’s about the size of an iPad:

            @media screen and (max-width: 720px) {
            
            }

            I’d probably look at text size and margin/padding values.

    • May 16, 2018 at 4:30 am #14753
      Thomas Kirk
      Participant

      Hi Chad

      I’ve followed your example and everything is working now I want to display optional meta_key values in my table style layout. As soon as I enter the meta_key in the [wpmem_ul] tag fx [wpmem_ul meta_key=mymetakey”] nothing is showing on the page? Im unsure on how the filters and css is related to the meta_key fields?

      • May 16, 2018 at 7:10 am #14754
        Chad Butler
        Keymaster

        If you’re adding a field to be displayed, that’s part of the “fields” attribute. “meta_key” is only used if you’re filtering or ordering the list by a meta key value (which would require also the order_by or meta_val attributes).

        Unless you’re setting up multiple instances of the list, all attributes can and should be set in the User List tab. So in this case, if what you want to do is add a field to be displayed, that should be checked in the “List” column in the “User List Display Fields” section.

        Hope that helps.

        • May 16, 2018 at 9:08 am #14755
          Thomas Kirk
          Participant

          Ok – I understand. The strange thing is my data does not align with the heading in the stylessheets? Any ideas?

    • September 4, 2018 at 2:08 am #15349
      FARA
      Participant

      Does this filter also accept list_id? I looked at the plugin and it looks like it does. Could you verify? Thank you.

      • September 4, 2018 at 9:33 am #15353
        Chad Butler
        Keymaster

        The ‘wpmem_ul_user_list’ filter does accept the list ID argument.

        The ‘wpmem_ul_style_path’ does not. ‘wpmem_ul_style_path’ runs in the document head, so any instance of the list is not yet known, so it wouldn’t be possible to identify a list ID for that. So if there are style issues in a site that is running multiple list instances where not all would apply these custom styles, then an alternate method of handling styles would be required.

        Hope that helps.

    • September 18, 2018 at 12:38 am #15387
      FARA
      Participant

      Chad,
      Now that I understand what is going on I would like to build a relative path to the css I created (thanks to you I totally get it now). In examples you show pretty much absolute path except where you are calling a function to get the directory. As a practice I don’t like them and we too are going to https: as well as the url where I am developing it is different as well. It would be nice to know what this sees as the current directory. The .css will be going into the child themes style folder. That will be fixed. So would “../mystylesheet.css” work or it might be “../../directory/stylesheet.css”. I think you understand what I would like to do. I also could be getting too fancy too! Your thoughts appreciated. Kevin

      • September 18, 2018 at 6:44 am #15388
        Chad Butler
        Keymaster

        I think you understand what I would like to do. I also could be getting too fancy too

        You’re not getting too fancy. You’re actually moving the direction you should be.

        Doing it the best way adds an extra function and that confuses a lot of people, so most of the time I’m showing a full URL. But you should use get_stylesheet_directory_uri() to get the URL to your stylesheet. That will give you the http or https URL for your current theme directory (even if it’s a child theme). If you change your theme later, it will change (so you don’t have to update the code). And if you change your site settings to https later, it will change with you.

        Here are some examples:

        
        get_stylesheet_directory_uri() . '/mystylesheet.css';
        
        get_stylesheet_directory_uri() . '/directory/stylesheet.css';
        

        Hope that helps.

    • September 18, 2018 at 10:02 am #15394
      FARA
      Participant

      Thanks Chad. I saw that one, I wasn’t sure if it was returning the stylesheet directory for the theme or the plugin’s. I should have look up the function I guess. Thanks!

      • September 18, 2018 at 10:37 am #15396
        Chad Butler
        Keymaster

        No problem! I probably should use it more on the site as it’s definitely a “best practice” to use that instead of a full URL – it makes your custom code more portable.

  • Author
    Posts
Viewing 17 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