Some membership sites allow the members to sign up for different activities that are exclusively for members. In our example, we want to give the VIP members the possibility to sign up for webinars (online training sessions).
VIP members will see a list of all webinars available. After choosing a webinar, they can join it by filling out and submitting the form. See the pictures on the left.
Below we show how you can implement this case using Toolset plugins.
This page is a part of the How to build a membership site with WordPress series, but you can follow this tutorial independently without reading the previous parts.
How to approach the task
Before you put your fingers on the keyboard, let’s make sure you understand the idea behind the solution.
To implement a case like this using Toolset plugins, you will need two Custom Post Types (CPT) forming a parent-child relationship:
- Webinar (parent CPT) posts store single webinar information (webinar name, date, link to the virtual room, etc.). Webinar posts will be added by the site’s owner/admin.
- Webinar participation (child CPT) posts will be created automatically whenever a member signs up for a specific webinar using a front-end form based on this CPT.
In Toolset, for each parent post (webinars, in our case) you can see a list of its child posts (e.g., Webinar participations). See the picture below.
Since a Webinar participation post will be added by a logged-in user, the post will be saved with the user as the post author. This way, we will know exactly which users signed up for each Webinar.
What we need to do is:
- Create relevant lists of Webinars combined with front-end forms.
- Restrict access to these lists and forms to privileged users only. In our case, that’s a VIP member, which is a custom role you can add easily using Toolset Access plugin.
Steps to follow
Step 1: Setting up Custom Post Types and parent-child relationship
Use the Toolset Types plugin to:
- Set up Webinars as a Custom Post Type (CPT).
- If needed, add custom fields to store additional information about a webinar. For example, the webinar’s date and the link where it will take place.
Set up the Webinar participations as a Custom Post Type and make it a child post for Webinars. If needed, add custom fields. In our example, we will offer an option to participate as a speaker and a field to store the participant’s email.
Hint: Check the Author option (Sections to display when editing Webinar participation)
Step 2: Creating a front-end form for signing up to webinars
2.1 Create a Post Form using the CRED plugin for adding new Webinar participations.
2.2 When you create the form content, use the Auto-Generate Form option.
Stick to the default shortcodes that appear. You will be able to customize the content later.
2.3 Preview your form.
Since your form is based on a child Post Type, the form will include a dropdown list of all parent posts—webinars, in our case (see the picture).
This dropdown has been generated by the following shortcode:
[cred_field field=’_wpcf_belongs_webinar_id’ value=”]
Don’t remove this shortcode. Thanks to this line, the post added by a user will be automatically connected with the relevant parent post (the webinar).
Hint: If you would like to restrict the dropdown list to one webinar only, hide this dropdown with CSS and instead use the [cred_post_parent get=’title’] shortcode to display the title of the parent post. Later, we will create the page on which the user will choose from a list of all webinars.
Feel free to make changes to your form content to fit your needs. In the screenshot and table below, we summarize the changes we introduced to our form:
Table: changes we introduced to our form
|Line||Changes we introduced to our form|
|Line 5||We used the [wpv-current-user info=’firstname’] shortcode (Current user info -> First name field in the Fields and Views GUI) to include the user’s first name.|
|Line 7||Since we hid the dropdown list with all parent webinars, we display the parent’s post name (the name of the webinar the user is joining) with the [cred_post_parent get=‘title’] shortcode instead.|
|Line 11||“Instead of asking the user to enter the post name, we hid this input field using CSS and populated it using a default value set to the user login. In addition, we made the input read only with the readonly=”true” attribute.
[cred_field field=’post_title’ post=’webinar-appearance’ value='[wpv-current-user info=’login’]’ urlparam=” readonly=”true”]
|Line 26||We populated the attendee email field with the default value set to the email the user has stored in his/her WP profile (Current user info field -> email field in the Fields and Views GUI). Further, we hid it from user with CSS and made the input read only with the readonly=“true” attribute.
[cred_field field=’attendee-email’ post=’webinar-appearance’ value='[wpv-current-user info=’email’]’ urlparam=” readonly=”true”]
|Line 37|| We changed the default “Submit” label to “Join.”
[cred_field field=’form_submit’ value=’Join’ urlparam=”]
This is how our form will look on the front end:
Step 3: Controlling access to the form
Now let’s grant access to the CRED form for VIP members. VIP member is a custom role you have defined with the Access plugin.
- Go to Toolset -> Access Control
- Switch to the CRED Form tab
- Locate the Create Custom Post with CRED Form “Join the webinar” column and check the field for VIP members.
Step 4: Inserting the form into a page
Let’s create a page that will include our form. Later, we will link to that page from the list of all webinars.
- Go to Pages and add a new page
- In your page body use the CRED form button.
- From the CRED Post Form section, choose New Post Form.
- Locate your form on the Select post form dropdown and insert it.
- Save your page.
Next, we will create a page that will let us set the parent webinar.
Step 5: Creating a page with all webinars
Let’s create a page that lists all upcoming Webinars. Each webinar entry on that list will include:
- The clickable link to the single webinar page.
- The “Join the webinar” link—linking to the page we created in Step 3.
The page will look like this:
We will create a View first, using the Toolset Views plugin.
- Go to Toolset -> Views and add a new View. If you are not familiar with creating Views, visit this tutorial first.
- In the Content Selection section, choose Webinars.
- Use the Query Filter section to choose webinars with the Webinar date (as String) greater than today.
- In the Loop output section, choose the Table format. Include the Post with a link and Webinar date as fields.
Manually add one more cells to your table (see the arrow on the screenshot). It will include a link to the page with the child form you created in Step 3.
- Click on the CRED Forms button.
- Select the Create Child Post Link.
- In the Child Form Page section, search for the page title that includes your form (the page you created before).
- In the link text field, type in “Join the webinar.”
- Insert your form.
You should see a shortcode that looks like this:
[cred_child_link_form form=’739′ parent_id=’-1′ text=’Join the webinar’ target=’_self’]
The id in the form attribute (form=’739′ in our example) is the id of the page that includes your child form.
- Save your View.
- Create a page for listing all upcoming webinars.
- Include your View in that page and save your changes.
Your page will look like this.
If a user presses the “Join this webinar” button, she will see a page with your child form with the relevant parent webinar already selected.
- Use the Toolset Access plugin to restrict access to this page to VIP members only. You can use the technique we presented in the Restricting read access to some pages tutorial.
Hint 1: you can also create a View that lists all webinars a currently logged-in user has joined. For this, use the Post author is the same as the logged in user View filter in your View.
Hint 2: Use Toolset Access plugin to control read access on the Post Type level for the Webinar and Webinar participation Post Types. Keep in mind that WordPress default settings allow any website visitor to display a post if the user knows the link.
If you have any questions please not hesitate to post them on the Memebership Sites support page