In this tutorial, we'll learn how to build a WordPress front-end user profile (card) with ProfilePress using the template below.
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
If users are logged in to the site, accessing
http://your site.com/profile/ will reveal their profile.
Click the Front-end Profile menu.
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.
Click the Preview Design button to see how the form will look.
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.
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.
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.
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:
user_id argument value in the url gives the actual user ID of that particular user, which is ‘101’ in the current case.