User Profile Pages in Bricks

This Pro tutorial provides the steps to repurpose author archives as public user profile pages in Bricks.

Sample screenshot of

example.com/user/sridhar

:

The above is the screenshot of an author archive page which typically resides at URLs like example.com/author/sridhar out of the box where sridhar is the Nickname of the user when editing the user profile. Steps to change the author base from author to user or if you want, to a different string like profile are included.

Here we are outputting the author’s

• Display name
• Website (under Contact Info)
• custom contact methods in the user profile (under Contact Info)
  • Twitter
  • Facebook
  • Pinterest
  • Instagram
• Biographical Info (under About Yourself)
• Profile Picture (under About Yourself)
• Country (custom text-type of user field)
• Skills (custom Repeater-type of user field)

whilst ensuring that the elements are rendered only if they are not empty.

Step 1

Let us change the author base in WordPress so that author archives are available at /user instead of at the default, /author.

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

// Change the author base so that author archives are available at /user instead of at the default, /author.
add_filter( 'init', function() {
	global $wp_rewrite;
	$wp_rewrite->author_base = 'user';
});

If you would like the author base to be some other string like “profile”, change user in the above to profile.

Go to Settings → Permalinks and save changes.

An alternative to the above step with additional functionality is the Edit Author Slug plugin.

Step 2

Let us extend the default WordPress profile fields by adding custom fields where users can fill in their Twitter (handle), Facebook, Pinterest and Instagram URLs.

Add another snippet of code.

add_filter( 'user_contactmethods', 'bl_new_contactmethods' );
/**
 * Add custom social fields in User Profile page in WP admin.
 */
function bl_new_contactmethods( $contactmethods ) {
	$contactmethods['twitter'] = 'Twitter (w/o the @)';
	$contactmethods['facebook'] = 'Facebook URL';
	$contactmethods['pinterest'] = 'Pinterest URL';
	$contactmethods['instagram'] = 'Instagram URL';

	return $contactmethods;
}

You can of course add/modify the above or omit this step all together, as needed.

Step 3

Let’s add a couple of custom fields to the user profile pages in the WP admin.

In this example, we are using ACF Pro with the Location meta box set to User Form = All.

Step 4

Edit your profile page for testing and populate some fields.

Step 5

Create a Bricks template of “Archive” type and set a template condition such that the template applies to author archive pages.

Copy this JSON and paste it in the editor.

Things of importance:

Author name:

{author_name}

URL of Image for showing the Author avatar:

{author_avatar}

Author bio text:

{author_bio}

Website user profile field’s value:

Country ACF custom field’s value:

Twitter icon Dynamic data URL:

Condition applied to this icon:

and similarly for facebook, pinterest and instagram.

Condition applied to the container (parent) of social icons:

Save the template and view the profile page on the frontend. Remember that the URLs will be in this format:

example.com/user/sridhar