Check out this updated tutorial for creating custom pages in Ghost.

In this tutorial we will focus on creating a static page with a custom layout for a Ghost theme.

Fist take a look at your theme and check if has a different layout for static pages. This is a simple Ghost theme structure, yours should look similar to this (probably with some additional files):

├── /assets
|   ├── /css
|       ├── style.css
|   ├── /fonts
|   ├── /js
├── /partials
├── default.hbs
├── index.hbs [required]
├── post.hbs [required]
├── page.hbs [optional]
└── package.json [required]

Create a Static Page

To create a static page follow these steps:

  1. Log in to your Ghost Admin Panel.
  2. Under Pages click on New Page.
  3. Enter a title and content for your page within the editor.
  4. Open the Page Settings Menu by clicking on the gear icon in the top right corner.
  5. Click Publish at the top of the editor to publish the static page.

When you access the newly created page it should look according to the layout defined in the page.hbs file (assuming you have one, otherwise it the layout fallback to post.hbs).

Each static page you create will have the same layout if you do not define a custom layout for it. So let's see how we can do that.

Create a Custom Page Template

Let's assume we want to create a Contact page. All custom Ghost pages must begin with page- followed by the desired page url path, in our case contact. So the new file should have the following name:

page-contact.hbs

We have to define the layout of this page, by adding the necessary HTML and hbs. An example for a contact page would look like this:

{{!< default}}

{{!-- Page header area --}}
{{#post}}
  {{#if feature_image}}
    <div class="page-header">
      <div class="page-header__img lazyload" data-src="{{img_url feature_image}}">
      </div>
    </div>
  {{else}}
    <h1 class="page__title">{{title}}</h1>
  {{/if}}
{{/post}}

{{!-- The main content area on the Contact page --}}
<div class="container">
    <div class="contact-info">
      <h3>Address</h3>
      <p>City</p>
      <p>Country</p>
      <p>Post code</p>
      <p><strong>Tel: </strong>1 234 567 890</p>
    </div>
    <div class="contact-form">
        <h3>Contact us</h3>
        <form action="//formspree.io/youremail@domain.com" id="contact-form" class="contact-form" method="post">
          <input type="text" name="username" id="username" title="Name" placeholder="Name" required>
          <input type="text" name="email" id="email" title="Email" class="email" placeholder="Email" required>
          <textarea rows="10" cols="10" name="message" id="message" title="Message" placeholder="Message" required></textarea>
          <input type="text" name="_gotcha" style="display:none">
          <input class="btn" type="submit" name="submit" id="submit" value="Submit">
        </form>
    </div>
</div>

You can see a live demo on our Auden Ghost Theme Contact page

Let's explain some parts of the code above. The {{!< default}} tag means that everything within this file will be inserted into the {{{body}}} of the default.hbs template.

Next we have a page header area, where we use data from the back end like the page image and page title defined for the page in the Ghost Admin Panel.

The last part is the content of the page, which in our case is some contact information like address and a contact form to receive emails.

That is it, now if you want you can style the page elements with css.

The last step needed is to restart ghost:

ghost restart

If you visit [yourghostwebsitedotcom]/contact you should see the page as it was defined in the page-contact.hbs file.

If you want to define other custom pages you have to the same thing, creating page-url_of_page.hbs and then define the content in the file.

I hope this tutorial helped you!

Tags:#ghost development#ghost theme#ghost cms