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.

 

What VIP members will see - all webinars
What VIP members will see – all webinars

What VIP members will see - joining a webinar
What VIP members will see – joining a webinar

What unprivileged users will see
What unprivileged users will see

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.

Example: Webinar post with all its child posts (Webinar participations).
Example: Webinar post with all its child posts (Webinar participations).

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:

  1. Set up Webinars as a Custom Post Type (CPT).
  2. 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.
  3. Webinar Participation CPT definition and options
    Webinar Participation CPT definition and options

    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

Creating a Post Form for Webinar participations
Creating a Post Form for Webinar participations

2.1 Create a Post Form using the CRED plugin for adding new Webinar participations.

Auto-Generate Form option
Auto-Generate Form option

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.

The form will include a dropdown list of all parent posts—webinars
The form will include a dropdown list of all parent posts—webinars

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:

Changes we introduced to our form:
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:

Form for signing up to webinars
Form for signing up to webinars

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.

Inserting the form into a page
Inserting the form into a page

  1. Go to Pages and add a new page
  2. In your page body use the CRED form button.
  3. From the CRED Post Form section, choose New Post Form.
  4. Locate your form on the Select post form dropdown and insert it.
  5. 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:

What VIP members will see - all webinars
What VIP members will see – all webinars

We will create a View first, using the Toolset Views plugin.

  1. Go to Toolset -> Views and add a new View. If you are not familiar with creating Views, visit this tutorial first.
  2. In the Content Selection section, choose Webinars.
  3. Use the Query Filter section to choose webinars with the Webinar date (as String) greater than today.
  4. In the Loop output section, choose the Table format. Include the Post with a link and Webinar date as fields.
  5. Adding link to the page with the child form
    Adding link to the page with the child form

    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.

  6. Click on the CRED Forms button.
  7. Select the Create Child Post Link.
  8. In the Child Form Page section, search for the page title that includes your form (the page you created before).
  9. In the link text field, type in “Join the webinar.”
  10. 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.

  1. Save your View.
  2. Create a page for listing all upcoming webinars.
  3. Include your View in that page and save your changes.

What VIP members will see - all webinars
What VIP members will see – all webinars

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.

  1. 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.


Useful hints:

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.

Questions?

If you have any questions please not hesitate to post them on the Memebership Sites support page