Creating Social Business advanced membership site Buddypress and S2member

There are many ways to use WordPress nowdays. Today, I will show you several examples how to get most powerful features of Buddypress and WordPress to create interesting social oriented Directory or Multi vendor site, deal community.

When you check most popular directory themes, you will see that they offer simple strategy when each user creates own business page and add “listings” to this page. In most cases, theme inits own custom post type, so each business page will be as separate post.

If you check most popular community theme, you will see that they are made with help of Buddypress. User becomes Buddypress user and he get own profile page after registration. The same thing if you check multi vendor themes. Each user can friend with other, send private message, make activity page, etc

But what if we want to get all the best from both ways. For example, what if we want to add all user social features to Business model.  I am ready to show how to do this. For this tutorial you need Rehub theme to get all in one ready sollution or you can use some tips from this article.

To start this tutorial, you must have enabled WordPress and Buddypress + enabled Profile fields extension of Buddypress in Settings – Buddypress

Registration

I think, this is most confusing part for settings. Because there are several strategies for user membership. I will try to show some most popular.

Free registration, no payment, no member types.

This is most easy way and it’s default for wordpress. Just enable registration in Settings – general.

For Rehub theme, you can use our ajax login/register popup. To enable this popup, Go to theme option – user option and enable there Login modal. You can enable also login links or buttons in header. More information here

Free registration and membership, but different member types with different profile fields

This can be useful if you want to create different profile types. For example, one type will be for simple user, another type will be for Business profiles.

Buddypress has one new function – Member Types. It’s not available by default and must be registered from theme or from plugin. Here Member type API.

For our themes we added our custom plugin RH Buddypress Member types. You can find it inside Rehub – Plugins tab (you must activate license first in Rehub – Registration). If you use another theme, you can use free plugin BuddyPress Member Type Generator. After enable of plugin, go to Users – BP Member Types and create member types.

Once you create Member types, you can assign different profile fields for member types. First of all, you need to create such fields. Go to Users – Profile fields and create fields there. There are basic (first) group of fields and possibility to add another field groups. Basic field group is group which will be available in registration form. Other groups will be available in Profile Edit page for each user (he can edit them after registration).

By default, when user register on site, he can’t choose member type, he can do this later in his Profile. But you can enable such choosing in registration step. For this, you can use next plugin BP Xprofile Member field

Next thing which you can need is conditional fields in Profile. It’s such fields which are depending on other fields. For example, if user choose Business Profile, he will see several fields, if he choose Customer Member type – he don’t see these fields and can’t edit them. For such case, when you create profile field, assign it to member type. Then, to add Conditional feature – use plugin Conditional profile fields for Buddypress This will allow you to make conditions based on any field, including member type field.

For advanced users, we added also some tips in Registration page of Buddypress in our themes. You can use also css to hide some fields and create different pages for registration different user member types. For example, you have 2 types: free user and business user. You can allow to register them in different pages. For business users, use link of registration page as default link + ?membertype=business. For example, default link is http://site.com/register. So, for business profiles, use http://site.com/register?membertype=business where business is your slug for membertype. When you do this, page will have additional wrapper css class – register_wrap_typebusiness and you can hide separate fields by css

For this type of registration I also recommend to use our popup login, but disable registration in popup. You can do this, if you set custom registration link in Theme option – User option – Add custom register link. More information here. For registration url – use url of Buddypress Register page. You can find it in Settings – Buddypress -pages

back to menu ↑

If you want to create paid membership and divide pro members and free members you can use this way. This is most hardest way for setup but it has most powerful features

For this, you will need to install also S2Member plugin. You also need to setup member types with our plugin (check previous step). Now, the best way is to assign each member type for separate role. S2Member creates 4 roles by default + 1 basic role. Their names are: s2member_level0, s2member_level1, etc

s2member_level0 is reserved role, it’s for free users. You should enable Open registration in S2Member – General Options – Open Registration

Other member roles are for paid membership. So, now, it’s time to assign each role for each member type. When you create each member type inside RH Buddypress Member types plugin you will see in the end next select

Here, assign each member type with role of S2member. Also, set one type as default. Usually, you need to create 1 member type (Free) and assign it to s2member_role0 + make it as default. And one member type which will be paid member type. Assign it to one of S2member role.

So, how this works. When you will register new member with S2member, he gets new role. If plugin finds this role in assigned role, plugin changes also member type. The same works also when user has expired membership. S2member makes such user as Free user with S2member 0 level and plugin will change also his member type automatically. You can assign different profile fields to member types as described above to restrict access for separate user settings.

Now, it’s time to make registration page. If you have paid memberships, you need page where user will be redirected to pay for membership. You can set this page in S2Member – General Options – Membership Options page This page is also will be used when user want to get access to pages which he has no access with his membership level. So, make this page good described. Page must also has all buttons to pay for membership. For such purpose, our themes has special shortcode for price table. You can find it in Visual composer module, shortcode generator or just copy shortcode from our S2 member article. Also we added one ready template for Visual Composer with price table. Example

Inside shortcode you need to add buttons which are generated in S2Member Paypal section.

Inside free registration column, place link to Buddypress Register page. Also, it’s not required to use such shortcode, you can make any content with payment button, for example, using CTA block module in visual composer, etc.

It’s also good to add to this page information about current status of user, his membertype, role, subscription date, etc. S2Member has a wide range of possible shortcodes for this. Theme also has some of shortcode which you can use on page. I guess, most valuable here will be shortcode to show current member type. Use shortcode

Read about other user shortcodes of theme in part of article about shortcodes.

You also need to configure login button in header. If you have only paid memberships – use this page as main registration page. If you have also free level, send users to Buddypress Register pages. So, set url for registration page in Theme option – User Option – Add custom register link. 

back to menu ↑

Configuring Profile

Ok, you configured registration process, now, it’s time to add some membership functions to User Profile. First of all, don’t forget to set User profile page in Settings – Buddypress. Url slug of this page will be used in Profile pages.

Adding widget area

By default, Profile page doesn’t have widget area, you can enable it in Theme option – Buddypress – Enable widget for Profile page 

Once you do this, you will have widget area which you can configure in Appearance – Widgets. There are some shortcodes which can be helpful to show some data of user in sidebar, you can find shortcodes in the end of article

Adding Profile description field and phone, Seo settings

By default, Buddypress doesn’t have description field in registration, but you can add it in Xprofile extension in Users – Profile fields. After creating these fields, type their names in Theme option – Buddypress – Add name of Xprofile field for seo Description

Theme will use data from these field in Seo meta tags and in Meta tags for facebook and social share. You can make these fields available only for special member types, this will give ability for special member types to have advanced seo optimised User pages. Also theme creates seo schema for such profiles as Business places, so such profiles have more chances to have advanced snippets in google and on map. You also will need to add location tab for profiles to have most advanced profiles.

Adding location

For this, just enable Friend extension in Geo My WordPress plugin (must be also installed)

Adding additional Profile data to Profile tab

I guess, that you may need to show additional data for user in his profile. I guess, that there is some data which you want to show only for member when he view his profile and some public data. So, you need to add all data to theme option – Buddypress – Add custom message or html in profile of User

For any public data, just place them in field. Shortcodes will also work. For any private data, wrap them in shortcode

For private content, it’s better to set different information from S2member. You can also add buttons for updating profile and wrap them in shortcode of S2member. For example, for users with free role, you can show buttons to update their membership or show expiration date of subscription. Use Conditional shortcodes of S2member with Get shortcodes

My example from Demo site

 

In some cases, you may need to redirect users after login to their profile. You can use theme redirect option. Go to theme option – User option – Add custom redirect after login url and set url. If you need to redirect user to his profile tab – link will be like http://site.com/members/%%userlogin%%/profile, where http://site.com/members is your profile page url, %%userlogin%% will be replaced by user login name, profile is slug of profile page inside User profile. You can redirect him to any other, for example on location tab.
back to menu ↑

How to add Profile’s posts and product tabs and frontend form

To enable product or post tab in user profile, go to Theme option – Buddypress option, and find options to set Post and Product Tab

There are several options. Name and slug is required if you need these tabs. Use short name, use simple slugs from one word, without spaces and special symbols

Position of tab is 20 by default. This means that tab will be visible in profile after Activitity and Profile details tab.

Also, you can choose pages where you have frontend forms for posting posts and products. All content from these pages will be imported in profile.

This will allow to submit posts directly from Profile. I recommend to use our RH Frontend Form plugin (get it in Rehub – Plugins) to create such form.

You can also choose page where you have edit form for posts.

For example, copy shortcode from RH Frontend form and place it in separate page, then choose this page in Theme option – Buddypress

Last option is member type who will have this tab. Means, if you set it as “vendor” – only vendor member type will have such tab.

Adding follow function

By default, Buddypress has friendship function. But for business model it’s not the best way, because each friendship request also need approval from user. What if you want just follow somebody. Use Buddypress follow for this For most advanced using, you can also enable email notification for each action of followed user. I don’t recommend to set this, but you can experiment with this plugin. Place code from gist in file, then in wp-content/plugins and activate

back to menu ↑

 Member directory, business map locator

Buddypress creates member directory by default in your main Profile page. That’s enough in many cases, but if you want to create more advanced directory, for example, with locator, you should install Geo My wordpress plugin (find link above). With plugin, you will have additional Map link in each user profile where users can add own location. Then, you can use this location in directory. GMW also supports Xprofile fields, so, you can add also search by profile data. My themes has advanced support for plugin, so, you can use one of custom output template and custom form for plugin. Check some basic settings here

Also, one good feature, that each Profile field in Buddypress can have own page. So, you can use them as Member categories. For this, when you create your profile field, check this

You can also hide map tab from several member types. For this use css, example:

will hide map tab from all members except vendor member type.

back to menu ↑

Restrict content or parts

One of the best feature of S2member is that they allow to restrict content by dynamic url. This means that you can use this to restrict some parts of site for free users. For example, you can restrict ability to set own logo and image, or access for some user tabs. Of course, you also can restrict access to any page or post or any part of post with S2member because they have very powerful restrict module. You can restrict access to private messages, activity, whatever you want, real unlimited possibilities. So, for example, to restrict access for adding custom avatar, you need to add url inside S2Member – Restriction option

Link will be /members/%%current_user_nicename%%/profile/change-avatar/

where members is slug for your profile page in Buddypress, %%current_user_nicename%% will be replaced with user nicename.

You can also use wide range of S2Member conditional shortcodes to restrict access to separate page. For example, you can restrict access to submit form, so, only users with special role can submit something on your site. For this wrap submit form shortcode with conditional shortcodes of S2Member

back to menu ↑

Shortcodes of theme for Buddypress

There are some additional helpful shortcodes for users in theme. Here full list. You can use them in Profile, in profile

This shortcode will output information from Xprofile field. In name – place name of field which you need to get data. Type is just sanitization helper (to avoid different hacks). For example, if your field is url, it’s better to add type=link so, theme will output clean link on site. another type=text, use it in most cases. it will clean all html code in field. If you use this shortcode on Profile page, ignore userid.

One good option of this shortcode, that you can also combine it with links. For example, if you want to use it to add user facebook page, you can use something like

Next shortcode is

This shortcode will check member type of user, which you can set in type parameter and show content only for users with this type. If you set current=1, shortcode will check current logged user type, if you delete this parameter, shortcode will check current displayed Buddypress member (so, you can use this in Profile page of user)

This shortcode will show member type of user. If you set bp_user=1 – this will show member type of displayed user (use it in Profile of user), if you delete this parameter, shortcode will show member type of current logged user.

This shortcode will show content only for user with role which you set in role parameter. It works only in Profile pages and in BP loops. For more advanced role conditionals, use S2member shortcodes

Shows content only for logged in user on his Profile page

This shortcode is useful on Group pages. You can enable separate widget for Group pages in theme option – buddypress. Use this shortcode to show group admins

This shortcode also is useful on group pages. It will show shop vendor page of group’s admin. Useful if you want to use Groups for Business instead of Profiles.

Shows content only for logged in users

Shows content only for non logged in users

Shows content for vendor user (vendor role)

Content for pending vendors

Content for those who logged but not a vendor

back to menu ↑

Synchronization between roles

In some cases, when you use S2Membership plugin or any other plugins for membership, you need to synchronize roles from different plugins. For example, Wc vendor plugin uses own role – vendor. If you enable paid membership, user gets new role after payment and previous role will be deleted. So, user will get new role and lose vendor role. To prevent this – we added option in Theme option – user options – Synchronize one role to other

Example for syncing vendor role and S2member:

vendor:s2member_level0:s2member_level1,s2member_level2

Divider is “:”. First part is role which you want to synchronize. Second part is s2member_level0. This is free role of S2member, so, if user gets it, he lose vendor role. By default, he will lose it in any case, so, this part is just to make sure that user lose vendor role once he becomes free user. s2member_level1,s2member_level2 are roles which will make user as vendor once he gets these roles, divider is “,” between roles. If want to make vendor role always, you can use something like

vendor:blablabla:s2member_level0,s2member_level1,s2member_level2,subscriber

So, blablabla is not existed role, so user never lose vendor role. Once he gets one of S2member roles, he also gets vendor role

back to menu ↑

Limited Post submission

Our buyers ask very often to make function to limit access for users to submit form. For example, maybe you want to create 3 user member types. Free – no access to submit, Regular Business – access to submit 10 products or posts, PRO – unlimited access. How to do this?

Now, we updated RH Frontend PRO bundled plugin and you can add limited access. When you create form, add number of posts in Form settings – Extended. This number is number of times when user can submit from this form. So, you will need to create two forms, one for Regular member type and one for PRO. Set limits for form for Regular member type. Now, you can show limited form for Regular member type and unlimited form for PRO level. Just wrap form shortcode with one available conditional shortcodes of S2member plugin or shortcode of theme.

back to menu ↑

Adding roles for activity on site

One of interesting function which I can’t find on community sites is to give users membership and advanced access for their activity on site. This can be easily made by plugin MyCred which track many user actions with his hook and adds user point system. For example, users can get points for login, register, clicks on thumbs, sending messages, daily login, post content, comment and many other things. You can use this instead of S2member membeship We can use this.

Go to Theme option – Buddypress – Give user roles for their Mycred Points

Instead of roles, you can also give users member types. This is in cases if you don’t want to use membership plugins and use only member type system of Buddypress

Don’t forget, that MyCred has a huge amount of awesome addons which can be used for separate Business model (we will add tutorial for this soon). I guess, that you can love Buy MyCred extension to quickly buy points (this can allow to create paid membership but based on Mycred), gateway extension and  Sell Content extension to sell access to something for points. This is good model, users can buy points and them spend them for different things on site. Check all list of MyCred Extensions

back to menu ↑

Example of my settings for Rehub demo site

Here I will also show you step by step guide. I used free membership + 2 paid memberships on site. Free, Expert (with also vendor role), PRO Business role. Free user can register and set basic profile settings, write private messages. He can’t set avatar or Banner image, he can’t submit posts. Expert user has more profile fields, seo settings of profile, possibility to submit limited number of products. PRO level doesn’t have any restriction. He must pay monthly.
First of all, setup next plugins. Buddypress, Buddy Follow, BBpress (if you need forums), MyCred (if you need point system), RH BP Membertype, Woocommerce+WcVendor (if you need shop and multivendor option), RH Frontend (if you need frontend posting), GMW (if you need any type of map locators), S2Member (if you need paid membership).

Go to Buddypress – Settings and activate there modules which you will use on site.

Go to Buddypress – Settings – Pages and enable there register page and other pages. Just choose them.

Set activation page (will be used when user activates his email), place on this page message for user where he can find info about membership on your site.

Now, it’s time to create Membership sign up buttons in S2Member. Go to S2member – Paypal buttons and generate shortcodes for 2 levels. By default, will be used paypal image as button. You can also find how to change button to your custom buttons here https://www.s2member.com/kb/custom-image-in-paypal-button/ and here https://s2member.com/kb-article/how-do-i-generate-an-s2member-paypal-button-link/ or simply use default buttons.

Now, create a page which will be used for Member option page. This page is very important, user will be redirected here if he doesn’t have access to something. Choose this page in S2member plugin – General – Membership Options page. Also in general settings allow to use Open registration (because you will have free membership level).

Time to create member types and assign them to roles. Go to users – BP Member Types and create them. First member type will be Free user – make it default type. Assign subscriber, s2 member role 0, pending vendor, customer to this type.

Second type will have ability to post on site, so assign him to vendor, S2member_1, contributor role

Third type is PRO level, assign it to s2member_2 + author

Go to Users – Profile fields. Even if you don’t need any additional fields, I recommend to create New Profile group (not base) and assign there Description and Phone fields which we will use for Business types. Make them available only for 2 and 3 member types if you want to restrict free users to fill this. If you want to create also linkable directory based on one of field, set Autolink to true in settings of field. Any fields which you will add to Base Group will be used on Registration page.

Now, it’s time to choose the base place where user can register. It can be Buddypress page, Theme modal, woocommerce registration page. It’s depending on your main purpose of site. If you need multivendor, your main functions will be woocommerce functions. If you build Social Business – Buddypress. In our case, we will use theme login modal + Buddypress registration. So, go to theme option – user option and enable there modal. Place link of BP sign up page to field which overwrites register modal. You can also overwite login modal, so user will be redirected to custom login page. We added such page in Buddypress for theme. It has link as main register page + ?type=login. Example: /register/?type=login

Now, we need to configure User Profile. Go to theme option – Buddypress. I guess, you will need to enable there sidebar for profile, default images, etc. Also, here, place names of Description and Mobile fields which you created. They will be used for advanced Seo settings and meta tags. Next settings are Post and Product tabs. They are for such cases when you want to allow users to post something. You can enable tabs for all or for special member types. I prefer to enable for all, because I will use conditional shortcodes in submit form, so free users will see that they can submit something, but instead of form, they will see message that they must upgrade account. For each tab, you also need to create two separate pages. One of page will have shortcode of submit form. Second – shortcode of edit form. You can find these shortcodes in RH frontend Form when you create form and configure it. Wrap each form with conditionals shortcodes of S2member if you want to restrict access. Or with conditional shortcodes of theme. For example, conditional shortcode of member type

Add also custom message which you want to show for user in his profile. I recommend to show him info of his current subscription. Example

 

means that only current user profile owner will see such message. Other users will not see it. Place this code in Theme option – Buddypress – Add custom message or html in profile of User

Now, it’s time to set different restrictions and maybe messages for users. I already described many interesting functions in this article about this. I used next shortcode on page where I have submit form.

So. if user is level 1 – he can get access to form 1, if 2- to form with id 2. If he doesn’t have level 1 and higher – he see link where he can update account.

You can also set other restrictions. For example, next code inside S2member Url restriction section will close ability to set avatars for free users.

Then, next you can need is to set redirect after login. Do this in theme option – user option. You can set redirect to user profile. Example for this on demo site is /members/%%userlogin%%

And, maybe last important thing is synchronize some roles to each other. This is only if you want to use Vendor functions with S2member. Go to theme option – user option – Synchronize one role to other. My settings for vendor roles is next

vendor:s2member_level0:s2member_level1,s2member_level2

back to menu ↑

Mycred and point system

In Next article I will show you how you can use membership based on point system, when points will be used as payment, users can buy points and spend them on site, change points to roles, etc.

 

 

 

Creating Social Business advanced membership site Buddypress and S2member
3.88 (77.5%) 8 votes

Want to get unique wordpress tips?

We won't rent or sell or spam your email. We promise!

Tags:

Leave a Reply

24 Comments on "Creating Social Business advanced membership site Buddypress and S2member"

Notify of
avatar
Sort by:   newest | oldest | most voted
Desing007
Guest

Hello, so i can make custom submit posts for each user member type with this tutorial https://wpsoul.com/adding-frontend-submit-payment-wordpress/

Desing007
Guest

How show different submit form for each user type? I have 1 basic user type and 2 premium and i want show 2 kind of post submit form for 2 premium user type. How i can do that?

Desing007
Guest

Hello Limit post submit for form work with s2member? I setup 2 form, first with limitation, second with illimitate post submission

Desing007
Guest

I configure RH frontend plugin for thumbnail upload but Payd member can’t upload Thumbnail, not allow by system, any help?

Desing007
Guest

Hello!!!
When i move users to new group i see this: http://imgur.com/a/Vgwk6
i have below short codes in edit page:

[s2If current_user_is(s2member_level1)]
[wpfepp_post_table form=”1″ show_all=0]
[/s2If]

[s2If current_user_can(access_s2member_level2)]
[wpfepp_post_table form=”2″ show_all=0]
[/s2If]

[s2If !current_user_can(access_s2member_level1)]
You don’t have access to submit function. Please, update your account – Update to PRO
[/s2If]

wpDiscuz