Ghost Themes

Ghost is a strong tool that enables theme creators to build up unique settings that show up in Ghost Admin, making it simple for website owners to choose their preferred style without having to change the ghost themes files. With the help of custom settings, you can manage to add a new page/site-wide/homepage/post settings. In this post, we will create a custom page in our ghost themes.

In Ghost themes, there are three ways to add custom page templates. These are listed below, 

  1. Using page templates
  2. Using custom templates
  3. Using the routes.yaml file

1. Add custom page with page templates: Download your current theme and create a new template file using the naming convention page-SLUG.hbs (e.g.: page-contact.hbs). Save this file in your theme’s root folder. Now, the page with the slug /contact/ will display in the browser using your new template file.

2. Add custom pages with custom templates: When you wish to use a template on multiple pages, this technique is perfect. Every custom template file name must begin with custom—then you can add some template-specific naming. Like above, create a new template file but this time uses the naming convention custom-TEMPLATENAME.hbs (e.g.: custom-contact.hbs). Again, save this file in your theme’s root folder.

When there are any files in your theme with the custom-*.hbs naming pattern, they will show up in under Template in each page’s settings panel in Ghost. For each page in your ghost themes, you can now easily choose the template you want to use.

create custom template ghost Themeix

3. Add a custom page Using the routes.yaml file: If we’re talking about a customized about page, the routes.yaml file needs to have the following section:

routes:
/newsletter/:
template: newsletter
data: page.newsletter

In the code upper, we do two things, we define the route /about/ (URL) based on the about.hbs template and with data coming from the page with slug about

Although it’s not necessary to define the data property, it’s a terrific approach to quickly manage all the meta properties from the Admin area for this specific page. If necessary, you can also use additional page elements like the featured image or content. To use the content of the page inside the about.hbs file, you have to be in the page context, for example to output the title and content:

{{#page}}
  <h1>{{title}}</h1>
  <div>{{content}}</div>
{{/page}}

You can also make other pages, like a custom contact page or a custom home page, in the same way.

We hope that this article will help you to add a custom page in the ghost themes for your website. Connect with us for further info themeix.com

Leave a Comment

No Comment