SOLFIND
Web Lens
Portal home

🥯 Build with Ghost: A partial guide to everything

https://ghost.org/tutorials/partial-guide/ • 123 KB fetched
Open original page


🥯 Build with Ghost: A partial guide to everything

Open menu

Product

For Creators

YouTubers, bloggers, podcasters, musicians & artists

For Publishers

Writers, journalists, local news and new media outlets

For Business

Modern brands & companies with ambitious content marketing

For Developers

Source code, documentation, guides and tutorials

Explore

Resources

Marketplace

Professional themes, custom integrations and qualified experts

Start here New

A huge library of guides, stories, interviews and tips for success

Themes

Hundreds of beautifully designed publication templates

Help center

Get help with product features and answers to common questions.

Integrations

Connect thousands of apps and services with your website

Product updates

All the latest changes and improvements to Ghost

Experts

Get help building your site from certified Ghost developers

About us

Learn more about the people behind the platform (We're hiring!)

Pricing

Sign in
Get Started — free

Close menu

For Creators

Join thousands of creators using Ghost to share their work

For Publishers

The platform for independent publishers

For Business

Content marketing for modern business

For Developers

Source code, documentation, guides and tutorials

Explore
Pricing
Marketplace
Themes
Integrations
Resources
Help center
Product updates
Developers
About us

Get Started — free

Existing customer?
Sign in

Tutorials Newsletter
5 min read
🥯 Build with Ghost: A partial guide to everything

In lucky Issue 7, learn to craft stunning themes, boost engagement with new signup features, and gain insights from tech educator Erin Mikail Staples. Enjoy the fortune-filled insights this issue brings!

Welcome to issue #7! Seven is the most popular lucky number in the world, so this issue is packed with a whole lot of good fortune 🥠

Here's what else this issue includes:

* Build beautiful themes with three new tutorials to help you

* Grow engagement with new signup cards and embeddable forms

* Gain insights from Erin Mikail Staples , a renowned developer advocate, tech educator, and comedian, as she shares the secrets behind her vibrant, stylish Ghost site

🏋️
Pro tip: Bring up the card menu in the editor by typing / on a new line. Start typing to filter card types and quickly find the one you want 🎴

Use partials to simplify your theme development

Partials are an essential tool for quick, maintainable theme development. These partial templates encompass bits of code that you can use throughout your theme. Typical use cases include cards , CTAs , headers , navbars , or any other elements you find yourself using repeatedly. (Those links all point to real-world examples in official Ghost themes.)

A complete guide to partials in Ghost
Learn partials in Ghost for better code maintenance and consistency. This tutorial will teach you what a partial is, how it’s used, and some advanced tips and tricks.
Team Ghost Tutorials

Our new tutorial lays out everything you need to know about partials, from the very basics to advanced properties. In particular, we use a partial to create a card for a fictional music publication, Of Record , and walk through every line of code that makes it work.

This tutorial complements two others we just released:

A comprehensive guide to Ghost’s index template
Learn to create and customize your Ghost theme’s index template in this comprehensive tutorial. Understand the index template functionality, the power of the post loop, and bonus theme customization techniques.
Team Ghost Tutorials

A comprehensive guide to Ghost’s default template
Discover the secrets of Ghost’s default.hbs template. Learn how to optimize your site’s common elements and become an efficient theme-creation machine 🤖
Team Ghost Tutorials

Just shipped 🚢

We've recently shipped two related, exciting features: signup cards and embeddable signup forms .

Signup cards , available to users on the beta editor , give you new ways to grow your audience. Add them to a post by selecting the Signup card from the card menu or by typing / on a new line. Customize the card to fit your publication.

🚨
Important note for theme developers. Signup cards require updates to a theme's CSS to display properly. In particular, cards that are full-width or have a split layout with a contained image add a kg-content-wide class that requires styling. Additionally, the container for post content may also need to be updated. See our docs for more info . All official themes have been updated, so they are also a great resource for understanding these changes.

Whereas signup cards are for use across your Ghost publication, embeddable signup forms can be used anywhere on the web. Customize the form and use the provided code to grow your audience on any platform.

Ideas and tools 🛠️

* The modern web is responsive by default. That responsivity is powered (in large part) by media queries. Here's everything you need to know .

* Out of the loop on modern CSS? Stephanie Eckles has got you covered . This article is just ❤️‍🔥

* 🍱 One hot new web design trend is bento grids. See how these beautiful sites are using it .

* Seven pro tips for working with fonts in Figma . These tips are actually really helpful 💁

* Learn how to make shiny, rotating cards using this fantastic set of CSS techniques .

Erin Mikail is here for the rise of the personal blog (again)

As the Sr. Developer Community Advocate at HumanSignal, Erin empowers the open-source community behind the Label Studio project. Working from NYC, Erin creates educational materials like tutorials, speaks at events, runs workshops, and maintains community channels to improve user experience.

While doing all of that, Erin also has a kick-ass Ghost site! It's rocking a slightly modified version of the Groovy theme , which showcases some clever uses of partials and an engaging index template.

Erin has been on Ghost for a while because, as an open-source platform, it provides flexibility and control over content and appearance. Also, the fact that Ghost is a nonprofit aligns with Erin's values. She says, "Ghost.org offers a genuine commitment to the public good rather than focusing on creating profits for shareholders. They reinvest their revenue into their platform, continually improving and upgrading. This has given me the confidence that they truly value their community, not a group of external investors" ❤️

Meet Erin's coding partner, Q
If Erin could pass on one bit of advice when working with Ghost, it's not to be afraid to ask for help. Ghost's Forum and GitHub are open and responsive. They're full of people willing to help. Erin says she has found the answer she needed on the Forum too many times to count.

done > perfect

And, when possible, Erin says to remember that done is better than perfect. Rather than letting posts linger as drafts, "embrace the joy of constantly improving and being a work in progress." Amen!

👉 Follow Erin (and Q) on the web

Sites featured in the Build with Ghost newsletter are discovered through our creator network, Ghost Explore . It’s a way for creators and readers alike to discover their favorite new publications. Anyone running a Ghost site can add themselves to Explore to be featured throughout the wider Ghost ecosystem. If you’d like to be featured in this newsletter, add your site to Explore and reply to this email.

Thanks for building with us.

Have an idea for a Ghost tutorial? Reply to this email and let us know ❤️

Looking for other creators and developers working with Ghost? Join the official Ghost Forum , where we talk about all things Ghost!

On this page
Introduction

How was the tutorial?

Give us some feedback

Keep on learning

✅ Remind me to change this title

5 min read

💌 Build with Ghost: Email is changing in a big way

3 min read

🎁 Build with Ghost: Wrapped 2023

2 min read

📝 Build with Ghost: Documentation incoming

4 min read

➕ Build with Ghost: Recommendations for the open web

5 min read

⦿ Build with Ghost: Meet our new official theme

6 min read

👩‍🎨 Build with Ghost: The art of the post template

5 min read

🧠 Build with Ghost: Do you know these essential concepts?

4 min read

🏗️ Build with Ghost: First steps for creating a custom theme

5 min read

💻 Build with Ghost: Themes made easy

5 min read

📖 4 ways to build a read-next section in Ghost

4 min read

🐛 How to debug your Ghost theme once and for all

3 min read

🏎️ Build Ghost themes more quickly with our new VS Code extension

5 min read

Be the first to know.

Join the Ghost developer community — sign up to get early access to the latest features, developer tools, and tutorials.

Subscribe

Email sent
Try again

No spam. Once a month. Unsubscribe any time.

Most helpful

Essential tutorials to get you started

Funda mentals

The basics of Ghost theme development

Level up

Next-level development techniques

Do more

Ideas & inspiration for whatever comes next

Docs
Content API
Help Center

Published with Ghost

Links found on this page

  1. For Creators YouTubers, bloggers, podcasters, musicians & artists [direct]
  2. For Publishers Writers, journalists, local news and new media outlets [direct]
  3. For Business Modern brands & companies with ambitious content marketing [direct]
  4. For Developers Source code, documentation, guides and tutorials [direct]
  5. Explore [direct]
  6. Marketplace Professional themes, custom integrations and qualified experts [direct]
  7. Start here New A huge library of guides, stories, interviews and tips for success [direct]
  8. Themes Hundreds of beautifully designed publication templates [direct]
  9. Help center Get help with product features and answers to common questions. [direct]
  10. Integrations Connect thousands of apps and services with your website [direct]
  11. Product updates All the latest changes and improvements to Ghost [direct]
  12. Experts Get help building your site from certified Ghost developers [direct]
  13. About us Learn more about the people behind the platform (We're hiring!) [direct]
  14. Pricing [direct]
  15. Sign in [direct]
  16. Get Started — free [direct]
  17. Developers [direct]
  18. Tutorials [direct]
  19. Newsletter [direct]
  20. cards [direct]
  21. CTAs [direct]
  22. headers [direct]
  23. navbars [direct]
  24. A complete guide to partials in Ghost Learn partials in Ghost for better code maintenance and consistency. This tutorial will teach you what a partial is, how it’s used, and some a [direct]
  25. A comprehensive guide to Ghost’s index template Learn to create and customize your Ghost theme’s index template in this comprehensive tutorial. Understand the index template functi [direct]
  26. A comprehensive guide to Ghost’s default template Discover the secrets of Ghost’s default.hbs template. Learn how to optimize your site’s common elements and become an efficient th [direct]
  27. signup cards [direct]
  28. embeddable signup forms [direct]
  29. beta editor [direct]
  30. See our docs for more info [direct]
  31. Here's everything you need to know [direct]
  32. Stephanie Eckles has got you covered [direct]
  33. See how these beautiful sites are using it [direct]
  34. Seven pro tips for working with fonts in Figma [direct]
  35. fantastic set of CSS techniques [direct]
  36. Groovy theme [direct]
  37. Forum [direct]
  38. GitHub [direct]
  39. 👉 Follow Erin (and Q) on the web [direct]
  40. Ghost Explore [direct]
  41. Introduction [direct]
  42. ✅ Remind me to change this title 5 min read [direct]
  43. 💌 Build with Ghost: Email is changing in a big way 3 min read [direct]
  44. 🎁 Build with Ghost: Wrapped 2023 2 min read [direct]
  45. 📝 Build with Ghost: Documentation incoming 4 min read [direct]
  46. ➕ Build with Ghost: Recommendations for the open web 5 min read [direct]
  47. ⦿ Build with Ghost: Meet our new official theme 6 min read [direct]
  48. 👩‍🎨 Build with Ghost: The art of the post template 5 min read [direct]
  49. 🧠 Build with Ghost: Do you know these essential concepts? 4 min read [direct]
  50. 🏗️ Build with Ghost: First steps for creating a custom theme 5 min read [direct]
  51. 💻 Build with Ghost: Themes made easy 5 min read [direct]
  52. 📖 4 ways to build a read-next section in Ghost 4 min read [direct]
  53. 🐛 How to debug your Ghost theme once and for all 3 min read [direct]
  54. 🏎️ Build Ghost themes more quickly with our new VS Code extension 5 min read [direct]
  55. Most helpful Essential tutorials to get you started [direct]
  56. Funda mentals The basics of Ghost theme development [direct]
  57. Level up Next-level development techniques [direct]
  58. Do more Ideas & inspiration for whatever comes next [direct]
  59. Content API [direct]
  60. Ghost [direct]