Patron docs

Thanks for buying a copy of Patron!

Please make sure you read through at least the installation instructions below, to get your site set up.

Contents

  1. Intro
  2. Install and set up Patron in Ghost
  3. Customise your site
  4. How to
  5. Version history

Introduction to Patron

Patron is a theme that lets you create a content and membership site. In essence, it's like hosting an independent Patreon, where your fans/community can pay to access your member-only content, but on your own domain, on a platform you control.

You can charge monthly or yearly memberships and create member-only content for your paying subscribers.

Ghost also includes newsletters so you can send out your posts over email.

With Patron+Ghost, you can put content from any platform behind a paywall, including:

💬 If you have any questions, please email me or DM on Twitter.

⭐️ I offer Ghost hosting and concierge self-hosted installations.

Cheers!

  Dan Rowden

A brief overview of Patron

Buy Patron

Patron is priced at $49.

Special Offer: Every purchase of Patron comes with a $20 voucher for Cove, the commenting tool built into the theme. This is redeemable once you start a paid Cove plan ($5 or $10/month).

Looking for a Ghost host? A ghost site on Gloat costs $189/year, with no limits on page views or members.

Buy Patron $49

Installation

There are a few required steps to complete to install Patron. This includes setting up Ghost Members and adding menus.

Make sure to upload Patron in Ghost (Design > Upload theme) and complete the following steps.

Enable Ghost Members

This step is required in order to allow subscriptions to your newsletter. Members also enables member-only content in Ghost.

Go to Labs, click on Members and toggle "Enable Members".

Set up emails with Mailgun

If you are using Ghost(Pro), email is already set up for you.

For most other hosting options (including self-hosted sites), to enable newsletters you need Mailgun API credentials to send newsletters from Ghost. Currently only Mailgun is supported in the Members Beta.

Get your Mailgun domain and API key and paste them into the fields in Labs > Email settings. Make sure the region also matches.

Go to the General page in Ghost.

Your site name and description are shown on the homepage. The site name is also displayed in the site header and footer.

If you add a logo using "Publication logo", it will displayed in place of your site's name on the homepage and in the site header.

Upload the routes.yaml file

The routes.yaml file will add some new URLs to your site. These are required in order to display sign in, subscribe and member account pages on your site.

The file is included in your theme folder. You must upload it into Ghost in Labs > Routes. Once it's uploaded, your site will have new pages automatically added.

Add menus

Patron comes with intelligent menus, which hide and show the different links depending on if members are logged in or not.

Signed out
Signed in as paying member

For this to work, add the following links with these specific names:

The Sign in link will be hidden when a member is logged in; the Account link is hidden when a member is logged out. The Post link is always visible.

The Become a member link is displayed as a button.

The intelligent menu works in both the main navigation (shown in the header) and secondary navigation (shown in the footer)

Please note that you are free to use whatever you like in the menus!

You're done!

Patron is now fully set up.

If you want to add paid memberships, comments or tweak your site's design, read on for customisation options.


Buy Patron $49

Customisation

Below are different customisation options you have to tweak Patron to your needs.

Add custom content to the home page

By default, Patron shows your site's title and tagline on the homepage. You can either edit this, or you can add totally custom content.

To do this, add a new page in Ghost with the slug /home/. Any content you add to this page will replace the site title and tagline on the home page.

You must also edit your routes.yaml file by uncommenting line 4 (delete the preceding # symbol) and re-uploading it into Ghost.

Add custom content to the Become a member page

Add a new page in Ghost with the slug /subscribe/. The content and title from this page will be shown above the plans on the Become a member page.

You must also edit your routes.yaml file by uncommenting line 7 (delete the preceding # symbol) and re-uploading it into Ghost.

Enable paid plans

If you want to charge for content, you need to connect Ghost to Stripe. You can connect an existing Stripe account or create a new one.

Then add your monthly and yearly pricing options ("Subscription pricing" section). Different pricing tiers are not yet supported by Ghost.

Edit Stripe checkout

You can add your logo and edit colours of your Stripe checkout at dashboard.stripe.com/settings/branding

Edit the list of plan features

By default, Patron comes with the following features listed under each plan.

You should probably edit these lists to be more relevant to your offering.

To edit these lists, download your theme ZIP and open partials/plans.hbs.

You will see some <div class="plan">...</div> blocks, which are each of the plan boxes.

Look for the <ul> list inside each block, which looks like this:

<ul class="plan-features fssmall mt2">
  {{!-- Here's where you add your member-only perks! --}}
  <li>Subscribe to the exclusive paid newsletter</li>
  <li>Unlock access to the full post archive ({{posts.length}} posts)</li>
  <li>Post comments and be part of the community</li>
</ul>

Feel free to write anything here.

When you're done, ZIP the main theme folder and re-upload into Ghost.

Edit the /posts/ URL

If you want to change this URL, you have to update a number of files.

  1. Edit your routes.yaml file, changing all three instances of /posts/ to your desired URL path (eg. /blog/). Make sure to re-upload the file back into Ghost.
  2. Edit the link on line 12 of members-signin.hbs
  3. Edit the link on line 13 of members-signup.hbs

Remember to ZIP and re-upload your theme folder.

Show the posts page as your homepage

This just requires a quick change of your routes.yaml file. You have to remove the / block at the top of the routes section and edit the URLs in the collections section, like this:

routes:
  /subscribe/: 
    template: members-subscribe # sign in form for existing members
    # data: page.subscribe
  /signin/: members-signin # sign in form for existing members
  /account/: members-account # account page for logged in members
  # /signup/: members-signup # uncomment to allow free member signups

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

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

Important: making this change will totally remove the default home page.

Download the file to your computer (from the Labs page in Ghost), make the change and then re-upload it.

Add comments to your posts

Patron comes with Cove comments already installed. By default they are disabled but it's easy to enable them.

  1. You need the Patron theme folder on your computer. You can download it again from the Design page in Ghost if you have already installed it, or use the file you got after purchasing.
  2. Create a new Integration in Ghost (Integrations > Add custom integration).
  3. Go to cove.chat, sign up and create a new account. You will need the "Content API Key" from the integration created in the previous step.
  4. Instead of following the installation guide, just copy the bold publication ID and paste it into partials/cove-id.hbs.
  5. Open partials/post-content.hbs and change line 92 from {{!-- {{> comments}} --}} to just {{> comments}}.

Cove is now set up! Remember to ZIP and re-upload the theme folder.

Change comment visibility

There are three different ways to show comments in Patron and there is a template partial for each. Just substitute the correct file in partials/post-content.hbs on line 103.

{{> comments}}
On free posts, all visitors can view the comments (even non-members).
On member-only posts, signed-in members can view comments.
On paid-only posts, signed-in paying members can view comments.
Any signed-in member can leave comments.

{{> comments-membersonly}}
On free posts, comments will not be shown.
On member-only posts, signed-in members can view comments.
On paid-only posts, signed-in paying members can view comments.
Any signed-in member can leave comments.

{{> comments-paidonly}}
On free posts, comments will not be shown.
On member-only posts, comments will not be shown.
On paid-only posts, signed-in paying members can view comments.
Only signed-in paying members can leave comments.

Edit post layout on the post list

Patron comes with some customisation options for the main post lists. This list is shown in three different places on the site: Archive (index.hbs), author profile pages (author.hbs) and tag pages (tag.hbs). You can style the list differently on each page if you want, or keep them consistent.

The default in each template is:

{{> "post-card" show_excerpt=true show_tag=true show_authors=false show_readingtime=false}}

This is what the default looks like:

You have the ability to show and hide different content.

For this, you need to have the Patron theme folder on your computer. (You can download it from the Design page in Ghost)

Hide excerpt
In post.hbs, author.hbs or tag.hbs, change show_excerpt=false to show_excerpt=false

Show author names
In post.hbs, author.hbs or tag.hbs, change show_authors=false to show_authors=true

Hide primary post tag
In post.hbs, author.hbs or tag.hbs, change show_tag=true to show_tag=false

Show reading time
In post.hbs, author.hbs or tag.hbs, change show_readingtime=false to show_readingtime=true

Customise colours

The theme comes with CSS variables, which you can easily change to match your branding.

If you've got the theme folder on your computer, open assets/styles.min.css and edit the colours listed at the top.

By default, the variables are:

--main: #db4221;
--main-hover: #ba3518;
--dark-grey: #222;
--default-text: #444;
--grey: #888;
--light-grey: #d2d2d2;
--lightest-grey: #eee;
--page-bg: #fff;
--green: #a4d037;
--red: #f05230;

The main-* colours by default are red and a darker red (hover). They are used for link underlines and buttons.

The grey colours are used for text, input borders, background and some link underlines.

--green and --red are used for member notifications.

Once you have changed the colours, ZIP and upload the theme folder back into Ghost.

You can of course create your own variables and use them throughout the theme.

Use custom fonts

Patron uses Noto Sans from Google Fonts by default, but you can use any font you like, from any font provider.

To change fonts, open default.hbs and change line 22 to import your font files.

Then in assets/styles.min.css update line 14 and 15.

--sans-serif-font: 'Noto Sans', sans-serif;
--serif-font: Georgia, serif;
--post-body-font: var(--sans-serif-font);

Patron uses a sans-serif font for post content but you can easily switch to using your defined serif font by changing line 16 to --post-body-font: var(--serif-font);

Feature posts at the top of the Posts page

Use Ghost's "Feature this post" toggle. The latest-published featured post is shown at the top of the Archive page.

Change the number of posts shown per page in the Archive

In your theme folder, open package.json and edit the posts_per_page value. The default is 15.

ZIP and re-upload the theme.

Enable free member sign ups

Patron is designed to only allow members to sign up with a payment. But you may wish to allow members to sign up for free to and offer free member-only content.

Default: two paid plans
After enabling the free member plan

There are few steps to get this set up.

Download the theme folder from Ghost. Open routes.yaml and uncomment line 10 (remove the # preceding character) and upload it into Ghost (on the Labs page).

Open partials/plans.hbs and uncomment lines 4 to 22. This means removing the {{!-- and --}} text. This will display an extra plan which leads to the free sign up form.

To give more width to the page (because of the extra column), edit members-subscribe.hbs and remove the text container--narrow from line 22.

Translate your site

Patron does not currently come with translations, but you can easily swap out the English on the site with your own language by editing the theme files directly.


Buy Patron $49

How to

How to send a newsletter and hide it from the web archive (eg a weekly digest)

Use a "private" tag for email-only posts. A private tag in Ghost starts with a # character. Something like #newsletter is perfect. Make sure you add your tag to any email-only post you publish.

To hide these posts from your site, you need to edit code in index.hbs, tag.hbs and author.hbs. Look for this line:

{{#foreach posts visibility="all"}}

and change it to this:

{{#foreach posts visibility="all" filter="tags:-#newsletter"}}

By including a tag:-#newsletter filter, you're telling Ghost to exclude any posts tagged with #newsletter.

How to add email-only content with Email Cards

The Email card in Ghost's editor allows you to add content that only shows in the email version of a post. This content will never be shown in the web version.

When creating a post, click the (+) icon (or type /) and select "Email" from the options.


Version history

v1.1.1 • April 10, 2021
Changed to a more performant way to query post totals in the plan blocks.

v1.1.0 • March 26, 2021
Updates for better Ghost v4 compatibility.

v1.0.0 • January 8, 2021
Initial launch.

Super Themes Co.

Ghost themes by Dan Rowden

Crafted by hand in Mauritius © 2020—