1) Create Front-End Profiles, Forms or Courses… 2) Smile.

Get a free WP Checkup Today!
Get a completely free health check of your WordPress site, no email or signup required.

Have you been looking for a WordPress user plugin that can enable your users to enter and update data from the front-end of your site? You can stop chasing your tail and start grinning now, ‘cuz the User Meta plugin has got you covered!

Download from WordPress.org | More Info at User-Meta.com

Let’s start by having a chew on one of the main features of the User Meta plugin, then see what other cool stuff we can do with it.

Update user profile info from the front-end

A lot of us don’t want our users in the back-end of our sites, but do want them to have access to some of the functionality. One of the easiest things you can accomplish with this WordPress user plugin is enabling your users to edit and update their profiles on the front-end of your site. This information is most often used to display author bios on posts and pages, but you can use this data anywhere and any way you like really.

Although there is a premium version of User Meta available with a bunch of extra field types and options, the freebie has teeth enough for most projects. The field types available in the free version of the plugin give you everything you need to create a front-end form for your users.

Simply select the fields you need in the Fields Editor under the new User Meta menu item in your site’s admin area. Then set the options for each created field. You can define an unlimited number of each field type for several different needs or projects. Note the built-in password-strength meter that can be selected in the “Password” field.

Once all your fields are set up, create a new form in the Forms Editor and drag the fields you need to your new form. Each field can be used in an unlimited number of forms. That’s right, unlike many other front-end form plugins, User Meta does not restrict fields to any single form. Once you’ve set them up, you can use them over and over again in different projects!

Then add the appropriate shortcode to a page or post to display the profile form for your users (e.g. [user-meta type=’profile’ form=’your_form_name’] ).

The information entered in your frontend profile form updates the user profile in your WordPress backend, as well as the info that is shown in the post author box (included in most themes).

There are several ways to display your forms or data

The User Meta plugin saves data to the wp_usermeta table. Plus, this WordPress user plugin can not only update the data in default fields in that table, it creates new field entries for each custom field you create. (The wp_usermeta table in your WordPress database is where all the data pertaining to individual users of your site is stored. That includes data such as ID, user_login, user_pass, user_nicename, user_email, etc.)

There are several ways that data from the wp_usermeta table can be called, entered, updated or otherwise manipulated:

  • As seen in the example above, custom forms that you create with User Meta can be easily inserted into any page or post with a simple shortcode.
  • You can call data from the wp_usermeta table in your theme templates by using default WordPress functions (e.g. get_userdata(), get_user_meta() or get_currentuserinfo() ).
  • Install another cool plugin – User Meta Shortcodes – to display data from individually specified fields via shortcodes in your pages and posts.
  • Or try the Shortcode Exec PHP plugin to build your own shortcode with the WordPress functions noted above, and use that in your pages or posts… with no template edits. (See also a write-up I did a while back on this plugin: Writing php code to your WordPress posts and pages the safe way)

Built-in WordPress functions to call your data

As noted above, you can easily use the data from the wp_usermeta table in your theme templates, or in custom shortcodes you build with the Shortcode Exec PHP plugin. There are several default WordPress functions you can use to do so, for example:

The functions get_userdata() or get_user_meta() can be used to display stuff for a specified user as in this example from the WordPress codex:

<?php $user_info = get_userdata(1);
      $username = $user_info->user_login;
      $first_name = $user_info->first_name;
      $last_name = $user_info->last_name;
      echo "$first_name $last_name logs into her WordPress site with the user name of $username.";
?>

The above code added to your theme template would output something like this on your page:

Harriet Smith logs into her WordPress site with the user name of mrssmith.

If you need to display data pertaining to the currently logged-in user, use the get_currentuserinfo() function. Note that you need to call the $current_user global also. Again, here’s an example borrowed from the codex:

<?php global $current_user;
      get_currentuserinfo();

      echo 'Username: ' . $current_user->user_login . "\n";
      echo 'User email: ' . $current_user->user_email . "\n";
      echo 'User first name: ' . $current_user->user_firstname . "\n";
      echo 'User last name: ' . $current_user->user_lastname . "\n";
      echo 'User display name: ' . $current_user->display_name . "\n";
      echo 'User ID: ' . $current_user->ID . "\n";
?>

The code above would output something like this in your template:

Username: Zedd
User email: my@email.com
User first name: John
User last name: Doe
User display name: John Doe
User ID: 1

My favorite: get_currentuserinfo()

By using the get_currentuserinfo() function to call your custom User Meta fields inside some basic WordPress conditional tags, you can create just about anything you want with this WordPress user plugin. Here’s an example of how you can display a form with the logged-in user’s private information to the logged-in user only, and display an error message for everyone else:

<?php global $current_user;
      get_currentuserinfo();
            if(!is_user_logged_in()):
                  echo '<div id="message" class="error"><p>You do not have permission to view this private member information.</p></div>';
            else:
                  if (!$current_user->my-custom-user-meta-field-key == '') {
                  echo '<p>This user-meta value is:' . $current_user->my-custom-user-meta-field-key . '</p>';
                  }
                  if ($current_user->my-custom-user-meta-field-key == '') {
                  echo '<p>Please complete this field</p>';
                  echo do_shortcode('[user-meta type="profile" form="My User Meta Form"]');
                  }
            endif;
?>

I got really excited when I found this plugin! Here’s what happened next…

My excitement distracted me so much that it’s been several days since my last post here on WPMU.org (sorry boss!).

Kidding aside, I’ve used the User Meta plugin as one of the cornerstones to build a course consisting of a series of daily exercises designed to be completed by users over a period of 15 weeks. Each exercise is on its own WordPress page and comes with a form that can be toggled open to display “Private Notes”, and a select-box to mark the exercise as “Done” when it’s completed. (For this project, I used toggle shortcodes from the Shortcodes Ultimate plugin. For more, see also Cool WordPress shortcode plugins to snap your blog into style.)

A custom BuddyPress component (coded and added via bp-custom.php) then serves as a private area where logged-in users can keep track of exercises they have done, and those still to be done. Once a current week’s series of exercises have been completed, a “Weekly Summary” form can be toggled open. Only when that form is completed does the subsequent week’s series of exercises appear and become accessible.

A sub-page in the private area serves to compile and display information the user enters in the Weekly Summaries once each week’s exercises are completed.

The next thing I’ll be integrating into this project is a User Meta form in each row of the table illustrated above with a date-picker. That will enable users to set a deadline for each goal they set for themselves. Then it’s on to integrating a bit of drag-and-drop jQuery magic so users can re-order the table rows to keep their goals and deadlines in whatever order they wish. Loads of fun!

Once I’ve completed all the above, I’ll write up a nice tutorial on how to get it all done (and update this post with a link). Then you can create something amazing too! If you beat me to the punch, and build something cool before I post a tut, please brag about it in the comments below :-)

Here are those links again to this fabulous WordPress user plugin (is your mouth watering yet?)

Download from WordPress.org | More Info at User-Meta.com

Get a free WP Checkup Today!
Get a completely free health check of your WordPress site, no email or signup required.

21 Responses

    Pete Davenport

    Patrick, this is awesome, and I want to co-opt this to support MarketPress and BuddyPress, but I can’t get my head around it.

    Here’s is the problem I’m having, on a MarketPress/Multisite/Buddypress install, I recently had customer (actually a customer from one of my sellers) ask how she could update her stored address. She doesn’t own a subsite and so had no access to her dashboard user profile. I had to do it manually. Users who own a subsite can just be directed to their dashboard to make the update, normal buddypress members who shop on the network have no facility to do this themselves.

    It looks like MarketPress uses user_meta to store shipping and billing addresses. Could you tinker around and see if it would be possible to add subsection to the BP users settings page on the front end (using bp-custom.php) where a system similar that you’ve done above could display their current address settings, as well as provide a form to update their address information?

    This is something that is missing from MarketPress, but your post here really got thinking that this may be solution, but I don’t write code so I’m having trouble visualizing the complete solution using your method.

      Patrick Cohen

      Hiya Pete,

      Users should have the opportunity to update their shipping information every time they place an order. See the screenshot linked/attached below. Do you not see this screen immediately after clicking the “Checkout Now” button?

      http://i45.tinypic.com/2qn1pg4.png

      I may have misunderstood your question though. :-(

    Pete Davenport

    Yeah,I’m aware that customers can update when they checkout the next time they shop, but I’m also thinking about information privacy and transparency. Meaning that at any time, a user could log into the network and see what information we have about them, and then choose to change, or delete it. I think it makes for good practice in functionality.

      Patrick Cohen

      Hi again Pete,

      Ah, I understand you now. Of course, the data can be called from the database. It can then be displayed in a form in a custom BuddyPress component.

      The challenge would be to separate each bit of serialized data, as all the field values in the shipping info is serialized and stored in a single meta-key.

      I’d have to do a bit of research on the subject. Probably contact the plugin developer too for some inside info.

      Allow me a few days to see what I can come up with, but it can definitely be done (anything that can be saved to a database can be retrieved).

      :-)

    Marcia Hutchinson

    I just installed and then uninstalled this plugin because in the free version, there is no way to set up registration or login– at least that I could find. I need a plugin that will do login/registration AND profile building from the front end. In the version I installed, it clearly said that login, registration, etc. are only functions of the Pro version. Cuts down its utility big time, in my book. Did I miss something obvious?

    Patrick Cohen

    Hi Marcia,

    You are absolutely right, login and registration are features only available in the pro version. However, the flexibility of this plugin extends far beyond such standard functions.

    I believe your goal can be met with the Profile Builder plugin, as it is designed exclusively for login/registration and profile updating, all from the front-end of your site.
    http://wordpress.org/extend/plugins/profile-builder/

    Hope this helps! :-)

      Marcia Hutchinson

      Thank you, Patrick. I actually did try that plugin before, and I can’t remember the reason I didn’t end up keeping it. I will give it another shot. I’m working on a user-generated site and am using Gravity Forms (and having a hard time understanding getting a handle on it). I only have the personal version, so it doesn’t come with the registration functionality. I need to have authors login from the front end and then create a profile that will ultimately end up as the Author’s Bio. I hope this one fills the bill. Thanks.

        Patrick Cohen

        Hi again Marcia,

        I see no reason why you can’t use both.

        Profile Builder for its simple login and registration short-codes.

        User Meta for profile updating. The big advantage of User Meta is that you can add custom fields to the front-end profile form and then call that form anywhere you like with the following shortcode
        [user-meta type=”profile” form=”Your User Meta Form Title”]

        You get the best of both without shelling out!

          Marcia Hutchinson

          I guess I’m back to the drawing board. I installed both plugins Profile Builder and User Meta, and just spent the last 2 hours trying to get them to work. They seem simple on the surface, but the instructions are really impossible to understand, and the order of steps is very confusing. In the end, for the login/registration part I couldn’t seem to get rid of elements that I didn’t want there in spite of “hiding” them in the admin. I could get the login OK, but if I wanted to also have the registration part, a lot of other crap came along with it.

          User Meta is very unclear in its instructions. I tried to follow them, but keep getting an error message “Form Not Found) on the destination page (no matter how I write the shortcode). And there only seems to be a way to add a new form, not to return to the one you (think) you already added. So all in all I’m back to square one and still looking for a simple front end login/registration and profile builder that will create an Author’s bio to attach to my Gravity Forms post. Why is everything always so much more confusing than it needs to be. If only technical people(who create the plugins) knew how to write decent instruction for their products, the world would be a better place.

    emilio_gagliardi

    Hi there,

    Great article thank you! I’ve just installed User Meta Pro and I’d love a little guidance about how to proceed with my project.
    I have a three classes of Users, A:B:C. I want to create ‘view only’ profile pages that are nicely formatted (not the ugly linear template that comes bundled with User Meta) and I want to create editable profile pages (same style) where each class can edit their specific variables. What I’m thinking is creating different CSS classes for the same form fields, one class for editable so it looks editable, and one class for ‘locked’ where the data is ‘greyed’ out and not editable.

    I also want to create a User Listing page sortable by class type (A:B:C). Any visitor can view the user list and click on a link that takes them to the appropriate profile page. If they are logged in, they can edit their own profile.

    Can you provide some guidance on how I can best achieve the above? I’m a little confused about how to script my own profile page in terms of modifying functions.php and such.

    Thanks again!

    Patrick Cohen

    Hi Emilio,

    Coding a member directory from scratch is a beast of an idea! Have you seen the Members Directory plugin from WPMUdev?

    Using that plugin will get you most of the functionality you are looking for. Although you would need to customize it a bit so it calls additional profile fields you may want displayed (it only displays ‘Website’ and ‘Bio’ from user profiles).

    Another powerful alternative for a directory is the Member List Plugin by Matthew Praetzel.

    The User Meta plugin can then be used to create all the custom profile fields you want, as well as the front-end editing form that your logged-in users can navigate to by clicking an “Edit your profile” link. You could place that anywhere on your site, coded to conditionally show only when logged-in.

      emilio_gagliardi

      Patrick, thank you!
      My first concern is making two new profile pages with my own styling because the default linear template used by User Meta is too ugly to use as-is.
      My first question is, with User Meta Pro, do I still need to make changes to functions.php in order to get access to the Meta Variable?
      Second, will the Member List plugins you’ve suggested above pass query string variables for the userID?
      Do you have a complete example I could take a peak at by chance?

      thanks again for your time and support.

        PONKO

        Hi again Emilio,

        By using one of the plugins suggested for your directory (which would display your users’ profile info), you would only need one “Edit profile” page (which would display the User Meta input form).

        So, to your questions…

        1) User Meta (free or Pro) is simply a form-builder with a very specific purpose: to create and update fields in the wp-usermeta table in your database. How that data is called depends on your need. The User Meta shortcodes simply display the data entry forms that you can style any way you like with CSS.

        If you need to call and display specific user profile info anywhere on your site, the yes, you’ll need to create a function for that. Use the get_userdata() or get_user_meta() functions. If you need to display profile info for the currently logged-in user, use the get_currentuserinfo() function. The easiest way to use any of these functions is to simply hook them to an add_action in functions.php, then use a do_action in whichever template you want. For more on this, see add_action and do_action from the WP codex, and this much simpler explanation.

        2) If you use either of the plugins suggested for a directory, they automatically redirect to a user profile page when you click any entry (I believe the template used is author.php). The profile page will automatically display the appropriate user’s profile info. So, passing query variables to the URLs is unnecessary. They likely use a built-in WP function like get_users, but I haven’t looked at the code, so can’t say for sure.

        3) Unfortunately no, I don’t have an example directory coded. But if you need more help with your project, I’ll be around.

        Hope this helps! :-)

    emilio_gagliardi

    Hi Patrick,
    Thanks very much for your thoughtful comments. The reason I want two separate profile pages is because the user roles have different meta data associated with them. For example, a student wouldn’t have data regarding where they received their credentials or a list of locations where they currently teach. So I thought it made more sense to create separate user profile pages instead of adding a bunch of conditionals around form fields, and then call the appropriate user profile page depending on the user role associated with a particular userID.

    I’m going to dig deeper into the template that user meta uses to see what’s going on there.

    Cheers,

    Adam

    Hi Patrick,

    I just came across this excellent post, and wonder if you did publish a tutorial with this info? I am brainstorming how to build something similar with User Meta, Buddypress and exercise tracking, and a tutorial showcasing your process would be extremely helpful.

    Any suggestions? Thank you!

    Jas

    Thanks for the article, Patrick. I think I’m in love with this plugin you’ve been touting, but I can’t seem to get it to play nice with Buddypress and interface with xprofiles. I’m not a techie, so please please please help me figure out how to do get the User Meta plugin to work with xprofile fields, or this love affair will go down in flames before it even gets started.

    Thank you!

    jas

Comments are closed.