There are various ways to create and customize WordPress user profiles in ProfileGrid, from using prebuilt user profile themes to building your user profile your way. In this guide, we will demonstrate how you can easily build your user profiles on WordPress and WooCommerce your way, using shortcodes. With this method, you can surely take your user experience to a different level.
Our approach: Instead of building a custom profile builder, we decided to utilize the drag-drop and block features of popular page builders such as Elementor, Guttenberg, King Composer, and so on. Then, we created shortcodes for each element of a user profile. These elements are shown below in the article. You can now use these shortcodes, add them to blocks of page builders, and design your user profile your way.
What are User Profiles in ProfileGrid?
ProfileGrid user profiles can be public or private. You can showcase public profiles to everyone, or selectively restrict the content of user profiles as per your requirements. There are many other element visibility features that you can view on our core feature page.
How to Build User Profiles using Elementor and Gutenberg Block Editor
With ProfileGrid shortcodes, it is easier to create user profiles on Elementor and Gutenberg. The shortcodes are dynamic meaning they would work with any page builders and Gutenberg editors. ProfileGrid offers many drag-and-drop blocks in page builders and Gutenberg.
This is how you can create user profiles in Gutenberg:
- Go to the dashboard of your website.
2. Click on Pages and Add New.
3. Copy and Paste the required shortcodes from here WordPress User Profiles Shortcodes List – ProfileGrid, add these shortcodes to the blocks and build fantastic user profiles.
You can also drag and drop ProfileGrid blocks as per your needs. Just search for ProfileGrid and you will be able to see all the ProfileGrid blocks.
And here is how you can create user profiles in Elementor.
- Go to Pages and then Add New.
- Select Edit with Elementor (needs installing and activating elementor from the plugins dashboard)
3. Select Text Editor, and drag and drop on the page builder. Copy and Paste all the shortcodes you need in the text editor field.
4. Click on Publish.
Like the Gutenberg editor, ProfileGrid also has drag-and-drop blocks in Elementor too. You just need to have Profile Elementor Integration installed and activated from here Elementor Integration – ProfileGrid.
Simple Ways to Create User Profiles in WordPress and WooCommerce using Shortcodes
ProfileGrid has many customizable shortcodes. They can be used to create user profiles in WordPress the way you want. Each and every element of the user profile can be customized using advanced shortcodes. So let’s take a look at how you can create user profiles and customize them according to your liking.
The best part of creating user profiles with these shortcodes is that they can be used anywhere. No matter what page builder you are using or what Gutenberg block builder you are using, the shortcodes will work everywhere.
Here’s how you can find all the shortcodes mentioned in this guide.
Go to ProfileGrid -> Shortcodes -> Here you will find basic and advanced shortcodes. We will be using the shortcodes mostly from the advanced sections.
Here’s how to use the shortcodes to create user profiles in WordPress and WooCommerce
-
Display complete User Profile
Shortcode: [profilegrid_profile]
This shortcode will display the complete user profile. Using this shortcode, you can easily create a user profile page in WordPress. Through this shortcode, you’ll be able to showcase the complete user profile including profile image, cover image, groups assigned to, user-published blogs, messages, and notifications.
This is how the complete user profile will look like.
2. User Display Name
Shortcode: [profilegrid_user_display_name]
If you just want to show the User name, use this shortcode. It is useful if you don’t want to show any other information about the user to others.
3. Messaging
Shortcode: [profilegrid_messaging_area]
In case you want to display only the messaging area, you can utilize this shortcode. It will only display the messaging section of the profile. The messages sent and received will be done as usual.
4. User Cover Image
Shortcode: [profilegrid_user_cover_image]
This shortcode will add a cover image. It is one of the elements that provide a vivid look and feel to the user profiles.
5. User First Name and User Last Name
It will allow you to display the user’s first name only.
6. Notifications
Shortcode: [profilegrid_notification_area]
The notification area is a great element to have on your memberships and community website. The messaging and notifications shortcode can be used simultaneously to give a full-fledged experience to the users on your website. The notifications shortcode works seamlessly and provides instant notification as soon as one comes.
7. Group Page
Shortcode: [profilegrid_group gid=”x”]
Another best shortcode to use if you are running a communities and memberships website that consists of groups. It will display all the groups the user is part of.
Moreover, details such as group description and total members of the group can also be shown. In addition, it will also show the option to leave the group. Aprt from that, it will also display all the members of that particular group and the discussions the user had with them.
8. Blog Submission
Shortcode: [profilegrid_submit_blog]
Through blog submission the user can submit blogs. In the title field, the headline of the blog can be inserted. The description field can be used to post the actual blog content with all the formating options. You can also insert tags in the tags field. Additionally, using the Image field, Images can be uploaded to showcase in the blog. Lastly, the content restriction feature allows to handle the visibility of the blog content.
9. User Blogs
Shortcode: [profilegrid_user_blogs uid=”x, y, z” wpblog=”true”]
If you want to display the blogs that you have submitted on your profile, this is the shortcode to go for. To create user profile with elements like these, really takes your website to another level. The user blog also displays all the other blogs posted by the users from the start date. Moreover, it also shows the number of comments received on all the blogs posted.
10. Settings
Shortcode: [profilegrid_settings_area]
The settings shortcode will enable user profile settings option. Throught this you can edit account details like first name and last name. Moreover, using the Change Password option, you can easily recreate a new password. In addition, the Privacy option will let you set the visibility of the user profile. Lastly, the delete account will let you delete the user profile from the settings option itself.
The shortcode [profilegrid_account_options] can be used to show only the account details if required. And to only show Change Password option [profilegrid_password_options] shortcode can be used.
11. Unread Notification and Message count
Shortcode:[profilegrid_unread_notification] and [profilegrid_unread_messages]
These shortcodes can be used to showcase the number of pending notifications and messages. This is a very handy feature if you are managing a big website that consists of many members and subscribers. The unread notification and messages count elements are a tiny tool that will help you keep track of your unread notifications and messages.
12. About
Shortcode: [profilegrid_user_about_area]
This tiny code allows you to display the About section of the user profile. There are couples of options such as Personal details and Professional details that can be edited using the edit profile button.
13. Groups
Shortcode: [profilegrid_user_groups_area]
The groups shortcode will let you display all the groups the user is part of with the details like Group name and description. Moreover, there is also an option to directly go to the groups settings using the small settings icon on the right hand side next to the group name. A very useful option if you have a large membership site that consists a lot of members that are part of multiple groups and communities.
14. Group Member Cards
Shortcode: [profilegrid_members_cards gid=”x”]
In case you just want to show a list of all the members belonging to a particular group, use the Group Member Cards shortcode. It will show a grid of all the group members with their user profile image and cover image. This is an amazing feature for websites based on business, online classes, etc. The users can click on any of the group members and access their user profile.
15. Group Discussion
Shortcode: [profilegrid_group_discussion gid=”x”]
Another amazing shortcode to definitely use on your website is the group discussion. It displays all the communications going on in a particular group. Great for businesses, memberships and communities. All the communication is present at one place that is accessible by all the members of the group. There is also an option to start or insert a new comment right from the Group discussion page.
There are many more shortcodes at your disposal that can be used to build great memberships or community websites. We’ve covered most of the shortcodes from WordPress User Profiles Shortcodes List – ProfileGrid.
Since the shortcode is highly customizable, you can select the ones that you want to use and play around it to understand more.
Conclusion
Are you looking to create user profiles that are highly customizable? And also want to have total control over all the elements? Then the shortcodes mentioned in this guide are really helpful. Use these shortcodes with any page builder. If you are looking to create user profiles that are customizable without going into a lot of settings and playing around with them, shortcodes are the answer. Just copy and paste them wherever you want and see the magic in the front end.
Now create new user profile with these shortcodes easily. We will be launching new shortcodes every now and then to make your lives easier as we progress. Display the complete user profile using the User Profile shortcode or show only those elements that matter to you.