Create a Membership Site with WordPress

This is a step-by-step tutorial for building a membership site with WordPress using the open-source s2Member framework. Both WordPress and the s2Member framework are free.

You can follow along and by the end you’ll have a membership website that:

• Processes payments through PayPal
• Allows free registrations that can be upgraded to premium
• Has a branded login page
• Offers protected downloadable material
• Automatically follows-up with non-paying subscribers using AWeber
• Has a members-only discussion forum

This hypothetical-site I’m about to build is called Secret Government Documents–to keep things interesting. In this fake site, I give subscribers access to government material that include intelligence on major historical events, blueprints of secret locations and secret weapon designs.

The site that you build as you follow along can be about anything: stock trading secrets, real estate investing, job hunting, gliding, pet care, writing, whatever.

Here are some screenshots of the final website:

Page That Members See When They Log-In

Below is the page that subscribers will see when they login to our membership site.

If a non-paying subscriber logs in, they’re gonna see a red box that greets them and encourages them to pay. These non-paying subscribers will not be able to access protected pages that are linked from here.

Paying subscribers will have a different experience when they login to this page. They won’t see the red box and they will be able to access the pages which are linked from here.

Registration Screen

In our website, we’ll allow free registrations. This is how the registration page will look like. It will be linked to from the sales page of the membership site.

Page of Protected Downloadable File

In our membership site, we’ll offer some protected downloadable files.

Required Skills and Resources:

• Clean WordPress installation
• Compatible WordPress hosting
• Familiarity with WordPress
• s2Member framework
• Any WordPress theme

Even if you’re an advanced user or a developer who doesn’t need detailed instructions, you can skim-through to get a glimpse of the power of the WordPress-s2Member combination in creating membership sites.

Installing and Configuring the Membership Site

So, download and install the s2Member framework, which can be downloaded for free from WordPress.org.

Once activated, you’ll see the s2Member menu in the admin side of WordPress. First, we need to make a few initial settings and adjustments. Go to:

s2Member »» General Options

Luckily, this options page contains plenty of documentation, so go through these one by one and make the adjustments that are required for your site.

But there are specific settings that are of particular interest to us.

Open Registration

In my website, Secret Government Documents, I will allow ‘Open Registration’, which means I allow ‘free’ accounts (i.e. Level 0 accounts). Visitors don’t have to pay to register. However, merely having an account doesn’t grant them access to my secret documents. They’ll have to upgrade to a premium account for that.

The main benefit of allowing free registrations is that we get to collect the emails and names of potential subscribers. This is valuable data even if they don’t later subscribe. But, anyway, we’ll still try to move them to paying subscribers as quickly as possible. More on that later.

So, in the ‘General Options’ page, find the ‘Open Registration’ box to allow open registrations.

Setting the ‘Login Welcome’ & ‘Membership Options’ Pages

Before we can start actually protecting our premium content, we must create the ‘Login Welcome’ & ‘Membership Options’ pages. s2Member will not work without this.

Login Welcome: This is the page that a subscriber will see once they login.

Membership Options: This is the sign-up membership selection page. Visitors will see this page when they’ve decided to buy membership at your site or when they attempt to access protected content.

Both of these must be WordPress Pages, not Posts.

For now, these can be dummy pages with no content. We just need to create them and publish them in order to tell s2Member which ones they are. I named my ‘Welcome Login’ > ‘Access Granted’ and my ‘Membership Options’ > ‘Apply for Clearance’.

Now go to:

WordPress admin dashboard »» s2Member »» ‘General Options’

And find the ‘Login Welcome Page’ and the ‘Membership Options Page’ fields. At the drop-down menus, select your pages.

Preventing Access to Admin and Profile Areas

In WordPress, members can access and modify information in their profiles. With s2Member you can fine-tune what members are allowed and not allowed to change in their profiles. But you can also completely block access to all admin pages, including user profiles. That’s what I’ll do with my site. It can be done in the ‘Member Profile Modifications’ box. I set it to ‘Yes ( redirect to Login Welcome Page; locking all /wp-admin/ areas )’.

These are all the basic settings that are of interest to us now. Later on, we’ll revisit this page to further customize our membership site and make it truly professional.

Publishing Protected Posts and Pages

Now that we have initially configured s2Member, let’s add content to our membership site.

s2Member provides many ways to implement content restrictions:

• By page or post ID
• By tag
• By category
• By URL (or keywords in URL)

(Take a look at this screenshot to see more details and more restriction options.)

The most convenient way is to use categories. Create a bunch of posts, add them to a certain category, then just protect that category. To protect a category, go to:

s2Member »» Restriction Options »» Category Access Restrictions

And enter the ID of the category that you wanna protect.

Another way to protect content is by simply assigning an access level to the post or page as you are publishing it.

It’s a convenient and intuitive way to protect content:

So now, let’s go ahead and add all of our premium content.

…adding content…

Okay, so I’ve added a few articles. See how professional s2Member is–it shows a nice little “lock” icon in the list of Pages, and when you hover over the lock, you can see what level is required for the post (pretty neat!):

Designing the Registration Process

We are now ready to start designing the registration process our site.

Here are the steps that our user is going to go through:

Step 1: Get Sold!

Visitor sees sales copy on the homepage. She is persuaded to become a subscriber, so she clicks “Become a Subscriber”.

Step 2: Sign Up!

This takes her to a the registration page where she enters her name, email and other required information. And she clicks ‘Register’.

Step 3: Get Processed Behind The Scenes

Once she clicks ‘Register’, s2Member does the following:

1. It creates a free (Level #0) account
2. It silently adds her to our AWeber follow-up list, in case she doesn’t complete the payment
3. It sends her an email with login information
4. It redirects her to the login page

Step 4: Login for the First Time

She now logs in to our ‘Login Welcome Page’. This page contains various links to premium content. (You’re probably thinking “But she hasn’t paid yet!” Yes, she is still a level #0 subscriber, so if she clicks on links that lead to pages that require level #1 or above, she won’t gain access.) At the top of our ‘Login Welcome Page’, we’re gonna display a notification message that asks our level #0 subscriber to pay in order to gain access to the linked pages:

Step 5: Pay

User clicks on “Pay Now”, which takes her to PayPal.

Once she completes the payment with PayPal, s2Member does the following:

1. It upgrades her account to the required level
2. It sends her an acknowledgement email
3. It removes her from our AWeber follow-up list

That’s it. She now has full access to our website.

Sounds good? Alright, let’s implement each step in this registration funnel. We’ll start by creating the homepage where the sales copy will be displayed.

Creating the Front Page

Creating the homepage is simple. Create a normal WordPress Page and set it as a static front page.

Here’s how my final homepage will kind of look like:

My front page doesn’t look that sophisticated. A proper membership site front page would probably have nice graphics, a video, and a nice call-to-action button. This page I just made is just for demonstration purposes.

The ‘Subscribe Now’ button should lead to our sign-up page, which is located at:

http://example.com/wp-login.php?action=register.

Designing the sign-up page is a bit more interesting (at least for this tutorial), let’s do it!

Branding the Registration / Sign-Up Page

Before any customization, here’s how the registration page of an s2Member-powered website looks like:

This doesn’t look very professional. It doesn’t have our own branding. And we need to collect more information than just username and email. We want the full name, we want to allow our users to set their own passwords, and we wanna display other fields, like “Accept our Terms of Service”.

We can actually customize this registration page to make it look like this:

Uploading a Custom Logo

The first step to customizing our registration page is creating a custom logo. Create an image that’s about 550 pixels wide and 100 pixels high. Then go to:

s2Member »» General Options »» Login/Registration Design

From that box, you can customize many aspects of your registration page, such as font sizes, background image and color, the logo and more. You can upload a new logo image at the ‘Logo Image Configurations’ of the ‘Login/Registration Design’ box.

Adding Custom Registration Fields

Now is the time to add custom registration fields, such as the “Accept our Terms of Service”, visitor full name, and the others that you see in the screenshot above. To do that, go to:

s2Member »» General Options »» Custom Registration Fields/Options

From that box, you can enable first/last names registration fields, custom passwords, and other custom fields. Click on ‘Add New Field’ to begin adding custom fields and don’t forget to click ‘Save All Changes’ at the bottom of the page.

That’s it. After these changes, our registration page will look like the screenshot.

Payment Processing with PayPal

When we did the initial configurations of s2Member, we enabled ‘Open Registration’, which meant, our users can register and login before paying. However, merely logging in won’t grant them access to premium content, that’s why we want them to become paying members as soon as possible. So, now we need to configure our payment processor.

s2Member supports many different payment processors: Authorize.Net, AliPay, Google Checkout, ClickBank, ccBill, and more. And it also supports PayPal.

PayPal is very versatile and it is easy to get started with it. So, it is the one we’ll use here.

PayPal Account Details

I’ll briefly mention the minimum required settings for PayPal to work. If you need more details, you can consult the s2Member documentation on the ‘PayPal Options’ page.

First, go to ‘PayPal Account Details’ at:

s2Member »» PayPal Options

Enter your PayPal email, PayPal API username, API password, and API signature. Next, enable PayPal IPN and PDT.

These names sound cryptic, but don’t worry, just follow the instructions provided within s2Member–it’s a piece of cake (…I hope).

Review the rest of the ‘PayPal Options’ page and adjust the email templates, and end-of-term settings to what suits you. The default settings of s2Member are good enough, though.

Don’t forget to ‘Save All Changes’.

Generate PayPal ‘Buy Now’ Button

Now that the basic PayPal settings are saved, we’re ready to generate our membership buy buttons. Go to:

s2Member »» PayPal Buttons.

On that page, you can create a PayPal button for each access level. The membership site I’m creating has only one premium access level, ‘Top Secret’. So, I’ll just create one Level #1 PayPal button:

In this screenshot, you can see the settings I used for my button. You can use whatever settings suit you. After clicking on ‘Generate Button Code’, I got the following shortcode:

[s2Member-PayPal-Button level="1" ccaps="" desc="Top Secret Clearance" ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="example.com" ta="0" tp="0" tt="D" ra="1000" rp="1" rt="M" rr="1" rrt="" rra="1" image="default" output="button" /]

You’ll notice the shortcode above has many values. To learn about what each one of these does, scroll to the bottom of the ‘PayPal Options’ page and read ‘Shortcode Attributes ( Explained )’. It’ll tell you how to customize your code and even how to use custom images instead of the default PayPal button image.

This shortcode will produce the PayPal button that will redirect visitors to PayPal to make the payment. Take note of the generated shortcode, we’re gonna be needing it later.

Setup Automatic Follow-up and Mailing Lists

One of the main benefits of having ‘Open Registration’ is letting visitors provide their basic information before paying, so we can use that information to:

• gain insights into our potential buyers
• follow-up with non-paying subscribers
• build a list of people who are active in our market

s2Member supports two mailing list services: AWeber and MailChimp. The instructions below are for AWeber (but can also work for MailChimp with some adjustments):

So, to follow up with non-paying subscribers and maintain a list of buyers in our industry, we first create two separate lists in AWeber:

1. Follow-up list
2. Announcements list

s2Member will automatically add people who register to our ‘follow-up’ list. Then within AWeber, we can setup our follow-up list to automatically dispatch a follow-up email within a few hours of registration, then a second follow-up the next day, a  3rd follow-up the day after that, etc.

Once the user makes the payment, s2Member will remove them from the ‘follow-up’ list and add them to the ‘announcements’ list.

The announcements list can be used to communicate with active members in our market. It can be used for sending interesting offers, promotions, news, updates, etc.

Adding the Mailing Lists

Got to: s2Member »» API / List Servers

And paste the ‘follow-up’ list ID for ‘Free Subscribers’ and the ‘announcements’ list ID for ‘Level #1 Members’

Next, you need to configure an AWeber Custom Email Parser. For more details on this, see the s2Member in-plugin documentation (shown in the screenshot above).

Configuring the Opt-in Checkbox

s2Member gives us a choice: add registrations to mailing lists automatically or display a subscription checkbox on the registration form.

We don’t want that checkbox. We wanna add subscribers silently. To do that, find ‘Registration / Double Opt-In Box’ on the ‘API / List Servers’ page and select ‘No ( disable — do NOT display or require the Checkbox )’ from the drop-down menu.

Automatic Removal of Paying Members from Follow-Up List

Next we want to configure s2Member, so that it will automatically remove people from the follow-up list the moment they become paying members.

To do that, find the ‘Automate Un-Subscribe/Opt-Outs’ box on ‘API / List Servers’ page. And set your options like this screenshot:

(Note that a similar (and perhaps smoother) setup can be achieved with MailChimp as well, so you can use MailChimp if you prefer.)

Designing The ‘Login Welcome Page’

When a visitor logs in to our membership site, the first page they’re gonna see is the ‘Login Welcome Page’ that we specified during the initial configurations. Think of this as the ‘Start’ page for members. From here, they’ll be able to navigate our premium content.

But because we have ‘Open Registration’ even non-paying subscribers will see this ‘Login Welcome Page’ first when they login. But like I said before, they won’t be able to access premium pages that are linked from there. That’s why, we’re gonna employ s2Member user-friendly scripting API to display a special message to non-paying subscribers. This message, which appears in the red box below, will be hidden from paying subscribers.

You can click on the image to see it in full size.

So, that’s my ‘Login Welcome Page’. It’s titled ‘Access Granted’. In making these nice boxes that you see above, I utilized the J ShortCodes plugin. It’s an awesome little plugin for this kind of thing. I also utilized s2Member Script API to display the red box only to those subscribers who still haven’t paid.

Here’s the simple script I wrote:

[s2If current_user_cannot(access_s2member_level1)]
 
Dear [s2Get constant="S2MEMBER_CURRENT_USER_DISPLAY_NAME" /], You are almost ready to access the most vital information of the century. It all lies in the documents below. To gain access to the linked pages, subscribe now.
 
[s2Member-PayPal-Button level="1" ccaps="" desc="Top Secret Clearance" ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="example.com" ta="0" tp="0" tt="D" ra="1000" rp="1" rt="M" rr="1" rrt="" rra="1" image="default" output="button" /]
 
[/s2If]

This script goes in the post/page editor in WordPress, like regular post content.

Of course, without reading the s2Member scripts API documentation, this will make little sense. So, go to:

s2Member »» API / Scripting

And read every bit on that page. With that, you’ll have a solid understanding of how this works and you’ll be able to do much more with it.

Offering Protected Downloadable Files

Say I have blueprints and 3D designs of secret government stuff, weapons, locations, etc. I want to allow my subscribers to download these files and open them in their respective programs, like AutoCAD, but I want to protect these files from direct access.

If I had audio files or images, then perhaps I could just display them on protected pages on my membership site, but not everything can be embedded into web pages. That’s where s2Member’s ability to protect downloadable files comes in!

Configuring Download Protection Options

s2Member provides plenty of configurations for protecting downloadable material. You can see all of them by going to:

s2Member »» Download Options

Of special interest to us on this page is the ‘Basic Download Restrictions’ box.

As you can read on the screenshot above, any file that you place in /wp-content/plugins/s2member-files/app_data will automatically be protected. No direct access will be allowed. To link to a file that has been placed in this special directory, you’ll use the following format http://example.com/?s2member_file_download=filename.zip. However, you should know that this link would work even if accessed by a non-member. If you’re worried about this, you have two options: either limit the number of allowable downloads per day or use ‘Advanced Download Restrictions’.

Publishing Protected Links

Once the file is uploaded and protection options have been configured, we can create a members-only page from which we link to the protected file.

And below is how the final page will look like (we can link to this page from the ‘Login Welcome Page’ that we created earlier):

Setup a Members-Only Discussion Forum

To create a members-only discussion forum, we’re going to use bbPress, which is a forum plugin that integrates seamlessly with WordPress.

Download, activate, and create your first forum with bbPress. Then, let’s go ahead and protect that forum.

To protect a newly created forum, the first step is to go to:

s2Member »» Other Integrations

In the ‘bbPress® Plugin Integration ( 2.0+ plugin version )’ box, you’ll see ‘Update Roles/Capabilities’ button. Click on that.

Now, if you don’t yet have pretty permalinks enabled in your WordPress site, enable it now. We need to enable permalinks because to protect bbPress forums and topics within that forum, we’re going to use s2Member’s URI restriction option.

To enable pretty permalinks, go to: Settings »» Permalinks

Select ‘Custom Structure’ and use /%postname%/. Save changes.

Let’s say your forum’s URL is http://example.com/forums/, which is the default URL for a bbPress forum. We’re gonna tell s2Member to protect any URL that has the keyword /forums/ in it.

So go to: s2Member »» Restriction Options.

In the ‘URI Restrictions ( typical w/ BuddyPress )’ box, enter /forums/ in the box of the lowest level that’s allowed to access those URLs. In my case, that’s Level #1.

That’s it. Now when someone without the required permissions tries to access your members-only forum, they will be redirected to the sign-up page.

Final Thoughts

I hope that you found this tutorial helpful.

Frankly speaking, while this membership website covers the most essential basics, there’s a lot that it is missing.

For starters, we can complement our protected content with some free and publicly viewable content. This will allow us to tap into some search engine traffic. The sales front page is far from perfect. It needs a lot of work to be ready for a real membership website. The layout of the site isn’t optimal. I used the TwentyEleven theme, which is good for blogs, not membership sites.

So, I know we haven’t created the most sophisticated membership site around. But that wasn’t the intended goal from the beginning. The purpose was to get you acquainted with what’s possible through WordPress and s2Member and to introduce you to great free resources that can get you started.

s2Member, by the way, also has a Pro module which provides even more advanced features.

• Tweet
• Share