• Submit Ticket
  • My Tickets
Themeix Support Portal
  • Submit Ticket
  • My Tickets

Docs: Newsfeed Ghost Theme

/Ghost Themes / Newsfeed Ghost Theme /
  • How to update address information from the footer?
  • How to add comment for the Ghost Blog?
  • Newsfeed Ghost Magazine Theme Introduction
  • Template map for the Newsfeed default Homepage v6
  • Template map for the Newsfeed default Homepage v4
  • Template map for the Newsfeed default Homepage v3
  • Template map for the Newsfeed default Homepage v2
  • Template map for the Newsfeed default Homepage
  • How to add ads banner in header for Newsfeed?
  • Understanding the footer code in Newsfeed Ghost Theme
  • How to use regular menu items in the Newsfeed Ghost theme?
  • How to add a mega menu in Ghost Theme?
  • How to add dynamic dropdown Navigation?
  • How to create a Membership page in Newsfeed ghost theme?
  • How to update section code in newsfeed ghost theme?
  • Activate Search with content API in Newsfeed Ghost
  • How to run gulp on the computer?
  • Ghost Theme Installation
  • Ghost Contact Page
  • Disqus Comments
  • Featured Post in ghost
  • Set up the Navigation menu in ghost
  • Ghost Newsfeed Changelog

How to update address information from the footer?

To update the footer address information open the following file,

/partials/footer-widgets/widget-4.hbs

You will see the code following code there:

<div class="footer-widget">
    <h5 class="mb-3">{{t "Contact Info"}}</h5>
    <ul class="footer-nav list-inline">
        <li><a href="#"><span class="icon"><i class="fas fa-map-pin"></i></span>New S. Sales Road, Toronto,
            CA</a></li>
        <li><a href="#"><span class="icon"><i class="fas fa-envelope-open"></i></span>[email protected]</a>
        </li>
        <li><a href="#"><span class="icon"><i class="fas fa-phone"></i></span>+1 (123) 123 456</a></li>
        <li><a href="#"><span class="icon"><i class="fas fa-fax"></i></span>+1 (123) 123 456</a></li>
    </ul>
</div>

Now update it as your need.


Open in New Tab

How to add comment for the Ghost Blog?

To add comments to your Ghost blog, you will need to enable commenting in the settings. Here is a step-by-step guide on how to do so:

  1. Log in to your Ghost admin panel.
  2. Click on the settings icon in the left sidebar.
  3. Select the ‘Membership’ tab.
  4. Scroll down to the ‘Commenting’ section.

Now select the comment option

Save your changes by clicking the ‘Save’ button.

Once commenting is enabled, comments will appear on your blog post , and your readers will be able to leave comments on your articles.


Open in New Tab

Newsfeed Ghost Magazine Theme Introduction

Newsfeed is a Ghost Magazine Theme with a clean and modern look. It’s a perfect choice for news and magazine websites. The theme comes with a responsive layout, a touch of CSS3 to smooth animations, and a solid foundation to build on. Newsfeed comes with 6 different homepages and 3 blog post layouts.


Open in New Tab

Template map for the Newsfeed default Homepage v6

Header Top Bar Area
File Location : /partials/header.hbs

Top Bar section with Newsticker and Social Logo

Featured Area
File Location : /partials/featured-widget-04.hbs

3 recent featured posts showing there

Ads Section
File Location : /partials/nf-home-ads.hbs

Left Sidebar Section
File Location : /partials/left-sidebar.hbs

tag: sports used here
Tag : recipe used here
All category list with the number of posts

Right Sidebar
File Location : /partials/sidebar.hbs

Tag: Trending used here
Tag : Sports used in first tab and 5 recent post used in Recent Post Tab, Tag shows all the tags

Recent Posts Section
File Location : /custom-home-06.hbs

Editor Pick Section
File Location : /custom-home-06.hbs

Tag : editors-pick used here

Nature / Recipe / National Section
File Location : /custom-home-06.hbs

Tag : nature, Tag: recipe, Tag: national used here

Fashion Section
File Location : /custom-home-06.hbs

tag: fashion used here

CTA Section
File Location : /partials/cta-section.hbs

Footer Widget 1
File Location : /partials/footer-widget/widget-1.hbs

Footer Widget 2
File Location : /partials/footer-widget/widget-2.hbs

Footer Widget 3
File Location : /partials/footer-widget/widget-3.hbs

Footer Widget 4
File Location : /partials/footer-widget/widget-4.hbs

Footer Copyright
File Location : /partials/footer-widget/nf-footer-widgets.hbs


Open in New Tab

Template map for the Newsfeed default Homepage v4

Posts Section
File Location : /custom-home-04.hbs

All Recent Posts showing there

CTA Section
File Location : /partials/cta-section.hbs

This image has an empty alt attribute; its file name is image-16-1024x298.png

Footer Widget 1
File Location : /partials/footer-widget/widget-1.hbs

This image has an empty alt attribute; its file name is image-17-1024x231.png

Footer Widget 2
File Location : /partials/footer-widget/widget-2.hbs

This image has an empty alt attribute; its file name is image-18-1024x231.png

Footer Widget 3
File Location : /partials/footer-widget/widget-3.hbs

This image has an empty alt attribute; its file name is image-19-1024x231.png

Footer Widget 4
File Location : /partials/footer-widget/widget-4.hbs

This image has an empty alt attribute; its file name is image-20-1024x231.png

Footer Copyright
File Location : /partials/footer-widget/nf-footer-widgets.hbs


Open in New Tab

Template map for the Newsfeed default Homepage v3

Header Top Bar Area
File Location : /partials/header.hbs

Top Bar section with Newsticker and Social Logo

Featured Area
File Location : /partials/featured-widget-03.hbs

Set the post featured for that section

Ads Section
File Location : /partials/nf-home-ads.hbs

Political Post Section
File Location : /partials/nf-widget-01.hbs

Tag : Political used in that section

Sidebar
File Location : /partials/sidebar.hbs

Tag: Trending used here
Tag : Sports used in first tab and 5 recent post used in Recent Post Tab, Tag shows all the tags

Editor Pick Section
File Location : /partials/nf-home-common-section.hbs

Tag : editors-pick used here

Nature / Recipe / National Section
File Location : /partials/nf-home-common-section.hbs

Tag : nature, Tag: recipe, Tag: national used here

Fashion Section
File Location : /partials/nf-home-common-section.hbs

tag: fashion used here

CTA Section
File Location : /partials/cta-section.hbs

Footer Widget 1
File Location : /partials/footer-widget/widget-1.hbs

Footer Widget 2
File Location : /partials/footer-widget/widget-2.hbs

Footer Widget 3
File Location : /partials/footer-widget/widget-3.hbs

Footer Widget 4
File Location : /partials/footer-widget/widget-4.hbs

Footer Copyright
File Location : /partials/footer-widget/nf-footer-widgets.hbs


Open in New Tab

Template map for the Newsfeed default Homepage v2

Header Top Bar Area
File Location : /partials/header.hbs

Top Bar section with Newsticker and Social Logo

Featured Area
File Location : /partials/featured-widget-02.hbs

Set the post featured for that section

Ads Section
File Location : /partials/nf-home-ads.hbs

Political Post Section
File Location : /partials/nf-widget-01.hbs

Tag : Political used in that section

Sidebar
File Location : /partials/sidebar.hbs

Tag: Trending used here
Tag : Sports used in first tab and 5 recent post used in Recent Post Tab, Tag shows all the tags

Editor Pick Section
File Location : /partials/nf-home-common-section.hbs

Tag : editors-pick used here

Nature / Recipe / National Section
File Location : /partials/nf-home-common-section.hbs

Tag : nature, Tag: recipe, Tag: national used here

Fashion Section
File Location : /partials/nf-home-common-section.hbs

tag: fashion used here

CTA Section
File Location : /partials/cta-section.hbs

Footer Widget 1
File Location : /partials/footer-widget/widget-1.hbs

Footer Widget 2
File Location : /partials/footer-widget/widget-2.hbs

Footer Widget 3
File Location : /partials/footer-widget/widget-3.hbs

Footer Widget 4
File Location : /partials/footer-widget/widget-4.hbs

Footer Copyright
File Location : /partials/footer-widget/nf-footer-widgets.hbs


Open in New Tab

Template map for the Newsfeed default Homepage

Header Top Bar Area
File Location : /partials/header.hbs

Featured Area
File Location : /partials/featured-widget-01.hbs

Political Post Section
File Location : /partials/nf-widget-01.hbs

Sidebar
File Location : /partials/sidebar.hbs

Editor Pick Section
File Location : /partials/nf-home-common-section.hbs

Nature / Recipe / National Section
File Location : /partials/nf-home-common-section.hbs

Fashion Section
File Location : /partials/nf-home-common-section.hbs

CTA Section
File Location : /partials/cta-section.hbs

Footer Widget 1
File Location : /partials/footer-widget/widget-1.hbs

Footer Widget 2
File Location : /partials/footer-widget/widget-2.hbs

Footer Widget 3
File Location : /partials/footer-widget/widget-3.hbs

Footer Widget 4
File Location : /partials/footer-widget/widget-4.hbs

Footer Copyright
File Location : /partials/footer-widget/nf-footer-widgets.hbs


Open in New Tab

How to add ads banner in header for Newsfeed?

You can add an advertising banner in the header part of the newsfeed theme.

Open header.hbs file and then add the following code inside the navbar-brand-wrapper

<a href="#"><img class="lazyload" src="{{asset 'images/blog-ads.png'}}" alt="{{t "nf-ads"}}" /></a>

You can add iframe ads there too.


Open in New Tab

Understanding the footer code in Newsfeed Ghost Theme

In the footer of Newsfeed Ghost Premium Theme  has 4 footer widgets ( Logo And Paragraph, Navigation, Social Media, Contact Info )

You will find all the code for that section in /_partials/footer-widgets

For the Logo & Paragraph Widget

/_partials/footer-widgets/widget-1.hbs

<div class="footer-widget pe-2">
   {{#if @site.logo}}
   <img class="footer-logo mb-3" src="{{@site.logo}}" alt="{{@site.title}}">
   {{else}}
   <img class="footer-logo mb-3" src="{{asset "images/header-brand.png"}}" alt="{{@site.title}}">
   {{/if}}
   <p>{{t "Newsfeed is well optimized template for any kinds of newspaper, blog, magazine etc website"}}</p>
</div>

You can change the text Paragraph from there.

For the Navigation Widget

/_partials/footer-widgets/widget-2.hbs

We used the following code for the navigation widget

<div class="footer-widget">
   <h4 class="mb-3">{{t "Navigation"}}</h4>
    {{navigation type="secondary"}}
</div>

You can change the widget title and add your own navigation menu list there. Currently navigation working from the ghost Secondary Navigation.

For the Social Media Widget

/_partials/footer-widgets/widget-3.hbs

<div class="footer-widget">
   <h4 class="mb-3">{{t "Social Media"}}</h4>
   <ul class="footer-nav list-inline">
      {{#if @site.facebook}}
      <li><a href="{{@site.facebook}}"><span class="icon"><i class="fab fa-facebook-f"></i></span>{{t "Facebook"}}</a></li>
      {{/if}}
      {{#if @site.twitter}}
      <li><a href="{{@site.twitter}}"><span class="icon"><i class="fab fa-twitter"></i></span>{{t "Twitter"}}</a></li>
      {{/if}}
      <li><a href="https://instagram.com"><span class="icon"><i class="fab fa-instagram"></i></span>{{t "Instagram"}}</a></li>
      <li><a href="https://linkedin.com"><span class="icon"><i class="fab fa-linkedin"></i></span>{{t "Linkedin"}}</a></li>
   </ul>
</div>

That is very easy to change the social links from there. We used font awesome for the icons. So you can get all the popular social media icons easily from there.

For example, if you want to use the interest icon just use the class fa-pinterest

For the Contact Info Widget

/_partials/footer-widgets/widget-4.hbs

<div class="footer-widget">
   <h4 class="mb-3">{{t "Contact Info"}}</h4>
   <ul class="footer-nav list-inline">
      <li><a href="#"><span class="icon"><i class="fas fa-map-pin"></i></span>New S. Sales Road, Toronto,
         CA</a>
      </li>
      <li><a href="#"><span class="icon"><i class="fas fa-envelope-open"></i></span>[email protected]</a>
      </li>
      <li><a href="#"><span class="icon"><i class="fas fa-phone"></i></span>+1 (123) 123 456</a></li>
      <li><a href="#"><span class="icon"><i class="fas fa-fax"></i></span>+1 (123) 123 456</a></li>
   </ul>
</div>

Update the address, email, phone number there. If you want clickable phone number then use the following code,

<li><a href="tel:+1123123456"><span class="icon"><i class="fas fa-phone"></i></span>+1 (123) 123 456</a></li>

href=tel: creates the call link. This tells the browser how to use the number.


Open in New Tab

How to use regular menu items in the Newsfeed Ghost theme?

If you don’t need a dropdown or mega menu then it’s very simple to you. Just open _partials/ folder and then delete the current navigation file and then rename navigation-regular.hbs file to navigation.hbs

Now re-upload the modified zip package of your theme and then set up the navigation items from the admin panel.

Under settings>navigation, you will see the primary navigation area,
Just update the navigation menu items there.

How to add dropdown Navigation in Newsfeed?
How to add mega menu in Ghost Theme ( Newsfeed )?

Open in New Tab

How to add a mega menu in Ghost Theme?

Normally if you want to add a mega menu in ghost then its really bit complex for the noncoders. But in newsfeed ghost theme you add mega menu without a single line coding or theme modification.

For example, you want to add Mega Menu for Explore like the following way please follow the steps :

In the Newsfeed Mega menu we used total 6 items with 1 heading. So you must add 6 subitem in each column.

Example :

Explore [has_child] [has_megamenu]
Heading 1 [subitem] [title]
Col1 1A [subitem]
Col1 1B [subitem]
Col1 1C [subitem]
Col1 1D [subitem]
Col1 1E [subitem]
Heading 2 [subitem] [title]
Col2 2A [subitem]
Col2 2B [subitem]
Col2 2C [subitem]
Col2 2D [subitem]
Col2 2E [subitem]
Heading 3 [subitem] [title]
Col1 3A [subitem]
Col1 3B [subitem]
Col1 3C [subitem]
Col1 3D [subitem]
Col1 3E [subitem]
Heading 4 [subitem] [title]
Col1 4A [subitem]
Col1 4B [subitem]
Col1 4C [subitem]
Col1 4D [subitem]
Col1 4E [subitem]

Here i attached a screenshot, how it looks in Admin Dashboard.

If you need just Dropdown Menu in your Ghost Blog then you can follow the link bellow

How to add dropdown Navigation in Newsfeed?
How to use regular menu items in the Newsfeed Ghost theme?

Open in New Tab

How to add dynamic dropdown Navigation?

In the newsfeed premium ghost theme, we added dynamic dropdown navigation.

You don’t need to edit any files to make the dropdown menu in the Newsfeed Ghost theme. Just add the menu items from ghost admin dashboard.

For example, you want to add dropdown Menu for Pages,

Example :

Pages [has_child]
Authors [subitem]
Tags [subitem]
Blog Details [subitem]

In the admin dashboard, it will look like that,

For the Parrent Item ( Pages ) we added an extra selector [has_child] , which meanch Pages have the child sub items. So under that we used [subitem] for Author, Tags, Blog Details

Its very simple. If you import the demo, you will get the navigation item included there as like our demo.

How to get Multi-Level Dropdown?

In the Newsfeed Ghost theme, it support 2 level dropdown. So you can make the multi-level dropdown like the example below:

Here is the admin dashboard screenshot which should follow:

For the first level, we need to add [-] and for the 2nd level [--] also the [subitem] is common there.

How to add mega menu in Ghost Theme ( Newsfeed )?
How to use regular menu items in the Newsfeed Ghost theme?


Open in New Tab

How to create a Membership page in Newsfeed ghost theme?

Create a page from the ghost admin panel.

Now set the template ( Membership ) for that page


Open in New Tab

How to update section code in newsfeed ghost theme?

For example, you want to change the code of the Political Section from the Homepage #1.
Suppose, your real tag is Getting Started

Now follow the steps bellow,

That section code located in /partials/nf-widget-01.hbs

If you open that file, there have a code

{{#get "posts" include="tags,authors,count.posts" filter="tag:political" limit="5"}}

Now change that with your own category name there,

{{#get "posts" include="tags,authors,count.posts" filter="tag:getting-started" limit="5"}}

You can see the custom post limit too there. We used 5 posts for that section. Just change limit="5" for any custom limit.

Now to change the heading of the section change the code {{#get 'tags' filter='slug:[political]'}} with {{#get 'tags' filter='slug:[getting-started]'}}

Please


Open in New Tab

Activate Search with content API in Newsfeed Ghost

At first create a Ghost Content key and then open Ghost admin dashboard again.
Go to Settings > Code Injection
Paste the following code with your updated content key

<script>
var themeConfig = {
ghostSearchKey: 'ADD_YOUR_CONTENT_KEY_HERE',
includeBodyInSearch: true
};
</script>

Make sure you used your own Content key there for ghostSearchKey option.

Example :

<script>
var themeConfig = {
ghostSearchKey: '5cc707e097ada98f2a869daf25',
includeBodyInSearch: true
};
</script>

Open in New Tab

How to run gulp on the computer?

Have you install Gulp on NPM?. If not, do the following.

Install the gulp command line utility

npm install --global gulp-cli


Verify your gulp versions

gulp --version

Install NPM Packages

npm install

Now run Gulp command

gulp

If you see any error for node-sass or gulp-sass please install it, by using the following command npm install node-sass , npm install gulp-sass


Open in New Tab

Ghost Theme Installation

Here following the easy steps for the ghost theme installation :

1. At first login to the admin panel of your Ghost blog. If you dont have the blog ready then complete the ghost installation first.  

Now login  to your blog. Example URL: yourwebsite.com/ghost

2. Select the Settings option from the left side of your ghost admin panel  and then navigate to the themes section.

Ghost Theme Installation
Select Themes Option from the Settings

3.  Click on the Upload a Theme button.

4. An upload option should appear. Now drag the theme ( theme_file_name.zip ) file in that area. You should get that zip file from our downloaded package.

5. Once completed the theme upload, click on Activate Now button and then activate the theme.

Ghost theme installation is really easy task. But if you are unable to do that. Please feel free contact us. We would happy to help you free for Ghost theme installation.


Open in New Tab

Ghost Contact Page

Please follow the steps bellow to create ghost contact page :

  • Create a new story called Contact for example.
  • Now add your desire content in that page by using the ghost editor.
  • If you want to add functional contact form then i would recommend you 3 best options.
  1. Google Form
  2. Jotform
  3. Formspree.io
  • Google form or Jotform can be easily embeded  in your page as iframe.
  • For the formspree.io you have to add the following code in your page :
<form action="https://formspree.io/[email protected]" method="POST">
 <input type="text" name="your-name" placeholder="Your Name">
 <input type="email" name="_replyto" placeholder="Email" class="float-right">
  <textarea name='message' placeholder="Message"></textarea>
 <button type="submit" class="btn-c buttonfx curtainup">Send Message</button>
  <input class='btn-c buttonfx curtainup' type="submit" value="Send">
 </form>

Open in New Tab

Disqus Comments

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.

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


Open in New Tab

Featured Post in ghost

You can trun your general post to a featured post in ghost easily.

To set a post as featured, check the box next to “Feature this post” in the post settings menu. When a post is featured, a class of feature will be added to the  {{post_class}} in the HTML code for the post.


Open in New Tab

Set up the Navigation menu in ghost

To set up the navigation menu in ghost, open your Dashboard first.

The url of admin dashboard will be like https://yoursite.com/ghost

Now click the setting icon fom the bottom left panel.

You will get a screen where you can change your primary navigation menu items. Just setup navigation from there for your blog.

If you need any help to create custom style navigation in ghost, feel free to contact us


Open in New Tab

Ghost Newsfeed Changelog

Here following the Newsfeed is a Ghost Magazine Theme Changelog

v3.0.0 ( 25 May, 2022) 
** Ghost v5 Ready
** Settings Option Added
** Comment disable opiton

v2.6.1 ( 02 Jan, 2022) 
** Added Custom Excerpt condition in post

v2.6.0 ( 20 Dec, 2021) 

** Fixed Table Design in Post Page
** Added Bootstrap Table Support
** Removed image zoom effect form post page
** Fixed spacing bug for blockquote in mobile
** Fixed mobile typo
** Fixed Bookmark card design


v2.6.0 ( 20 Dec, 2021) 

** Fixed Table Design in Post Page
** Added Bootstrap Table Support
** Removed image zoom effect form post page
** Fixed spacing bug for blockquote in mobile
** Fixed mobile typo
** Fixed Bookmark card design

v2.5.0 (31 Augest, 2021)
** Menu disappear issue fix
** Social Icon Bug Fix
** Script Updated
** Removed Bootstrap Unnecessary CSS from style.scss
** Accessibility Improvement

v2.4.0 (31 July, 2021)
** Dynamic Drop Down with Multi Level [Added]
** Dynamic Megamenu [Added]
** Featured Image Caption Support
** Search UI Improvement 
** Design Improvement 
** Spacing Improvement
** Added Description in Tag Page

v2.3.0 (25 July, 2021)
** Load More Bug Fix
** Post Upgrade Button issue
** Author page link bug fix
** Demo content updated in theme folder

v2.2.0
** Ghost API v4 Support
** Screenshots Added
** Mobile Logo Fix

v2.1.0 
** Image Zoom Effect Added
** Dependency Plugins Updated
** Gallery container width bug fix
** More prefix added and cleanup work
** entry-fullwidth class added for the fullwidth page/post
** Faster User experience
** Space bug fix for fullwidth header

v2.0.0
** Accent Color support
** Membership Pricing Table added
** Style fixing
** Searchbox design improved
** New Documentation Added
** All minor bug fix

v1.0.0 (11 July, 2021)
** Initial Release

Open in New Tab

©2016 - 2021 Themeix. All Rights Reserved.
Loading...

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.