Blog What? Design: What will you publish today?

After surveying a number of content access systems supporting a paid subscription model, we settled on a service called Tinypass. Tinypass has gathered a great amount of fantastic press most recently when prolific blogger Andrew Sullivan and our friends over at BKLYNR made the switch to start charging for their high quality content–and seeing great results, with some in the six-figure range!–as well.

It’s no secret that we’re the ultimate fans of WordPress as a CMS, so when we saw the company’s great WordPress support, we knew that Tinypass would be a perfect fit for our client. Ultimately, Tinypass provides a slick and streamlined solution for sites looking to charge for their content, whether it be on a one-time, per-article basis or for entire site access at a monthly cost, even with options for a free trial month and more.

Below is a great tutorial from our lead developer Chase Wiseman on what you’ll need for an advanced, custom integration of WordPress and Tinypass. Check out our blog again soon for our further findings on the Tinypass platform from a marketing and product perspective as well.

Tutorial: What You’ll Need for a Custom WordPress/Tinypass Integration

Here I’ll detail some of the steps I took in order to have WordPress and Tinypass play nicely. If you are only wanting to get Tinypass up and running on your blog quickly, then I recommend that you consider using the official Tinypass WordPress plugin. The plugin has plenty of options and should meet the needs of most standard blogs.

While their plugin is suitable in a lot of cases, there are a few distinct areas where it falls short:

• There doesn’t seem to be out of the box support for custom post types or pages.
• Lack of styling customization – You can’t alter the look and feel of the interface too much here.

Head over to their setup tutorial to determine if the plugin has what it takes to meet your needs.

Alright, so from here on I’ll give some general tips and functions for custom Tinypass integration. This article makes a few assumptions:

1. You are very familiar and comfortable with WordPress plugin and theme development.
2. You can take these ideas and bend them to your own needs. This is not a “copy, paste, and save” tutorial.
3. You already have a registered Tinypass account and have an app ID already set up.

With that in mind, let’s roll.

The Scenario

Let’s say you have a site with a variety of content ranging from blog posts, pages, and a custom content type. You’d like all visitors to have access to general information, but would like to offer paid monthly access to most of the site.

First Steps

I recommend reading Tinypass’ API basics first to familiarize yourself with their terminology and how their subscription model works. Check it out here: http://developer.tinypass.com/main/index

In general, I find it best to create features like these with custom WordPress plugins rather than in the theme itself. The below code can be adapted to apply to either situation.

Right off the bat we’ll need to include the Tinypass SDK that will give us some nice built-in functionality. You can grab the PHP library here: http://developer.tinypass.com/downloads

Place the downloaded SDK in its own folder, include the main file, and define a few variables, like so:

// Include the SDK loader.
include_once 'path/to/sdk/TinyPass.php';

TinyPass::$SANDBOX     = false;
TinyPass::$AID         = 'your_app_id';
TinyPass::$PRIVATE_KEY = 'your_private_key';

This will tell the SDK which account to talk to when making requests. If you’re using a sandbox account then will obviously want to set TinyPass::$SANDBOX to true. Make sure to replace the $AID and $PRIVATE_KEY placeholders will the actual keys from your Tinypass dashboard.

Next, you will want to use the SDK to render a signup button for your viewers to click. Check out this example function:

function my_tinypass_button() {

    $rid = 'Premium-Content';

    $resource = new TPResource( $rid, 'Site wide premium content access' );

    $subscription_option1 = new TPPriceOption( '[0 | 30 days | 1] [2 | monthly | *]' );

    $offer = new TPOffer( $resource, array( $subscription_option1 ) );

    $request = new TPPurchaseRequest( $offer );

    return $request->generateTag();
}

This will generate a default Tinypass button which triggers a popup, allowing visitors to signup and pay for the subscription. There are plenty of customization options here, but the important bits are the $rid and $subscription_option1. The $rid stands for Resource ID and is the way Tinypass keeps track of subscriptions and the content they grand access to. Make sure this ID is consistent across all of the functions we’ll be defining in the future. $subscription_option1 uses the SDK’s TPPriceOption class to tell Tinypass what type of subscription to apply. In this case, it will be a $2/month with a 30 day free trial period. There are plenty of possibilities here, so check out the documentation for the syntax used by this class.

Next, we’ll want an easy way to determine if the current visitor has actually paid for the subscription. This is an example of a function that would do just that:

function my_tinypass_is_subscribed() {

    $rid = 'Premium-Content';
    $store = new TPAccessTokenStore();

    $store->loadTokensFromCookie( $_COOKIE );

    $token = $store->getAccessToken( $rid );

    if ( $token->isAccessGranted() )
        return true;
    else
        return false;
}

This will check the visitor’s cookies and if they have access, will return true. If the $rid for your content is not found, it will return false. Again, note the $rid. It must match the rid that we defined when generating the signup button in the previous function.

This new my_tinypass_is_subscribed() function can be used anywhere to decide how to render the page for subscribers and non-subscribers alike.

WordPress, ahoy!

Now that we have those important building blocks, we can start applying them throughout your WordPress site. There are endless options to how we can restrict and alter the content of the site here.

Let’s say we have a post type called Member Special and we only want to grant paid subscribers access to these items. We want the title and meta data of these posts to be visible to anyone, but we want the meat of the articles to be hidden. We can use WordPress’ the_content filter to accomplish this:

function my_tinypass_member_special_content( $content ) {

    // If a subscriber, let 'em through!
    if ( my_tinypass_is_subscribed() )
        return $content;

    if ( is_post_type_archive( 'member-special') || is_singular( 'member-special') )
        return 'Uh-oh! You must subscribe to view this post. Sign up or login below! <div class="tinypass_button>' . my_tinypass_button() . '</div>';
    else
        return $content;
}

This function first checks if we’re logged in to a paying Tinypass account. If we’re viewing either the post type archive for the member-special post type or a single member-special post, the content will be hidden and it will show a nice message and the Tinypass subscribe button instead. Otherwise, the post’s content will show as expected.

Let’s try another example. What if our site’s header has a big call to action button that says “Sign Up Now!” This will help bring in new subscribers, but the folks that have already subscribed certainly don’t need to see it! Something like this in your header.php template might do the trick:

<header>
    <!-- ...all of your other header info -->

    <?php if ( ! my_tinypass_is_subscribed() ) : ?>
        <a href="/signup">Sign Up Now!</a>
    <?php endif; ?>

</header><!-- .site-header -->

Hopefully you can see from these few examples how quick and easy restricting and altering content can be based on some quick Tinypass helper functions. While Tinypass’ official plugin might do the trick in some cases, there are plenty of scenarios where deeper integration is required.

Button Customization

You may have noticed by now that the default button that Tinypass generates leaves a bit to be desired. The blue ticket graphic might work for some designs, but it is by no means one size fits all. I’ve found that this is the Tinypass API’s one major shortcoming. They don’t seem to offer an easy, non-hacky way to generate a completely custom signup button. It’s not necessarily a show-stopper, but hopefully they can find a way to make this easier in the future. For now, we can use some jQuery trickery to have a fully customized experience.

Consider this: we want to have multiple “Signup” buttons throughout the site, all of which we want to trigger the default Tinypass popup to start the process. Rather than using the my_tinypass_button() function in every spot, thus rendering that bulky blue ticket graphic over and over, let’s only print that button once, hide it, and have all other “Signup” links point to it.

Simply place that template tag somewhere before the <?php wp_footer() ?> and </body> tags, and wrap it in a hidden div, like so:

    <!-- ...the rest of your site up here... -->

    <div style="display:none"><?php echo my_tinypass_button(); ?></div>

    <?php wp_footer(); ?>

    </body>

</html>

That gives us way into the Tinypass world but hides it from view, allowing us to use our own buttons and styling. But what good is that thing if no one can see it? We then use a bit of jQuery to trigger that button:

// When a "Subscribe" link is clicked
jQuery( '.tinypass-subscribe' ).on( 'click', function( e ) {

    e.preventDefault();

    jQuery( '.hidden-tinypass-button img' ).click();

} );

// When a "Login" link is clicked
jQuery( '.tinypass-login' ).on( 'click', function( e ) {

    e.preventDefault();

    jQuery( '.hidden-tinypass-button .tp_login_click' ).click();

} );

So when any element that has the .tinypass-subscribe class is clicked, the hidden Tinypass button in the footer will be “clicked” and the popup will trigger as it should. Similarly, if there are any elements with the .tinypass-login class, a popup will trigger allowing subscribers to login to their existing accounts.

This opens up endless possibilities for allowing custom and complex site designs to have the subscription features of Tinypass while keeping site’s brand consistent to the end user.

Conclusions

With these basic building blocks and concepts, harnessing the power of Tinypass within the framework of WordPress should be less of a daunting task. I encourage you to read through the rest of the Tinypass documentation as there is plenty of good info and I can’t cover it all here. I look forward to seeing what Tinypass has in store for all of us and future of content subscription.