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).

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.

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.

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.