How to Create a Frontend WordPress User Profile Page - ProfilePress

How to Create a Frontend WordPress User Profile Page

When you install ProfilePress for the first time you are prompted to create pages for the smooth operation of the plugin. a custom user profile page is created for you during that process. However, if you dismissed that prompt or just want to create a custom, frontend WordPress user profile page, you should follow these instructions.

The page you are creating will contain a user profile shortcode. This page will display users information on the frontend of the website.

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 a username demo is accessible via https://yoursite.com/profile/demo. You can change the “profile” in the URL at Settings >> Frontend Profile >> Profile Slug.

If users are logged in to the site, accessing https://your site.com/my-profile/ will reveal their profile assuming the page with the user profile shortcode has a “my-profile” slug.

Building the Frontend User Profile

Follow the guide below to learn how to create a frontend user profile.

  1. Hover on ProfilePress and click on Forms & Profiles
  2. Click on Add New and select the “User Profile” as form type.
  3. Enter a name.
  4. Select your preferred template
  5. Design the profile.

You can preview how it will look like by clicking on the “Live Preview” button.

In the settings, depending on the template you chose you can change texts, headlines, colors and more. You can also display social media links and profile menu tabs.

After saving the profile, copy the generated shortcode.

Creating the User Profile Page

  1. Navigate to “Pages -> add new” in your WordPress dashboard.
  2. Create a new page and give it a title.
  3. Add the shortcode you copied earlier to the page content.
  4. Save the page

NB: If you are using Gutenberg Block Editor you need to add the Shortcode block then paste the shortcode in the field.

Finishing Up

After creating the page, you need to set the page as the default profile page in the Frontend Profile settings section of ProfilePress.

  1. Hover on ProfilePress and click on Settings
  2. Select the Frontend Profile Settings tab
  3. Under the “Page with Profile Shortcode” select the page you created above.
  4. Click on Save Changes.

That’s it ?