Cross Platform Theme (Ghost + Habari)

Moving blog platforms is hard is it not?

No, I am not moving away from Habari. I have too much invested in it and with the plugins I have made, found, received, or modified, I have no plans of moving to a different platform any time soon.

However, I do know the frustrations of using an unfamiliar platform, some of which I mentioned when I talked about my favorite plugins.

One of those frustrations is having to pick a new theme.

To overcome this, one can port the theme over or turn it into a cross platform theme.

Today, I am going to talk about how to make a theme that works on Ghost and Habari, which I recently accomplished myself.

Steps involved

  1. Create theme
  2. Add in files and make changes needed by other platform.

First, if one does not have a theme, you will need to create one. For this step, I recommend creating the theme for Habari first, in PHP, of course, because Habari needs more files.

Fortunately, there is enough documentation between the Habari wiki and available themes to get one up and running.

If one prefers to make it for Ghost first though, that is fine, since the PHP code to produce the theme for Habari does not look that different from the code for Ghost, except you use PHP variables and functions to get the same content in Habari.

For the purpose of this post, I will assume that the theme was originally made for Habari.

To make a Habari theme work on Ghost, the easiest method is to create three new files, which are named as follows:

  • default.hbs
  • post.hbs
  • index.hbs

According to Ghost documentation, only the latter two are needed for themes, but it is easier to manage with all three files.

The default file acts as the main template, while the other two display content that is similar to the single.php and multiple.php files.

Unless you want to recode everything again, I recommend copying and renaming home.php to default.hbs and index.hbs and single.php (can be either page.single.php or entry.single.php) to post.hbs.

default.hbs

Inside the default.hbs, I would copy and paste the contents of the header and footer files, if they are in separate files, as well as navigation bars or panels (ignore search forms, because there is no native search functionality in Ghost).

Delete all PHP code, except for loop code and header details, so that only HTML tags remain and helpful code remains.

With all of that done, remove the container holding posts (it will be used in the other two files instead) and replace it with {{{body}}}. This is where content from post.hbs and index.hbs, and any other files created for the theme will appear.

Afterwards, making the following changes:

  • Change Options::out(‘title’); to {{meta_title}} or {{@blog.title}}, if it is an instance somewhere other than the header tag
  • Change feed address from URL::out( 'atom_feed', array( 'index' => 1)); to {{@blog.url}}/rss/ and type to application/rss+xml
  • If CSS is in root directory of theme, add <link rel="stylesheet" type="text/css" href="(name of css file)">
    • If an assests directory is used (not recommended, if you use child themes on Habari based on the theme you are making cross platform), add <link rel="stylesheet" type="text/css" href="{{asset /(name of css file)}}">
  • Change blog link code to {{@blog.url}}
  • replace $theme->header() and $theme->footer() with {{ghost_head}} and {{ghost_foot}} respectively

From here on, already existing documentation should be able to say what needs to be changed and to what in this file.

post.hbs

In post.hbs, remove all PHP code (except for PHP variables, as they will remind you of what you what to see), including the loop for tags, but keep the HTML for a tags section, sections meant for comments, and edit links. Ghost does not have an internal commenting system and tags are a big change from Habari.

As for the edit link, I could not find an equivalent in my own research.

After removing the code, place {{#post}} at the very start of the post content and {{/post}} at the end of the post content. If you do not do this, post content will not appear.

Afterwards, go though and make the following changes:

  • Add {{!< default}} to the top of document
  • Change $post->permalink to {{url}}
  • Change $post->title_out to {{{title}}}
  • Change $post->pubdate->out to {{date published_at format=”(Desired format using M for month, D for day, and Y for year (e.g. MMMM DD, YYYY))”}}

  • Change $post->content_out to {{content}}
  • To list tags, use the code found in my theme

With those changes post content should appear correctly and we can move on to the next file.

index.hbs

In index.hbs, remove all PHP code, including comment counters (remember, Ghost has no internal commenting system), but leave code used for the loop and PHP variables.

Afterwards, make the following changes, in addition to the ones made for the post.hbs file:

  • Change foreach($posts as $post) to {{#foreach posts}}
  • Change loop ending } to {{/foreach}}
  • Remove pagination code, if present, and replace it with {{pagination}}
    • If not present, add {{pagination}} now and remove pagination code from the hbs file where it originally resided

The biggest difference between post.hbs and index.hbs is that index.hbs does not need either {{#post}} or {{/post}}.

With all of that done, the theme should now be able to function, without messing with your Habari theme, as long as none of the php or xml files were deleted, on Ghost, after you copy it to the right directory and restart Ghost.

In order to get the full functionality or customization on Ghost, more testing and code modification will be needed, so consider this as a starting point and not a complete guide.

I hope that anyone coming here to make a Ghost + Habari cross platform theme finds this useful, because it was definitely much easier than making a WordPress + Habari cross platform theme.

Use an app on your phone (e.g. Scan for Android) to capture the image above. If successful, you should be taken to the web version of this article.

Copyright © 2015 Bryce Campbell. All Rights Reserved.