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.

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.

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.