How to add membership to a Ghost theme?

Developer help
1

How can I add membership plans to a Ghost theme that doesn’t have a membership page? Although I have limited tech knowledge, I can do most things following instructions or videos. I am sorry to have to refer to WP, on my WP site I would be able to just create a button and then link that to Paypal or Stripe.

How can I create a membership page like this: [mod: dead link] https://ghostportal.co/membership/

I am not talking about the design or look. It could even be as simple as a text link.

Any help or advice would be appreciated. Thank you.

1 Like
2

Hi,

There are some steps to integrate membership into ghost theme. you need to adjust the routes & then you need to create the templates …

Below I am providing basic road map

Create a routes.yaml file as follow

routes:
  /signup/: members/signup
  /signin/: members/signin
  /account/: members/account
  /membership/: members/membership

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Next step to create directory & files as stated on routes file

Dir members

Files members/signup.hbs, members/signin.hbs, members/account.hbs & members/membership.hbs

Here i will give you an example only for membership page

So on the membership.hbs add basic markup & the pricing tables as follow

{{!< default}}
<div class="container">
 <section class="plans">
    {{#if @member.paid}}
    {{!-- Logged in, paying member: Redirect home --}}
        <script>window.location = '{{@site.url}}/account/';</script>
    {{else if @member}}
    {{!-- Logged in, member: Redirect subscriptions --}}
        <script>window.location = '{{@site.url}}/account/';</script>
    {{else}}
    {{!-- Not logged in: Sign up --}}
    <div class="membership-plans">
        {{!-- Free Plan --}}
        <div class="plans free">
			<div class="plan-header">
				<div class="plan-title">
						{{t "Free"}}
				</div>
				<h2 class="plan-price">{{@price.currency_symbol}}0 <span>/ {{t "Forever"}}</span></h2>
			</div>
			<div class="plan-features">
				<ul>
					<li>{{t "Access to all free & members only posts"}}</li>
					<li>{{t "Support independent publishing"}}</li>
					<li>{{t "With advertising"}}</li>
				</ul>
			</div>
			<div class="plan-subscribe">
				<a class="btn" href="/signup/">{{t "Join Free!"}}</a>
			</div>
			
		</div>


        {{!-- Monthly Plan --}}
        <div class="plans monthly">
			<div class="plan-header">
				<div class="plan-title">
				{{t "Monthly"}}
				</div>
				<h2 class="plan-price">{{@price.currency_symbol}}{{@price.monthly}} <span>/ {{t "Month"}}</span></h2>
			</div>
			<div class="plan-features">
				<ul>
					<li>{{t "Access to all preminum posts"}}</li>
					<li>{{t "Weekly updates with new content"}}</li>
					<li>{{t "Support independent publishing"}}</li>
					<li>{{t "Secure card payments"}}</li>
					<li>{{t "No advertising"}}</li>
				</ul>
			</div>
			<div class="plan-subscribe">
				<a class="btn" href="javascript:" data-members-plan="Monthly">{{t "Subscribe"}}</a>
			</div>
			
		</div>


        {{!-- Yearly Plan --}}
        <div class="plans yearly">
			<div class="plan-header">
				<div class="plan-title">
						{{t "Yearly"}}
				</div>
				<h2 class="plan-price">{{@price.currency_symbol}}{{@price.yearly}} <span>/ {{t "Year"}}</span></h2>
			</div>
			<div class="plan-features">
				<ul>
					<li>{{t "Access to all preminum posts"}}</li>
					<li>{{t "Weekly updates with new content"}}</li>
					<li>{{t "Support independent publishing"}}</li>
					<li>{{t "Secure card payments"}}</li>
					<li>{{t "One easy payment instead of 12!"}}</li>
					<li>{{t "No advertising"}}</li>
				</ul>
			</div>
			<div class="plan-subscribe">
				<a class="btn" href="javascript:" data-members-plan="Yearly">{{t "Subscribe"}}</a>
			</div>
			
		</div>

    </div>
{{/if}}
                    
</section>  
</div>

Save the above file & restart your ghost you will be able to see the membership page with pricing tables… you need to design the page as your need but this is the basic concept…

for more details about how ghost membership implemented on a theme checkout Lyra theme

Hope this helps…
Cheers!

2 Likes
3

Thank you. Although I have not had to implement the above solution because I ended up buying a theme that has built in membership feature, however, you are very kind to post the solution for me.

4

You are welcome!