Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

How to Develop a Simple Content Locker Plugin Using WordPress

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

Although some see sharing as one of the core principles of the Internet, there are times where we only want to share some information with a certain group of people.

This information, let’s call it “premium content” for all intents and purposes, will only be shared with users who give us something in return. This “something” can be an email address, a PayPal donation, or simply a share on Facebook.

In this tutorial, I will explain how to create a content locker plugin that with a simple shortcode will let us  choose what content we want to make premium.

We will cover two examples:

  1. Once example will be a simple shortcode that will allow us to display content to users who are registered on the site.
  2. The other shortcode will require that the user must share the content's URL on Facebook in order to read the rest of the content.

In WordPress Social Invitations we use a very similar content locker that shows content only to users that invited their friends.

Note: Instead of adding code to a theme’s functions file and/or stylesheeet, I recommend creating a plugin to add it to your site. This method keeps everything in one place and let you use the shortcode on any other site.

What You'll Need for This Tutorial

To complete this tutorial, you’ll need:

  • a site with WordPress installed
  • a code editor
  • optionally, an FTP program to upload your plugin

Setting Up the Plugin

Start by opening a new file in your text editor, and giving it a name. In the examples that we're going to view in this article, you'll see that I've named mine wptuts-content-locker.php but you can call yours whatever you like.

In the file, insert the following code:

This sets up your plugin and tells WordPress its name and version.

Adding the Shortcode Function

Below the opening comment, we need to  add the function which will create the shortcode and hook it to the add_shortcode action hook:

We can now use our shortcode like this:

[premium-content method=""]Premium content goes here[/premium-content]

But wait! Let take a detailed look at the code above. 

As you can see, our shortcode accepts one argument that will split our code in two sections. This argument that I called “method” differentiates between using the “Like on Facebook” approach or a “simple logged in user” check.

Both method are similar in the logic as you can see in the following graphic:

If the user is not logged, we are showing a Login link using wp_login_url function and we also pass the post/page url. That way, after the user logs in, he will be redirected back to the post.

The Facebook method is a bit more complex and involves the use of cookies. We use them to store the post ID, in order to know which posts the user shared and which ones don’t.

The JavaScript File

We also need some javascript that will handle the cookie creation and the Facebook callback. Let’s create a file called script.js and paste the code below:

In this script, we are going to attach a callback function to the FB edge.create event. Specifically, this function will create the cookie we use in our main script to check if the user shared the post. Once the cookie is created, the script will reload the page to display the premium content.

Adding the Scripts to Our Plugin

Now we need to add our script file to the plugin, but let’s create first a very basic CSS file to style our plugin. 

Create a file called style.css and add the following code:

Now let register our scripts into the wp_enqueue_scripts hook:

Please note that we are using the has_shortcode function. That way we are going to include the JavaScript and CSS files only when needed and not on every page of our site. 

We also take advantage of the localize_script function to properly pass the post ID to the JavaScript file.

Conclusion and Code

In about 120 lines of code, we created a simple but very useful content locker plugin. That was easy, right?

The beauty of this plugin is that you can adjust it to work with any method you can think off. For example, instead of a Facebook like, you can ask the users to Tweet about your site, add a PayPal donation link, or anything else you can image.

You can grab the code from GitHub or try a demo.

Advertisement