User List layout in columns

Here’s a tutorial on setting up a unique layout display for the User List extension. This tutorial will show you how to arrange the users in rows/columns similar to this screenshot.

I’ll be honest and tell you that this requires some php skills as you’ll need to be able to do some string manipulation via one of the filter hooks. You’ll also need to have some working knowledge of CSS. This tutorial will give you the basics to create a version of the display shown, which was done in the Twenty Fourteen theme – depending on your theme, your mileage may vary and you’ll need to know CSS to work with adjusting the layout.

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.

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

Tagged: explode, str_replace, user list, wpmemberuserlist, wpmem_ul_list_args, wpmem_ul_user_list

This topic has 6 replies, 2 voices, and was last updated 6 years, 6 months ago by Chad Butler.

Viewing 3 reply threads

Author

Posts
- August 6, 2014 at 1:15 pm #5559
  
  Chad Butler
  Keymaster
  
  Here’s a tutorial on setting up a unique layout display for the User List extension. This tutorial will show you how to arrange the users in rows/colu
  [See the full post at: User List layout in columns]
- August 13, 2014 at 10:59 am #5650
  
  pcurran
  Participant
  
  Hi Chad,
  1. From the tutorial above, please show how to apply the two code snippets?
  2. How should I call the resulting shortcode from a post?
  
  I really appreciate(beginner).
  - August 13, 2014 at 12:35 pm #5651
    
    Chad Butler
    Keymaster
    
    I’ll be honest with you – this is a fairly advanced tutorial. In general, I like to keep things a little more simple. However, this particular example was based on a specific question that I had from user and it was easier to post it as a tutorial than answer in an email.
    
    That being said, I think that most users will be able to duplicate at least the basic example, even with little php knowledge. But if you want to move beyond the basic example (or if you have to troubleshoot it), you are going to need some php knowledge.
    
    The two filter functions go in your theme’s functions.php file. This is pretty standard practice and unless otherwise indicated, examples on this site that involve add_filter or add_action will go there.
    
    The CSS can be done in a number of ways. The easiest for you is to probably add it to your theme’s style.css file. The UL extension does allow you to create and load a custom stylesheet, but I did create the example CSS so that it could be added to the theme stylesheet.
    
    Everything else is standard stuff; assuming you already have the User List extension installed, follow the notes at the beginning of the post regarding what settings I used.
- August 14, 2014 at 12:22 pm #5661
  
  pcurran
  Participant
  
  hi Chad,
  1. thanks for your assistance; user list is displaying in 3-colums; working fine.
  2. How can I get/configure the search portion “wpmem_ul_search_form”
  thank you.
  - August 14, 2014 at 1:52 pm #5662
    
    Chad Butler
    Keymaster
    
    You can enable search from the extension’s admin panel. It should still show even with the filters in this example applied.
- August 14, 2014 at 2:02 pm #5663
  
  pcurran
  Participant
  
  I do see the search form but searching is not happenning; it fails?
  thank you.
  - August 14, 2014 at 10:38 pm #5664
    
    Chad Butler
    Keymaster
    
    It’s important that you are setting up search for the correct fields. In the User List settings you can specify what fields can be searched. If you set up the User List as this example does, username and email are not displayed as part of the default example. But in the default search, if no search field is specified, username is the field that is searched. So if you are searching for a first name that is not the equivalent of an existing username, you will get empty search results.
Author

Posts

Viewing 3 reply threads

You must be logged in to reply to this topic.