Create subscriptions in WordPress with Pico

Become a Pro member to access all content

240+ instructional videos led by professionals
Weekly expert workshops and replays
1-1 consultation with the Makerpad team
Over $50k in discounts for tools
Private peer community
Profile for tracking progress and sharing your work
Yearly pricing
$249/year
Start your 7 day free trial*
Get PRO Yearly
Lifetime pricing
$600billed once
Start your 7 day free trial*
Get PRO Lifetime

Need a way to create and manage subscriptions for individuals and groups? With Pico, you can manage free and premium content subscriptions. All you need is a little HTML and CSS, but don't worry—we provide the code for you so all you have to know is how to copy and paste.

Need a way to create and manage subscriptions for individuals and groups? With Pico, you can manage free and premium content subscriptions. All you need is a little HTML and CSS, but don't worry—we provide the code for you so all you have to know is how to copy and paste.

Within WordPress, head to the plugins panel and search for Pico. Install and activate this plugin. In Pico, under Settings → Integrations, connect your Stripe account. Then grab the ID and API for WordPress and paste those into the WordPress Pico Plugin. If you did not sign up with Pico with a domain, you will need to have a URL in the Primary URL field of your settings. In this example, the domain should be the WordPress domain.

Next, within Pico, under Settings → Newsletters add your Free and Premium newsletters. Then head to the IAM tab and create a Registration Rule. First, select your audience under the Exposure tab. Then head to the Access tab. Here is where you can set how people subscribe to your content, either by email, Facebook, and/or Google, and which content they can register for.

In WordPress, create a Subscribe button and select 'Edit as HTML' on that element. From the Registration Rule, under Popup, copy the PicoRule class and paste it into your button after wp-block-button. Then we are going to add a PicoSignal which will tell the element when to show and when not to be shown. We want registered users to see an option to Go Premium after they have registered so we are going to add a HideWhenRegistered class to our button. Your button's HTML should look like this:

Add another button element to your WordPress page and label this one 'Go Premium' or something similar to indicate a user can upgrade. Head back into Pico, and this time under Monetization Plans, click '+ Add plan'. Select 'Individual Subscription' and click 'Get started.'

Select your Audience and then head to the Offer tab. Here is where you can set tiers. Let's create a Premium tier and set the price. Select your Premium newsletter under 'Require a subscription to this tier for access to the following newsletters'. From the Popup tab, copy the class PicoPlan. Save your plan and then head back to WordPress. Paste this class into your 'Go Premium' button.

We also want to set a PicoSignal here to show when a user is registered. The HTML for your button should look like this:

Now, in WordPress, go to your Dashboard and select Appearance → Customize → Additional CSS. Paste in the following CSS:

.PicoSignal[data-pico-status=registered],
PicoSignal[data-pico-status=paying]{
display: none !important;
}
.ShowWhenRegistered {
display:none !important;
}
.ShowWhenRegistered[data-pico-status="registered"],
.ShowWhenRegistered[data-pico-status="paying"] {
display:block !important;
}

Click Publish. Now go to your page, preview it in a new tab, and test it out. Special thanks to Caleb at Pico and Aleks Basara for providing the low-code support for this tutorial.

Become a Pro member to access all content

240+ instructional videos led by professionals
Weekly expert workshops and replays
1-1 consultation with the Makerpad team
Over $50k in discounts for tools
Private peer community
Profile for tracking progress and sharing your work
Yearly pricing
$249/year
Start your 7 day free trial*
Get PRO Yearly
Lifetime pricing
$600billed once
Start your 7 day free trial*
Get PRO Lifetime

Need a way to create and manage subscriptions for individuals and groups? With Pico, you can manage free and premium content subscriptions. All you need is a little HTML and CSS, but don't worry—we provide the code for you so all you have to know is how to copy and paste.

Need a way to create and manage subscriptions for individuals and groups? With Pico, you can manage free and premium content subscriptions. All you need is a little HTML and CSS, but don't worry—we provide the code for you so all you have to know is how to copy and paste.

Need a way to create and manage subscriptions for individuals and groups? With Pico, you can manage free and premium content subscriptions. All you need is a little HTML and CSS, but don't worry—we provide the code for you so all you have to know is how to copy and paste.

Get help and discuss

Open community forum
Close

Sign up for our weekly updates

Get an update every Sunday with new content, news and a behind-the-scenes of what our community are building.
Join over 18,000 others
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.

Related Tutorials

view all ⭢