All Posts

Quick WordPress Profile Pages post

The ability to quickly build pages is an important feature of a Content Management system. While WordPress provides an easy and familiar way to add content to the web, the standard post editor does not provide a means of structuring the content within the page. The Content editor does offer HTML options for formatting, but nothing in the way of layout.

There are many plugins that allow a site owner to visually build layouts within WordPress. Actually, there are very many plugins that do this (Chris Lema has put together a great comparison of page builders). Page builders offer a flexibility that a theme cannot (except for Caliber by Parallelus).

Quick Profile Page

Today I want to walk through the process of setting up a quick profile page in WordPress. I will be using the following plugins:

  • Beaver Builder is a drag-and-drop page builder that allows you to build precise layouts, quickly.
  • User Shortcuts Plus provides simple shortcodes for displaying information about the user.
  • Restrict Content adds a page setting to restrict content to logged-in users.

First, we set a row with a 2 column layout with Beaver Builder. The left column will display the user's avatar and the right column will display the user's account information.

The avatar can be added one of two ways, either by using the [ user_avatar ] shortcode, or by using the photo module with the [ user_avatar_url ] shortcode as the image URL.

The text editor module provides a rich text editor, similar to the WordPress content editor. Here the user shortcodes can be used to display the user's first name, last name, email address, display name, etc.

Being that the profile page is a logged-in user only feature, we can restrict the page's contents and require a minimum user role of subscriber (or the most basic user role for your site).

Also, since the User Shortcuts Plus plugin defaults to the current user, the profile page will display user information for the user that is visiting the page.

[gallery link="file" size="large" columns="2" ids="1159,1160"]

You can also specify a user by ID, which is great for building out quick user directory pages, or displaying team members without the need for a team member specific plugin and/or custom post type.

Another Example: User Directory

User Shortcuts Plus accepts an optional id attribute, which will return information about the specified user. This makes building a user directory very easy.

First, I add a new row with a multi-column layout, then add a the text editor module. Once the per user layout setup, the module can be duplicated and modified for another user.

[gallery columns="2" link="file" size="large" ids="1161,1162"]