How to Setup a Demo Site for Your Plugin or Theme

John Turner founder of SeedProd Posted by John Turner on April 26, 2016

Last updated on: April 29, 2016

Resources

Try my test drive site out to see how it works at http://testdrive.seedprod.com

In this post I’m going to walk you through how to set up a demo site for your plugin or theme that potential customers can use to test out your product. There are a few plugins that exist already but none of them meet my needs so I explored how to create one. Let’s get started.

You need a few things to get started. WordPress Multisite, Gravity Forms with the User Registration Add On and Zapier (the free version will work).

Once you have these things in place the next thing you’ll want to do it activate Gravity Forms on the base site of your multisite instance and create a user registration form. Here’s what my main demo site looks like. It simply prompts for an email and has a no robot CAPTCHA to prevent spam sign ups and a create button. I want to capture the email so I can follow-up with the potential customer and the rest of the process should be an easy one click and go.

Coming Soon Demo ScreenShot

You can access the theme I use and all other assets at the bottom of the article under Resources at the top of the article.

To create the Gravity Form for this site make sure you have the User Registration Add On activated on the main WordPress site on your Multisite Install. Then create a new form and add a single line plain text “username” field and an email field like this.

2016-04-25_16-11-59

Then disable any notifications for the form and add a redirect confirmation like this. This will redirect a user back to the main site with the username in the url. We’ll use this to auto login the user.

2016-04-26_14-30-15

Next add a User Registration Feed using these settings below. This will create a new site within WordPress multisite for every user who registers on our site. It will also generate a password for them and send them their credentials. You can make check “User Activation” depending whether you want the user to verify their email before the site is create or not. Right now I don’t verify but may in the future if I get lots of fake emails.

2016-04-25_16-14-03

So you’ll notice we created a form that ask for a username but we don’t show that field in the registration page. I have added custom code to my theme that hides that field and uses javascript to create the username while they type their email for the form. The code is include in the theme at the top of the article.

Next add the Gravity Forms No CAPTCHA reCAPTCHA plugin from wordpress.org This will allow you to add a better recaptcha than the one provided out of the box with Gravity forms.

OK, so far we have created a gravity form that creates a site for the user and sends the user his or her info. Remember when created the confirmation that redirected back to the home page with the username. Now we are going to create a small plugin that auto logins our new user and send them to our plugins settings page. If you prefer not to do this and have user confirm their email before they register just make sure to create a default notification instead of redirecting.

Here’s the code I use to auto login the user: (This code is include in the plugin at the top of the page.)

In this code we are exclude our Super Admin username for the multisite from the autologin, accepting  a username and logging in that user to their test site. In the theme we add code to redirect the user to our plugin page if username is passed in. (This code is include in the theme at the top of the page.)

As you can see I added a firstrun=1 to the query of the redirect. This allows us to show a video or some kind of on-boarding message on our plugin page.

Here’s code I use to show a on-boarding message. In my case I show a message and a video. (This code is include in the plugin at the top of the page.)

I also add code to show a contact form. This code show my HelpScout Beacon contact form. Here’s the code: (This code is include in the plugin at the top of the page.)

OK the user now has an account and has been on-boarded. They can now test and play with your plugin or theme. The only thing left to do is delete the site after a given amount of time. I give the user 24 hours to test. To delete the site after 24 hours add the Gravity Forms Zapier Add On to the main site.

Log into Zapier and create a new Gravity Forms Zap. Follow the setup instructions provided by Zapier to Connect Gravity Forms to Zapier. Zapier will provide you will a unique url that you will add in Gravity Form that will post the info to Zapier after a form is submitted.

Next add a Delay by Zapier action. You can set the delay time to fit your needs. In my case I set it to 24hours.

2016-04-26_14-59-18

Next add GET Webhook action. Enter the url to your demo site and two query string parameters, action and email, with actions value being delete and the email value being value of email from the form.

2016-04-26_15-00-44

So after 24 hours of the site being created, Zapier will now send a get request with these two parameters. Now all we need to do is delete the site. Here’s the code I use to listen for the GET request and delete the site.

What this code does is exclude any request that passes in our Super Admin email. Then it makes sure we have the action and email and looks up the user id by email. We then find the blogs for that user and delete. Then we delete the user.

And that’s it We have create a form that creates a site the we delete it 24 hours later. If you have a pro Zapier account you could add another step  in the zap and add the user to an email marketing sequence. In my case I add the user to my Drip account.

2016-04-26_15-12-23

It literally took me 15 minutes to set up my test drive site.  It does every thing I want it to do and I can customize and automate it any way I want. Since I’m using Zapier I can also send the data anywhere I want. So there you have it, a DIY test drive site for your plugin or theme.

John Turner founder of SeedProd

By John Turner

John is the founder of SeedProd.com and a WordPress Developer with over 15 years of development experience.

14 thoughts on "How to Setup a Demo Site for Your Plugin or Theme"

  1. Tamhas says:

    Looks awesome, would love to set this up as landing page bait … just like you have done! I will have a try, thanks!

  2. njwrigley says:

    This is a great article and is perhaps just what I’m after. It would appear that this kind of functionality is needed more than ever, now that Ninja Demo has ceased to exist (for now at least).
    Thanks for contributing this.

    1. Ann Taylor says:

      MotoPres demo builder is a great alternative to Ninja Demo, btw

  3. Craig Hewitt says:

    Great article John. I love being able to show potential customers exactly what products are all about and this does a great job of achieving that. Thanks for the awesome writeup.

    1. John Turner says:

      Glad you found it useful Craig! Cheers

  4. Richard Young says:

    Fantastic Info John!

    Two questions…

    1) Will I need to purchase the Developer License for Gravity Forms? (It’s the only one with Multisite)

    2) I’d like to create on my demo sites for clients before transferring them to a permanent site (as well as the type of demo this provides). Can I prevent the sites I create from being deleted after 24 hours?

    Thanks

    1. John Turner says:

      You need the registration add on, which ever license has that. Just don’t do the zapier part in the instructions and the site will not be deleted!

      1. Richard Young says:

        Thanks for the fast reply! Ouch! The Developer license then.

        I’ll have to create another multi-site to do my client demos then. ;)

  5. Sergio Rojas Blanco says:

    Hi John, congratulations for your plugin an thank you for sharing your work. It’s just what I needed.
    I have followed your instructions but after registering a new user it redirects me to an unexpected address:
    http://my-domain.com/?username=newuser
    As you see, insert a question mark in the query string.
    I tried to hide that sign but I didn’t get it. What can I do?

    1. John Turner says:

      You can remove here in the instructions about. Just uncheck pass query string! https://goo.gl/nm7n2w

      1. Sergio Rojas Blanco says:

        Thanks!. I’ve copied the query string in Redirect URL and I’ve unchecked the Redirect query string option and it works fine.

  6. hasan topkaraoğlu says:

    hello,

    Is it possible to add and display the remaining demo time on the wp-admin toolbar?

    thank you best regards.

    1. John Turner says:

      You could add it for sure, I don’t have any code for that though to give you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Made with in Charleston, SC USA

Copyright © 2019 SeedProd LLC
Terms & Conditions | Privacy Policy | SeedProd Coupon Code