In this tutorial, we'll learn how to build a WordPress front-end user profile (card) with ProfilePress using the template below.

See the Pen User profile by Agbonghama Collins (@collizo4sky) on CodePen.

Before we go into the tutorial proper, it is worth noting how the front-end user profile works.

The URL to a user profile with username demo is accessible via http://yoursite.com/profile/demo. If users are logged in to the site, accessing http://your site.com/profile/ will reveal their profile.

Click the Front-end Profile menu.

Click the Add New button.

Enter a name for the user profile card in Template Name field.

The HTML and CSS code for the password-reset form will go into the Page Design and CSS Stylesheet textareas respectively.

Memories profile card

CSS for Memories profile card

Click the Preview Design button to see how the form will look.

Memories profile card preview

The profile component or data will have to be replaced by their ProfilePress shortcode equivalents

Below is the final revision of the Login form code.

<div class="sc-user-profile">
  <img class="avatar" src="[profile-avatar-url]" />
  <div class="username">[profile-first-name] [profile-last-name ]</div>
  <div class="bio">
    [profile-cpf key="country"]
  </div>
  <div class="description">
    [profile-bio]
  </div>
  <div class="data">
    <span class="entypo-heart"> Profiles Details</span>
  </div>
  <div class="left">Username</div>
  <div class="right">[profile-username]</div>
  <div class="left">Email</div>
  <div class="right">[profile-email]</div>
  <div class="left">Gender</div>
  <div class="right">[profile-cpf key="gender"]</div>
  <div class="left">Website</div>
  <div class="right">[profile-website]</div>
</div>

Replace the code earlier entered into the Page Design textarea with the revised code above.

Save and then click the Back to Catalog button.

Copy its shortcode, paste it to a WordPress page and publish.

User profile catalog

Preview the page to see the profile card.

Be sure to let ProfilePress know about the page containing this profile shortcode if you wish to make it the default profile theme for your website users.

A live demo is available here.

If you don't wanna go through the stress of building a custom user profile for your site; happy to inform you that ProfilePress ships with some great looking profile themes and also well as separate themes.

Note

You can display/embed a specific user profile anywhere on your WordPress site by adding a user-id attribute to the shortcode like so:

[profilepress-user-profile id="9" user-id="3"]

Where "9" is the ID of the user profile theme created and "3" the user assigned WordPress ID.

You can get the ID of any user of your site by following the guide below.

  • Log into your WordPress admin.
  • Go to Users > All users.

  • Choose the user and go to his profile.
  • Look at the URL of the page:

The user_id argument value in the url gives the actual user ID of that particular user, which is ‘101’ in the current case.