How To Convert A Popular Wordpress Theme To Ghost -
 Part 1

How To Convert A Popular Wordpress Theme To Ghost - Part 1

There is no special tool that will just convert any 'ol Wordpress theme to a Ghost theme. Wordpress and Ghost are just very different beasts. The calls are different. You got one using PHP versus one using Node.

So let's be real here. One of the biggest disadvantages of Ghost is its theme selection - to which there are a few hundred. Wordpress has tens of thousands.

But, as a developer, you can make this happen. Or, if you're someone who just loves Ghost as your blogging platform and is willing to take on this challenge, you can make the conversion. Virtually any look and feel of a specific Wordpress theme can be converted to a ghost theme. When I say "look and feel" that's what we're going for. Not feature sets.

Of course, stuff will have to be stripped down but we can make it close. Some Wordpress themes make use of plugins and features specific to those themes but we're not going to try converting all those features. Again, we just want to get the look.

Themeforest is likely the biggest place to contain the largest number of Ghost and Wordpress themes.

At the moment, I'm overhauling lazytech.tv - another blog site about gadgets, gizmos and tech that was originally running on Wordpress but is now on ghost. It's currently using a theme that's decent at best.

Capture-Symmetric-Ghost-Theme-1

Unfortunately, this won't cut it for me. I've considered modifying the existing theme to something that would hopefully be more appealing. After going through every single Ghost theme in Themeforest (as well as other sites), none of them appealed to me; modifications considered.

1. Find The Theme You Like


So here I am looking at Wordpress themes. It didn't take long to find one that stood out...

Capture-Zox-Wordpress-Theme

To me, this Zox theme is clean. It appears edgy, playful and just plain bad ass. Check it out. It has a ton of features - the kinds you see on big sites. It looks professional and has serious stats. At $59, it has sold 1146 times and is rated at 4 1/2 stars out of 5. That one theme made over $67,000.

My goal with lazytech.tv is to have this kind of layout at its homepage.

This Zox theme also has a store built into the theme which I am NOT going to include for obvious reasons but I do also like this part.

Video_Layout

Lazytech.tv has a ton of video on YouTube and this theme has a perfect section for it. Tony Hannides, the site's Editor-in-Chief, uses similar typography and this theme would coincide beautifully with this design.

Videos-On-LZTV-1

2. Familiarize Yourself With How The Ghost Template Works

These are the files and folders that power the Ghost template:

├── /assets
|   └── /css
|       ├── screen.css
|   ├── /fonts
|   ├── /images
|   ├── /js
├── default.hbs 
├── index.hbs [homepage]
└── post.hbs [simple post]
└── package.json [required]
└── custom-featured-story.hbs [added by me]
└── custom-video-story.hbs [added by me]
└── tag.hbs [added by me]

The HBS files you're seeing are basically text files built off the Handlebars templating language used by Ghost.

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

Keep this filing structure in mind as it will begin to make sense once we put the work in.

3. Breaking Down How The Homepage Will Work On Ghost


As I'm going through the layout, I'm finding that I will probably be making a huge use of tags on ghost when all is said and done. Changes to the homepage will be done on default.hbs and index.hbs files.

Give yourself a chance to play around the theme. Click on each of its posts and check out its features.

Boostrap-Breakdown-Zox

When you look at it, you can see that the featured areas are in the middle. Ghost can cover that by marking the story as "featured".

Select-As-Featured-Post-Ghost

I'm not sure how I'm going to do "Trending" but I can call it something else like "Reviews" or something. In Wordpress, some features are themes-specific, meaning they work on that theme and ONLY that theme. This can be problematic when you're deciding to change themes.

In Ghost, things are a little more simplified through the use of tags.

Tags-Selection-Ghost

So if I want something to show up on the "Reviews" section of the layout, we will have to enter in the tag and title it review in our Ghost entries. The video section of the layout will probably be tagged video and so on.

Looking at the current layout, here are the tags I'm thinking of putting out that will break down into each of the parts of the homepage. These tags would also somewhat serve as categories in the ghost version of lazytech.tv.

  • story - pretty is obvious here. It can be news or top 10 of something.
  • reviews - which will list reviews
  • howtos - which will list a bunch of how to articles
  • videos - which will list lazytech videos from YouTube
  • compare - which lists posts where services and products duke it out
  • retro - which will list posts on old school or retrospectives on tech
  • long - is pretty much anything lengthy and involved like op-eds and featured posts.

4. Break Down How Each Post Will Work


The Zox Theme has 11 Templates used to layout how a post (e.g. news story, review, etc) will be displayed.

Considering the categories and tags I'll have in place, I won't be using them all. Just three.

3-Post-Templates-Side-By-Side-1

  • Post Template 1 would deal with posts tagged as story and retro
  • Post Template 5 would deal with the majority of the tags: reviews, howtos and compare
  • Post Template 7 would just be videos

Remember the file structure? Well, these are the files that would be modified and created to correspond with those Post Templates.

└── post.hbs [modified for Post Template 1]
└── ######################
└── custom-featured-story.hbs [created for Post Template 5]
└── custom-video-story.hbs [created for Post Template 7]

That's it for now. In the second installment, we will continue with the following:

Part 2


  1. The 'Tag Page'
  2. Using Chrome's "Save Page as..."
  3. Cleaning Up For Handlebar World
  4. Cleaning up Style Sheets - The Power Of Chrome's Inspect Element
  5. Actual Coding - index.hbs, default.hbs, page.hbs
  6. Actual Coding - post.hbs, custom-featured-story.hbs, custom-video-story.hbs

Part 3


  1. Actual Coding - tag.hbs, tag-review.hbs, tag-videos.hbs, tag-compare.hbs
  2. Actual Coding - package.json and other cleanup
  3. Cleanup and Troubleshoot
  4. Zipping and Versioning
  5. Upload and Cross Fingers

Stay tuned.

About Radford Castro

I own this entire bad boy. I'm a husband, father, developer and entrepreneur. I like to make stuff.

Comments