It likely doesn't surprise you, but every article you publish looks the same. Because each one, without fail, uses the same post template. And, 99% of the time – that's precisely what you want: consistent styling across your publication.
But what about that 1%? What if you publish a limited-run series that needs bespoke styling? What if you want to omit the author or other metadata from certain posts? Or what if you want to load a library to show graphs and charts?
Ghost makes it easy to create custom templates for just such occasions. This tutorial will walk you through the steps to create them.
Create a template file
Our publication, History & Design, is launching a limited-run series on Midcentury modern design to promote a forthcoming book on the subject. To make these posts stand out from our usual ones, we're going to create a custom template.
The first step is to open your theme in a code editor. Rather than creating a new file from scratch, jumpstart the custom template creation process by copying the existing
post.hbs file. This way, we'll have a base from which to start.
Rename the file
The filename is essential. The
custom- prefix tells Ghost that the file is a custom template, which makes it selectable in the Ghost Editor. Everything after the initial hyphen
- specifies what authors see in the Editor's Template dropdown menu. In this example, our custom template appears as "Midcentury Modern."
Now, the author can easily choose our big splashy custom template for these special posts.
Designing the custom template
Because we just copied our current post template for our custom one, we don't actually yet have our new design.
Let's leverage Ghost's Header card to help us make the custom template. The full-width Header card features customizable sizes, text, backgrounds, and an optional call-to-action button.
This is a Header card
It really catches your attention, right?Learn more
By substituting our existing post header with the Header card, we'll get an easy, eye-catching custom template
Editing the post template
For this example, we'll use the default Ghost theme Casper, but you can adapt this technique for any theme.
custom-midcentury-modern.hbs in a code editor and remove the entire
To remove the gap between the navbar and Header card, add
style="padding-top: 0" to the
The complete custom template now looks like this:
Just zip up your theme files and upload them to Ghost. On any post, you'll now have the option of selecting your custom template. Create your Header card in the post editor and your custom template is ready for publication 🥳
From limited-run series, as in our example, to tweaks, additions, and complex integrations, custom templates are an easy, elegant solution that you now know how to implement 💪
Because the possibilities for custom templates are seemingly limitless, we'd love to see what you've created. Come show and tell with the whole Ghost community over on our Forum. It's a fantastic place to get help and meet fellow Ghost users.