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.

27 Responses to “Setting Up a Membership Site with aMember and WordPress (integration guide)”

  1. Ed says:

    This is a fantastic tutorial. I’ll try it out soon. Thanks so much for posting.

  2. Great to see you’re mastering how to integrate aMember and WordPress.

    Excellent step-by-step tutorial.

  3. brandon says:

    Very nice , although the problem I have, that I just can’t figure out is how to connect amember with WP in such a way they’ll be given their login information for the WP backend to view protecte posts.

    • Interstice Solutions says:

      I’m not sure you want to point members to the WP backend. You mean for members with an active subscription to see the protected content, right? To get started just open up the index.php file in your theme, and follow the instructions on this page. –check out the ‘Creating a Member Landing Page’ section alll the way through to the end. This will guide you through making a page template that lists protected posts using the WP tags method described in this article (a super lo-tech way to do it, there are other ways). Then you just have to create a new WP page using the template (and set it as your ‘product redirect URL’ in aMember if you want it to be a landing page).

  4. andreas says:

    i been looking for this WordPress plugin, where do i find it?

    cant seem to find and place to buy it or download it for free.. what is the plug in name? more then just wordpress plugin.

    hope i can get some help on this one :)

    • Interstice Solutions says:

      Andreas, aMember is a stand-alone script. You can get it at amember.com but it’s not free. You also have to purchase the WordPress plugin from the aMember site.

  5. sarat says:

    Very nice tutorial…I’ve been looking for this tutorial… Thank you for helping me.

  6. Dave Jackson says:

    There is a nice plugin that does a better job of the sidebar login. Sometimes, as in the Thesis theme, there is no sidebar.php or even an index.php area wherein you can edit.

    Super tutorial.

    I’ve used Interstice Solutions for an aMember install and they are top notch!

    Kind regards,
    Dave Jackson

  7. Miquel says:

    Hello, I did everything but the problem is that when I log in with amember login I can’t acces to the protected post and pages, and if I try to log in with wordpress login then I don’t understand what is doing amember.

    Sorry but it is not working for me, I must have done something wrong.

    Please help me ;)

    Kind regards,

    Miquel

    • Interstice Solutions says:

      Sorry to hear that. Be sure to check the ‘Readers’ tab for the protected page and make sure the role checked matches the role that your amember users are assigned (in amember product edit). First things first, check to see if you have basic integration: login via amember, then try to access wp-admin and see if you are logged in as the correct use (be sure you’re logged out from admin first). If you *are* integrated, and still not seeing the protected page when logged in, then I recommend using Role Manager instead of Role Scope for the protection-plugin component of your setup. I will try to write an expansion post on this soon, as Role Manager is actually quite a bit more flexible than Role Scoper, but takes a bit more knowledge/configuring too. Basically, rather than using the plugin admin area to manage permissions, you use capability tags in your theme files, like

      <?php if(current_user_can('premiumview')) { // where premium view is the role manager capability name
      ?>
      premium content
      <?php else { ?>
      regular content
      <?php } ?>

  8. Junaid says:

    awesome tutorial….very useful

    am busy setting up my membership site and this rocks….

    Thanks in advance

  9. Very helpful tutorial…thank you!

    I had only one problem when trying to protect posts. You said,

    “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 and check the box next to your new role:”

    I think you left off that you also need to check the “Restrict for Post (Only selected users/groups are readers)”. After I checked that box it was working correctly.

    Anyhow, great job. I’ve got this page bookmarked now.

    ~David

  10. samantha says:

    hi,
    thanks so much, really helpful. i’m having 1 small problem – when i’m logging in from sidebar, how do i get it so that instead of going to the default amember landing page amember/member.php, it goes to the landing page in wordpress that we created?
    thanks
    sam

    • Interstice Solutions says:

      I’ve found the easiest way of doing this is through aMember. Go to your amember\admin> Manage Products. Edit the amember product in question. The PRODUCT URL field is where you can put the URL of the page you want members to be taken to upon login.

  11. Dave says:

    Nice tutorial, but what’s the difference between going all through this and getting amprotect plugin for Gary?

    Let me rephrase that; can amprotect plugin by Gary help me avoid this rather long tedious tutorial?

    Thanks so much, I wish I could follow this up. I’ve been fiddling with this since yesterday.

    • Interstice Solutions says:

      Hey, Dave. I was not aware of Amprotect –looking it over now. Short answer: yes, it can save you lots of time BUT BE SURE TO WATCH the video and see if you can do the installation, as it is not 100% automatic either. the plugin looks nice and custom fit for fast content protection, but just to be clear, you can accomplish the same with free plugins mentioned above. Main thing is, I would check to see if you have amember installed correctly and if Wp and aMeber are integrated. This last step is a very common problem for newcomers, so if the Amprotect completes WP/aMember integration, or has simpler instructions, great, but I would check on that first. (if you think you have WP and Amember configured and you have signed up a test user, log out of WP, then login via aMember and then try to access the wp-admin panel. if it does not make you login, that means WP and amember are talking to each other)

      • soso says:

        you are absolutely right and your tutorial is done every thing you need to make automated membership website
        i really need rest of these tutorials these are very powerfull and helpful for us and for people who can’t know php cause plugins maker “i think “they play on people ignorance on these stuff and ask “for my point of view” alot of money for the same option that you can accomplish with free plugins as you mentioned above this is not fair and you are so good and so amazing cause your are doing the right thing .
        thank you

  12. Gabriela says:

    Hi,

    Thank you for this awesome tutorial, it helped me a lot in my quest to put together my first membership website! I have only one problem and I wanted to give it a shot on asking you, since you help so many people in your comments: what to do about including the wordpress header into amember? More exactly, I want to set up the signup.php and the login.php pages in amember with the wordpress header and the wordpress footer.

    Thank you very very much!

    • Interstice Solutions says:

      Oops didn’t see this until now. To anyone else reading these, wanting assistance, use the contact form if you don’t get a response here. To answer your question, this can be tricky and sometimes comes down to server variables –with some hosts I’m able to get it to work, on others not. As far as *how*, most of the guides found using google are comparable and the right way to go. One server setting seems to be whether html files can be run as PHP –which is required to include the main blog header file.

  13. Alastair says:

    Hi Erin,

    Awesome post, some really great info in there. I will definitely be talking to you and/or recommending you when I need expert help or have Amember v WordPress clients to refer.

    One thing I found with one or two of the code blocks in your post above is that they use smart quotes (i.e. MS Word style “smart quotes” which break code). Check out the “Adding a Custom Login form to your Sidebar” section particularly around the a href= links.

    I have a new Amember/WordPress/VBulletin website launching soon – you’ve helped me move that forward here, many thanks for that.

    Regards,
    Alastair.

    • Interstice Solutions says:

      Thanks for the heads-up, Alastair, I am fixing those characters now (sometimes WordPress alters encoded characters upon resave). Glad you found this article useful ;)

  14. Dan says:

    Great tutorial, helped me a lot, although the Role Scoper plugin seems really complex!

    One problem I’m having is that when you’re not logged in to aMember, any restricted posts are not listed in the archives, and post navigation is also not visible. Is there any way around this, so that non-members can still navigate through the teaser posts?

    Thanks!

    • Interstice Solutions says:

      Hi, Dan, I would need to take a look at your specific theme. Feel free to contact me for a quote on fixing up your theme so that you can see the components you mention.

  15. Kuldeep daftary says:

    Thank you So very Much! :) Its Very useful. Specially to a newbie like me. Even I’m currently building a website that will use wordpress, amember and VBulletin. So by far I’m confident about wordpress amember integration. Now next Step is integration of Vbulletin !! :)

  16. Thanks so much for the awesome tutorial, I have been looking around for something just like this. Thanks for sharing!

  17. Marco says:

    very nice information i was having trouble before reading ur article but now it is solved completely

Leave a Reply




Pingbacks