Installing Your Ghost Theme

Follow these simple steps to install your new Ghost theme:

1. Log in to your Ghost Admin Panel

• Go to your blog’s admin URL (for example: yourwebsite.com/ghost).
• If you don’t have a Ghost blog yet, you can get affordable managed Ghost hosting from ghost official team.

2. Open the Design Section

• In the left sidebar, click on Design.
• This will take you to the themes area of your Ghost admin panel.

3. Upload Your Theme

• Click the Upload a Theme button.
• An upload window will appear.
• Find the theme ZIP file (for example, sinju.zip) in your downloaded package.
• Drag and drop the ZIP file into the upload area, or click to browse and select it.

4. Activate the Theme

• Once the upload is complete, click the Activate Now button.
• Your new theme is now live on your site!

That’s it! Your Ghost site should now be using the new theme. If you have any issues, double-check that you uploaded the correct ZIP file and that the upload finished successfully.

How to Create a Ghost Content API Key

To use this theme and connect your site to Ghost’s Content API, you need to generate a Content API Key from your Ghost admin panel. This key allows your website or theme to securely fetch content from your Ghost blog.

Follow these steps to create your Content API Key:

1. Open the Integrations Section

• Log in to your Ghost Admin Dashboard.
• In the left sidebar, click on Integrations. This is where you manage connections between Ghost and external services or custom themes.

2. Add a Custom Integration

• Click the Add custom integration button.
• 

3. Name Your Integration

• Enter a name for your new integration. You can use any name that helps you remember what it’s for (e.g., “My Theme Content Key”).
• Click Create to proceed.

4. Copy Your Content API Key

• After creating the integration, Ghost will display several keys. Look for the Content API Key.
• Hover over the key and click the copy icon to copy it to your clipboard.

Tip: Keep this key safe. You’ll need it to connect your theme or site to your Ghost content.

Managing your site’s navigation in Ghost simple and intuitive. You can easily add, remove, reorder, or edit menu items directly from the Ghost Admin Panel.

Navigate Settings

To access the navigation settings:

1. Log in to your Ghost Admin Panel
2. Go to Dashboard > Design

Adding or Editing Menu Items

Within the Design tab, you’ll find the Navigation section. This is where you can:

• Add new menu items: Enter a label (name of the menu item) and its corresponding URL. This can be an external link or an internal/static page (like /about/ or /contact/).
• Edit existing menu items: Click into any label or URL to make changes.
• Reorder items: Drag and drop menu items to arrange them in your desired order.
• Remove items: Simply delete the unwanted menu row to remove it from your site’s navigation.

Important Notes

• After making any changes, make sure to click the Save button at the bottom of the screen.
• If you forget to save, your changes will not be applied and will be lost upon refreshing or leaving the page.

For a complete guide, you can also visit the official Ghost documentation here: Updating Navigation

By following these steps, you’ll ensure your site’s navigation is always up-to-date and user-friendly.

Ghost CMS provides a Featured Post option that allows you to highlight specific content on your site. In themes that support this functionality (including ours), featured posts are displayed prominently on the frontend.

How Featured Posts Work

If you have more than one featured post, they will automatically be displayed on the theme. This is a great way to draw attention to important content, such as announcements, popular articles, or cornerstone content.

How to Mark a Post as Featured

To mark a post as featured:

1. Open the post you want to feature in the Ghost Admin Panel.
2. Click the Post Settings gear icon in the top right corner.
3. Enable the “Feature this post” option by checking the box.

Once a post is marked as featured:

• It will appear in the featured section of your site’s homepage or designated area (depending on your theme).
• The post will automatically be assigned a feature class through the `` helper in your theme’s template. This allows for custom styling via CSS.

<article class="{{post_class}}">
  <!-- Featured post content -->
</article>

Styling and Customization

Since featured posts receive the feature class, you can target them specifically in your CSS for custom designs — such as different backgrounds, font styles, or animations.

Using featured posts effectively can help improve engagement and guide your readers to the most important content on your website. Be sure to keep the section updated with fresh or strategic posts to make the most of this feature.

Disqus allows you to embed comment threads within Ghost posts and pages, including additional functionality like upvoting and adding Emoji reactions. The platform is widely adopted and relatively easy to set up, so you’ve probably come across it before.

This theme comes with Disqus comments enabled. You may change it to other comments platform /plugin too. To change the disqus settings please open the file partials/disqus_comments.hbs and then change the value

  
https://xxx-themeix-1.disqus.com/embed.js

to your own disqus url (make sure you have the disqus account already) .

Here is the quick start guide for disqus.

https://help.disqus.com/installation/publisher-quick-start-guide

That’s all you need to setup Disqus from the theme side. If you get any issue feel free contact us.

In the Learn Ghost theme, we have added a dynamic dropdown feature for navigation. This allows you to easily set up your site’s menu directly from the Ghost Admin panel.

How to Set Up Navigation

1. Log in to your Ghost Admin panel.
2. Go to Settings > Navigation.
3. In the Primary Navigation section, add your main menu items. This menu appears at the top navbar of your website.

Example Navigation Structure

Home [has_child]
Home v1 [subitem]
Home v2 [subitem]
Home v3 [subitem]
About
Blog

• Add [has_child] next to any parent navigation item that has dropdown child items.
• Child items should be listed as [subitem] under the parent.

Secondary Navigation

Ghost also supports a Secondary Navigation option, which you can set up similarly in the admin panel. However, the secondary navigation does not support dropdowns and is usually displayed in the footer area.

This guide walks you through the process of adding a lesson in Ghost CMS, covering everything from setting lesson details to managing access and tags.

01) Add Lesson Information

Important: Ensure you are creating a Post and not a Page when adding a lesson.

Start by entering the core information about your lesson:

• Title: The main name of your lesson.
• Description: Provide a clear, concise overview of what the lesson covers.
• Meta Information: Add any additional meta details necessary for SEO and organization.

Using Ghost Public Preview for Lesson Description

We recommend enabling the Ghost Public Preview feature when adding your lesson description. This option allows non-members or visitors to preview the lesson overview without full access.

Why use Ghost Public Preview?
For premium lessons, if you do not enable Public Preview, visitors won’t be able to see the course description unless they are members with access. Enabling this option makes the lesson more visible and appealing to potential students.

In our setup, we have used the Ghost Public Preview option to ensure the lesson description is visible.

02) Add Tags

Tags are essential for organizing and internal referencing of lessons and courses.

Required Internal Hashtags

Each lesson must include exactly two internal hashtags:

• #course-id-X — where X is the unique ID number for the course (e.g., #course-id-2)
• #lesson — this tag is required for all course lessons

Example: #course-id-2 #lesson

Adding Public Tags and Categories

You can also add public-facing tags or lesson categories to improve discoverability and grouping.

Example: UI UX Design

Important Tagging Rules

• Always use a consistent format for course ID tags. For example: #course-id-2, #course-id-3, #course-id-4.
• Different or inconsistent formats will not work with the system.
• Public tags are allowed but must be placed after the #lesson tag.

03) Course Access Settings

Ghost CMS supports three main types of post access levels to control who can view your lesson content:

1. Public Access:
   Use this setting for free lesson or lessons that everyone can view.

2. Basic Membership Access:
   This restricts access to users who have subscribed to the basic membership tier. It is recommended for some premium lesson.

3. Premium Membership Access:
   This grants access to all premium content for members who subscribe to the highest tier.

Tip: For premium lessons, always assign the correct membership tier to control who can access your content effectively.
We recommend using Basic Membership for selected premium lessons and Premium Membership for all-access passes.

04) Add Author Information

Every lesson should clearly specify the author’s name. This helps learners know who created the content and adds credibility.

05) Select Lesson Template (Layout)

Choose the appropriate Lesson Layout Template to define how the lesson content will be presented on your site.

• The template controls the visual structure, including lesson navigation, sidebar elements, and overall styling.
• Make sure to select the template designed for lesson to ensure a smooth learning experience.

Summary

1. Create a Post, not a Page, to add lesson content.
2. Add lesson title, description (enable Ghost Public Preview for visibility).
3. Include two mandatory internal tags: #course-id-X and #lesson.
4. Add public tags/categories if desired, placing them after the internal tags.
5. Set lesson access based on membership tiers (Public, Basic, Premium).
6. Assign an author name to every lesson.
7. Select the appropriate lesson template for consistent lesson layout.

Following these steps will help you maintain a consistent and well-organized lesson catalog on your Ghost CMS site.

If you need any assistance or have questions, feel free to reach out to your site administrator or consult the Ghost documentation.

This guide walks you through the process of adding a course in Ghost CMS, covering everything from setting course details to managing access and tags.

01) Add Course Information

Important: Ensure you are creating a Post and not a Page when adding a course.

Start by entering the core information about your course:

• Course Title: The main name of your course.
• Course Description: Provide a clear, concise overview of what the course covers.
• Meta Information: Add any additional meta details necessary for SEO and organization.

Using Ghost Public Preview for Course Description

We recommend enabling the Ghost Public Preview feature when adding your course description. This option allows non-members or visitors to preview the course overview without full access.

Why use Ghost Public Preview?
For premium courses, if you do not enable Public Preview, visitors won’t be able to see the course description unless they are members with access. Enabling this option makes the course more visible and appealing to potential students.

In our setup, we have used the Ghost Public Preview option to ensure the course description is visible.

02) Add Tags

Tags are essential for organizing and internal referencing of lessons and courses.

Required Internal Hashtags

Each course must include exactly two internal hashtags:

• #course-id-X — where X is the unique ID number for the course (e.g., #course-id-9)
• #course — this tag is required for all courses

Example: #course-id-9 #course

Adding Public Tags and Categories

You can also add public-facing tags or course categories to improve discoverability and grouping.

Example: UI UX Design

Important Tagging Rules

• Always use a consistent format for course ID tags. For example: #course-id-2, #course-id-3, #course-id-4.
• Different or inconsistent formats will not work with the system.
• Public tags are allowed but must be placed after the #course tag.

03) Course Access Settings

Ghost CMS supports three main types of post access levels to control who can view your course content:

1. Public Access:
   Use this setting for free courses or lessons that everyone can view.

2. Basic Membership Access:
   This restricts access to users who have subscribed to the basic membership tier. It is recommended for some premium courses.

3. Premium Membership Access:
   This grants access to all premium content for members who subscribe to the highest tier.

Tip: For premium lessons, always assign the correct membership tier to control who can access your content effectively.
We recommend using Basic Membership for selected premium courses and Premium Membership for all-access passes.

04) Add Author Information

Every lesson should clearly specify the author’s name. This helps learners know who created the content and adds credibility.

05) Select Course Template (Layout)

Choose the appropriate Course Layout Template to define how the course content will be presented on your site.

• The template controls the visual structure, including lesson navigation, sidebar elements, and overall styling.
• Make sure to select the template designed for courses to ensure a smooth learning experience.

Summary

1. Create a Post, not a Page, to add course content.
2. Add course title, description (enable Ghost Public Preview for visibility).
3. Include two mandatory internal tags: #course-id-X and #course.
4. Add public tags/categories if desired, placing them after the internal tags.
5. Set course access based on membership tiers (Public, Basic, Premium).
6. Assign an author name to every lesson.
7. Select the appropriate course template for consistent course layout.

Following these steps will help you maintain a consistent and well-organized course catalog on your Ghost CMS site.

If you need any assistance or have questions, feel free to reach out to your site administrator or consult the Ghost documentation.

Ghost CMS allows you to create custom pages using templates, including one that can automatically display all your tags. This is useful for organizing your content and helping visitors explore topics on your site.

Steps to Create a Tags Page

Follow the steps below to create a dedicated Tags page:

1. Log in to your Ghost Admin Dashboard.
2. Navigate to the Pages section.
3. Click the “New Page” button to create a new page.
4. Name the page something like “Tags” or “Explore Tags” - whatever fits your site’s style but make sure page slug/permalink is tags.

How it works

After assigning the tags page:

• The page will automatically display all available tags on your site.
• Each tag will typically be linked to its own archive page, allowing users to browse content by tag.
• The layout and style of the tags page will depend on how the tags.hbs template is defined in your theme.

By using this method, you can easily create a dynamic Tags page that updates automatically as you add new tags to your content.

Adding analytics or other third-party scripts (like Google Analytics, Facebook Pixel, Hotjar, or custom JavaScript/CSS) to your Ghost website is easy and doesn’t require editing the theme files directly.

Follow these steps to safely inject custom code into the header of your Ghost site:

Step 1: Log in to Your Ghost Admin

First, log in to your Ghost Admin panel. This is usually accessible at:

Once logged in, click on the Settings icon located in the left sidebar.

Step 2: Go to Code Injection Settings

In the Settings panel, scroll down to the Advanced section. Click on Code Injection.

This area allows you to safely inject custom code into your site’s <head> and <footer> sections without modifying your theme files.

Step 3: Paste Your Script into the Header Field

Under the Header section, paste your Google Analytics code, tracking scripts, meta tags, custom CSS, or any other header-level scripts.

This code will be automatically added to the <head> section of every page on your site.

Example: Google Analytics Script

Here’s a sample script you can paste into the Header field to enable Google Analytics:

<!-- Google Analytics -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());

  gtag("config", "UA-XXXXXXX-X");
</script>

Replace UA-XXXXXXX-X with your actual Google Analytics Tracking ID.

Creating an Authors page in Ghost CMS allows you to showcase all the contributors to your site in one place. If your theme includes a custom authors.hbs template, you can easily use it to automatically generate a list of all authors.

Steps to Create a Authors Page

Follow the steps below to create a dedicated Authors page:

1. Log in to your Ghost Admin Dashboard.
2. Navigate to the Pages section.
3. Click the “New Page” button to create a new page.
4. Name the page something like “Authors” or “Team” - whatever fits your site’s style but make sure page slug/permalink is authors.

How it works

After assigning the authors page:

• The page will automatically display all available authors on your site.
• Each author will typically be linked to its own archive page, allowing users to browse content by author.
• The layout and style of the tags page will depend on how the authors.hbs template is defined in your theme.

By using this method, you can easily create a dynamic Tags page that updates automatically as you add new tags to your content.

Creating a functional and visually appealing Contact page in Ghost is simple. Follow the steps below to get started:

Step 1: Create the Contact Page

• Log in to your Ghost Admin Dashboard.
• Navigate to the Pages section and create a new page titled Contact.
• Add your desired content using the Ghost editor. This can include a short message, contact instructions, or location information.

Step 2: Add a Contact Form

To make your Contact page functional, you can integrate a form. Below are three recommended tools to easily add a contact form to your Ghost site:

Recommended Contact Form Services

1. Google Forms
2. Jotform
3. Formspree.io
4. Formspark.io

Google Forms and Jotform can be embedded directly into your Ghost page using an <iframe>.

Example Embed (Google Forms or Jotform)

<iframe
  src="YOUR_FORM_URL_HERE"
  width="100%"
  height="500"
  frameborder="0"
  marginheight="0"
  marginwidth="0"
  >Loading…</iframe
>

Example Form (Formspree)

To use Formspree, paste the following form code into your page’s HTML section:

<form
  class="themeix-contact-form"
  action="https://formspree.io/your@email.com"
  method="POST"
>
  <input type="text" name="your-name" placeholder="Your Name" required />
  <input type="email" name="_replyto" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit" class="themeix-contact-btn">Send Message</button>
</form>

Replace your@email.com with your actual email address registered with Formspree.

Example Form (Formspark)

<form
  class="themeix-contact-form"
  action="https://submit-form.com/your-form-id"
>
  <input
    type="hidden"
    name="_redirect"
    value="https://your-website.com/thanks"
  />
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit" class="themeix-contact-btn">Send Message</button>
</form>

Replace your-form-id with your actual form id.

Optional Styling

You can customize the appearance of your form by adding inline styles or editing your theme’s CSS. Here’s a quick example for custom button and element colors:

<style>
  .themeix-contact-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .themeix-contact-form input,
  .themeix-contact-form textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  .themeix-contact-form input:focus,
  .themeix-contact-form textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
  }

  .themeix-contact-form textarea {
    min-height: 120px;
    resize: vertical;
  }

  .themeix-contact-btn {
    background-color: #6366f1;
    color: #ffffff;
    border: none;
    padding: 0.9rem 1.4rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .themeix-contact-btn:hover {
    background-color: #4f46e5;
  }
</style>

With these steps, your Ghost site will have a professional Contact page that includes a working form and styling that matches your brand.