Member Links Filter Advanced Demo

Here is an advanced demonstration of what you can do with the links filter hooks in WP-Members.  For this example, we are going to add some content to the Members Area page (created with the [wp-members page=”members-area”] shortcode. 

We will be making use of several WP native functions. It is important to remember that there is a lot of power in WP. Familiarizing yourself with the WP Codex is definitely recommended if you want to be able to leverage the power of WordPress without having to reinvent the wheel (something I see A LOT of).

What we will create in this example will add the username, a gravatar image, some and some registration details to our members area page.  It will look something like the image here.  For the example we will be using the TwentyTen theme.

Adding a filter

To add a filter, generally you will add some code to your theme’s functions.php file.  Open that up to get started.

We will add the wpmem_members_links filter and apply a new function to filter the generated content (which amounts to the bulleted links you normally see).

add_filter( 'wpmem_member_links', 'my_member_links' );
function my_member_links( $links )
{
  return $links;
}

So the filter will fire the function “my_member_links”, which is where we will filter the generated content, which we are passed to the function.  We are calling those $links.  Right now, our function doesn’t do anything except return the $links as they were – unfiltered.

Let’s add some content

We want to show some things like username and maybe a gravatar.  We can get most of what we need with the WordPress function called get_currentuserinfo which puts the current users information into the $current_user object.  That will get us things like the username and anything directly stored in the wp_users table (like the user’s email and website). This is one reason why the WP-Members plugin includes the native WP user fields.

add_filter( 'wpmem_member_links', 'my_member_links' );
function my_member_links( $links )
{
   // get the current_user object
   global $current_user;
   get_currentuserinfo();

   // show the user info
   $str = '<div id="theuser">
       <h3 id="userlogin"><span style="color: white">' . $current_user->user_login . '</span></h3>
       <dl id="userinfo">
       <dt>Member Since</dt>
       <dd>' . $current_user->user_registered . '</dd>
       <dt>Website</dt>
       <dd><a class="url" href="' . $current_user->user_url . '" rel="nofollow">' . $current_user->user_url . '</a></dd>
       </dl>
     </div>
     <hr />';

   // tag the original links on to the end
   $string = $str . $links;

   // send back our content
   return $string;
}

OK. Now our filter function is starting to take on some shape.  You can see now how we are using the $current_user object to display native user data.

Now we’ll add a gravatar using the WP function get_avatar (and assuming you have your WP settings set to use gravatar images).  And the date is rather ugly when displayed raw and unformatted, so we’ll break that out and format it with the php date function.  We will also get the user’s city and state that is stored in the wp_usermeta table using get_user_meta.

This is probably a good place to remind you that any of the WP-Members custom fields are also stored in the wp_usermeta table.  You can retrieve any of these values using get_user_meta where the meta key is the option name from the WP-Members fields table.

Here is our function now utilizing these additional elements:

add_filter( 'wpmem_member_links', 'my_member_links' );
function my_member_links( $links )
{
// get the current_user object
global $current_user;
get_currentuserinfo();

     // format the date they registered
$regdate = strtotime( $current_user->user_registered );

// and the user info
$str = '<div id="theuser">
<h3 id="userlogin"><span style="color: white">' . $current_user->user_login . '</span></h3>
        <div id="useravatar">' . get_avatar( $current_user->ID, '82' ) . '</div>
          <dl id="userinfo">
          <dt>Member Since</dt>
          <dd>' . date( 'M d, Y', $regdate ) . '</dd>
          <dt>Website</dt>
          <dd><a class="url" href="' . $current_user->user_url . '" rel="nofollow">' . $current_user->user_url . '</a></dd>
          <dt>Location</dt>
          <dd>'
            . get_user_meta( $current_user->ID, 'city', true )
            . ', '
            . get_user_meta( $current_user->ID, 'thestate', true )
            . '</dd>
          </dl>
        </div>
        <hr />';

     // tag the original links on to the end
     $string = $str . $links;

     // send back our content
     return $string;
}

Now we our filter is starting to look like something.  You could really use it as is here.  But let’s pretty it up a little bit first.

Apply some style

We’ll add a little CSS to our HTML output here just to give this some nicer looking layout.

[Click to get a phps file with the style formatting I used in the example screenshot.]

Well, that’s it.  You’ve learned how to use some native WordPress functions to pull user data, how to display it, and how to filter the WP-Members Members Area links content using the wpmem_member_links filter.