Setting Up a Membership Site with aMember and WordPress (integration guide)

I’ve not tested this guide since July 2011. Use at your own risk! For a more out-of-box membership site solution I recommend Magic Members. Feel free to install and contact me if you would like professional assistance in configuring. Please provide as much information about which content you are trying to protect.

This guide covers basic aMember installation/ integration, as well as some extra steps to customize your membership site, such as:

  • Creating a member landing page (the product redirect URL in aMember)
  • How to show teasers
  • How to customize what anonymous users see versus those who are logged in
  • Adding custom pre-teaser text to protected content, to encourage anonymous users to sign up
  • Creating a personalized login form

This guide assumes that you already have WordPress installed, and that you are relatively comfortable with uploading files and moving around in wp-admin as well as your aMember admin panel. Every installation is a bit different, this guide will work in most hosting environments, but some may need a few extra tweaks if you run into problems. If you get stuck you can always contact me with questions or request a proposal to finish up any parts you can’t get to work.

First things first,

Installing aMember

Be sure to purchase the WordPress plugin as well as aMember itself. Many people create an amember directory and upload the amember files there; feel free to use whichever directory name you’d like to. Users will only see ‘amember’ in the URLs on profile and account pages.

When you unpack your aMember files, the top level folder is called amember. If you want to change the name, rename the folder then upload it to the root of your site. Go to http://yoursite.com/amember/setup.php and run through the setup steps.

Upload the WordPress plugin folder to http://yoursite.com/amember/plugins/protect/, so you will end up with http://yoursite.com/amember/plugins/protect/wordpress/…

Go to the aMember admin panel (http://yoursite.com/amember/admin), click Setup/Configuration > Plugins. Choose WordPress from the list and save. Now ‘WordPress’ appears as a link in the top of the Setup/Configuration page. Click the WordPress link and you will see a page like this:

amember-wp-integration

It’s easiest to install aMember in the same database as WordPress, so we’ll select No for the first item on this page. Update from Rick: If you are using a table prefix other than wp_, aMember may not be able to see your database unless you select Yes, so try that too if you are having trouble at this point.

If everything ran smoothly during setup, the second item should display the database that is being used by WordPress. For the latest versions of WordPress you don’t have to do anything for items #3, 5, 6 and 7. For #4, choose 2.8.

Default WordPress Role- this should usually be set to Subscriber. and the Default WordPress level set to 1. These settings indicate the WP role a user has when they have no active subscriptions // this is the role that users revert to if/when their subscription expires.

If you are having trouble with basic installation and integration refer to your aMember Manual (you will have to have an aMember account and be logged in to view).

Create a Membership Product

In your aMember admin panel, go to Manage Products and click to Add New Product. Enter whatever title and description you want and hit save. You will come back to edit this product later and assign your new WP role, which we will now create…

Creating a Custom Role

Now that we have aMember and WordPress connected, we need to define a new user role so that members can see protected content.

To clarify things a bit, we will be using 2 different role type plugins: Role Scoper and Role Manager. Role Manager will only be used to create new roles, and can be deactivated once your new role(s) are created, as Role Scoper will be controlling access to your protected content.

You might luck out like I did, and get Role Scoper to create a WP role, but I was not able to reproduce this on other sites (I can always get Role Scoper to create new RS roles, but not WP roles), so I’d say just use Role Manager as described below to create your new role(s). The way you can tell if a role is a full WP role is to check the WordPress Role field in an aMember product to see if the role is available, or go to Roles>General in wp-admin and your role should be surrounded in brackets [] like the default WP roles.

Using Role Manager to Create a New WP Role

Install the Role Manager plugin as you normally would, and activate. Go to Users>Roles. Scroll to the bottom and type in your new role name (only letters or numbers). Select Read as the capability associated with the new role. Click the button to create the new WP role.

Check that the role has been created by going to your aMember admin panel and edit the product you created earlier (Manage Products, then click ‘edit’ next to a product). Scroll down to the bottom and your new role should be one of the options for WordPress role. Select that new role, as well as Subscriber if you like. You can deactivate the Role Manager plugin at this point.

Protecting Content with Role Scoper

Install the Role Scoper plugin as you normally would, and activate. There are many settings to this plugin, most of which can be left to the default configuration. There will now be 2 new wp-admin tabs.

Go to Roles>General. You should see your new WP role listed in the top box.  Make sure that Assign is selected for the first item. Check the box next to your new role an scroll down a bit. Select Post Reader from the first list, and Page Reader from the second -nothing else- and click Update (at the top of page):

role-scoper-roles-gen

Now go to edit a (or create a new) post. This will be our first protected item. Enter a title, some content as normal, then scroll down to the Readers tab:

  1. check the Restrict for Post (Only selected users/groups are readers) box
  2. check the box next to your new role>

role-scoper-post-edit

Publish the post.  To test out whether your premium post is behaving as it should, Log out, go to one of your index pages where the post would be listed and you should see the default messages that Role Scoper uses to signify premium content to those who are not logged in. You might want to have 2 different browsers open so you can stay logged in on one, and logged out on the other to see the perspective differences as you customize things.

Customizing Premium Content Notices in Teaser Text

Using Role Scoper, go to Roles>Options. As I mentioned, there are many options that I’ll leave up to you to investigate more fully. As you can see, it’s possible to set up a number of interesting configurations for permissions based on user groups, individual users and WP roles.

Scroll down to Hidden Content Teaser and check to enable teasers. Select the final option (excerpt, pre-more- or first 50 chars) from both dropdown lists, selecting anonymous below. Keep the ‘hide private posts/pages’ box checked (in most cases).

First a look at the difference between the content and the excerpt. As you can see in the Hidden Content Teaser section, there are blocks for users who are *not* logged in and for users who *are* logged in. Then within each of those sections is a block for if the *content* is shown and a block for if the *excerpt* is shown. Many themes just use the_content. Most of my themes use the_excerpt (or the_excerpt_reloaded which works the same way with this plugin) for everything but the full post/page view.The Role Scoper plugin will excerpt instances of the full content anyway, but the two different sections of this page can be used to make a different premium content notice for full content pages versus the ones shown on index pages (IF you use the_excerpt in your index pages). In either case, follow the instructions below (using the_excerpt in your index templates will effect the different notices if that’s what you want).

role-scoper-teaser

Post Teaser Text (anonymous users) is the first section to look at.  If you want you can add prefixes and/or suffixes to the post title by using the Name fields. For this example I’ve chosen to a display premium content notice at the top of premium posts on index pages, and at the top and bottom of premium posts for full content views. Again, these will only be displayed to those who are not logged in.

As you can see in the pic, you can use HTML code so that you can easily style your notices using CSS.  A simple example would be

<div class=”join”>This is premium content. To read the full article you must be <a href=”http://yoursite.com/amember/signup.php”>registered</a> and <a href=”http://yoursite.com/amember/login.php”>logged in</a>.</div>

Be sure to replace yoursite.com with your actual domain.

Then open up your theme’s style.css file and add the style like so

.join {background-color:#F4F4F4; border:2px solid #FFCC00; padding:20px; }

Play around with it. You can add a background image using CSS or add an image directly to the teaser text form. perhaps just a color badge/icon that says premium content.

Post Teaser Text (logged users) is the next item on this page. I chose not to have anything special appear to logged in users, but you may want to prefix premium content and excerpts to let your logged in members know which content is premium. Though if you have a multi-level membership structure, you can use the ‘replace with…’ fields of this block to display messages to members who need to upgrade their account to access the content.

Pages Teaser Text (anonymous users) and Pages Teaser Text (logged users) should be easy to figure out. They are the same as the first two, but work for protected *Pages* rather than Posts.

Creating a Member Landing Page

In each product in your aMember admin panel there is a form field called Product URL. This is the page that members will be redirected to once they have logged in. The simplest thing is to enter the main URL for your site, but for a more personalized user experience you may wish to create a custom landing page for your members that is different from the main pages of your site. For our example, our member landing page will have a different sidebar (and widget area), and only lists protected posts.

To do this we need to create a page template.

Open the index.php file of your theme and File>Save As… page-members.php (or any unique page name). To the very top of this file add the lines:

<?php /*
Template Name: Members
*/ ?>

This will make the template available from within the Page>Edit screen once we’ve uploaded everything. (The reason I chose index.php is because we want the next/previous links to appear at the bottom of the list of posts. You will probably need to add a page title line if you want a main page headline above all the posts –look in your theme’s archive.php to see how it does the pagetitle. If your member landing page is going to be a static page rather than listing protected posts, you would make a copy of page.php instead)

We will be adding to this page template, so keep it open for now.

Creating a Custom Sidebar

If your theme is like most, the sidebar also contains an optional widget area, so let’s create a sidebar widget area for our member page while we’re at it. In your new Members page template, find where it says get_sidebar(); and replace with include_sidebar(‘sidebar-members.php’);

Open your sidebar.php and File>Save As… sidebar-members.php. Now, if your sidebar is widgetized, you should see a line that looks like <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘sidebar’) ) : ?>

Replace the text ‘sidebar’ with the name of your new widget area. Let’s call ours ‘members sidebar’, so we now have <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘members sidebar’) ) : ?>

Look for the <?php endif; ?> line in your sidebar-members.php file. Everything between the above line and the endif line will be replaced if a widget is placed in the new members widget area.

Your sidebar-members.php file should look something like this

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘members sidebar’) ) : ?>
<?php // stuff to show if now widgets are placed -replace this whole line ?>
<?php endif;?>

Save your sidebar-members.php file and open up the functions.php file in your theme folder. We need to define our new widget area. Add the line

if ( function_exists(‘members sidebar’) ){register_sidebar(array(‘name’=>’sidebar’,’before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,’after_widget’ => ‘</div>’,’before_title’ => ‘<h2 class=”widgettitle”>’,’after_title’ => ‘</h2>’));}

You should place this beneath the default dynamic sidebar line in functions.php, but if you’re unsure you can place it first thing, on a new line *after* the <?php line. This will shift your existing placed widgets if you put it before the other sidebar line, in which case you can just rearrange your widgets from the Appearance>Widgets panel.

If you’re using the default theme, your functions.php would look like this (includes the default dynamic sidebar, then our new members sidebar):

if ( function_exists(‘register_sidebar’) ) {
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’,
));
}
if ( function_exists(‘members sidebar’) ){register_sidebar(array(‘name’=>’sidebar’,’before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,’after_widget’ => ‘</div>’,’before_title’ => ‘<h2 class=”widgettitle”>’,’after_title’ => ‘</h2>’));}

Now we have a unique sidebar for our Members page template and a matching widget area so that we can easily add/remove and rearrange sidebar items.

List Only Protected Posts on the Member Landing Page

The simplest way to do this is to restrict posts by tag rather than if they are protected or not. For our example, we have added the WP tag ‘members’ to our site (Posts>Post Tags… add new, or add a new one on any edit post screen). Then we have to modify our page.members.php template a bit to list only post tagged ‘members’. (while you’re at it, edit your protected post from earlier, to add the ‘members’ tag so that it will appear in your Members page)

Look for the lines:

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

You’ll want to replace these with:

<?php if (have_posts()) : ?>

<?php
$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
$args=array(
‘tag__in’ => array(291),
‘showposts’=>5,
‘paged’=>$paged
);
query_posts($args);
?><?php while (have_posts()) : the_post(); ?>

Replace 291 with the ID # of your tag.  (To get this, go to Posts>Post Tags and hover over the selected tag. In your browsers status bar you’ll see the ID number at the end of the string of characters.)

Now it’s time to create a WP Page using our new template. First, upload all the theme files to your theme folder. Create a new Page and select Members from the Page Template list. Hit publish. Be sure to update your aMember product(s) Product URL field(s) with the URL of your new member landing page. and be sure to add your premium tag to any protected posts so that they will appear on the Members page.

Adding a Custom Login form to your Sidebar

To get you started, here is some code that will greet logged in members with their first name and welcome them back to [your site name], then provide links to their aMember account page, and a logout link. If a user is not logged in, they will see a login form and a ‘become a member’ link. I’ve added some HTML elements and style classes to make styling this block easier via CSS. Be sure to change the amember directory name if you named yours something different.

<?php if ($au=$_SESSION[‘_amember_user’]) { ?>
<p>
<b><?php echo($au[name_f]); ?></b>,<br />
Welcome Back To <?php bloginfo(‘name’);?>
<ul>
<li><a href=”<?php bloginfo(‘url’);?>/amember/member.php”>Manage Account</a></li>
<li><a href=”<?php bloginfo(‘url’);?>/amember/logout.php”>Log out</a></li>
</ul>
</p><?php } else { ?>

<div class=”login”>
<form name=”login” action=”<?php bloginfo(‘url’);?>/amember/login.php” method=”post”>
<br /><label>username &nbsp;&nbsp;</label><input class=”logininput” type=”text” name=”amember_login” />
<br /><label>password &nbsp;&nbsp;</label><input class=”logininput” type=”password” name=”amember_pass” />
<br /><input type=”hidden” value=”<?php bloginfo(‘url’);?>/amember/member.php” name=”amember_redirect_url”/><input class=”logsubmit” type=”submit” value=”login” name=”submit”/><br />
</form>
</div>
<li><a href=”<?php bloginfo(‘url’);?>/amember/signup.php”>Become a Member</a></li>

<?php } ?>

You’ll have to play around with the CSS to style the various components. Using something like the Firefox add-on Firebug makes CSS editing much easier. Once installed, just hit F12 or right-click>inspect element to see the styling for any part of a web page.

I hope this guide helps those of you trying to set up your own WP / aMember membership site. The next step for in many cases will be customizing the aMember templates. I’ll be writing a post on that next. If you have any questions feel free to add a comment below, but for quickest response or a quote on tweaking your site, best use the contact form.

Erin Bruce