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.

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.

If you don’t have the latest version, please download Newsx theme from themeix.

7.1.0

• Update footer design

7.0.0

• Added custom settings
• Removed Node SASS and updated packages

v6.1.1

• Responsive improvemnt
• Fix navigation issue

v6.1.0

• fix image
• add loadmore
• add native search
• other issues fixed

v6.0.1

• Fix a fatal error

v6.0.0

• Ghost 4.x.x support

v5.0.0

• Content API updated
• Ghost 3.x.x support
• Instagram gallery added in post sidebar
• Membership pages added
• Gulp / SCSS integrated
• Visual improvements

v4.0.0

• Content API supported
• Search updated
• Improved support for Ghost 2.1x
• Online documentation improved
• Error page added
• Subscribe page added
• Custom template for Tags added
• Authors page template moved to custom template
• Visual improvements
• Translation improvements

v3.2.0

• Critical AMP validation issue fixed (Error resolved)

v3.1.0

• Authors page added
• Footer updated
• Responsive issues fixed

v3.0.0

• Ghost 2.x.x support
• config.hbs removed
• AMP design included
• Social media icon bug fixed

v2.4.0

• CSS minification
• Minor bug fixes

v2.3.0

• Author page template added
• Regular page template updated
• Typography and design improvements
• Mobile logo issue fixed
• Share link issue fixed
• Offline documentation updated

v2.2.0

• Design improvements
• Responsive fixes

v2.1.0

• Multi-language support added

v2.0.0

• Bootstrap 4 support
• Design enhancements
• General bug fixes

v1.1.0

• Minor bug fixes

v1.0.0 (06 September, 2017)

• Initial release