Build with Ghost #9

⦿ Build with Ghost: Meet our new official theme

We share our newest default theme Source, chat with Bekah from OpenSauced, and share the latest news on web dev and design.

October is a month of change 🍂, and we've got some big ones to share in this month's issue:

  • Source has launched! Our new default theme brings customization to a whole new level 🚀
  • Can you spot an AI-generated image? How much do you know about Unicode (and why does it matter)? All this and more in our "Ideas and tools" section.
  • This month's featured site, OpenSauced, combines two of our favorite things: pizza and open-source software 🍕 💻
Pro tip: Ever wondered where to find all the available keyboard shortcuts? They're now included right in the Editor. Look for Keyboard shortcuts in the sidebar.

Meet Source, Ghost's new default theme

Source: Our new default theme

That's right! Casper is no longer Ghost's default theme. (But don't sweat, it's still available from the Ghost Marketplace.)

The goal of Source is to offer a highly configurable theme that can accommodate almost any publication style — all without having to write a line of code. By turning some knobs and dials, authors can achieve radically different layouts and identities, as seen in the screenshots below:

Highlight Layout for Ghost source theme
Highlight Layout
Magazine Layout for source Ghost theme
Magazine Layout
Landing Page Layout for Source Ghost theme
Landing Page Layout

But that's not all. Source brings some new features for theme developers, too.

Custom setting visibility

With custom setting visibility, theme developers can show custom settings to their users only when those settings are relevant. This ability makes your theme easier to navigate and the user experience more intuitive.

If you're unfamiliar with how custom settings work in Ghost, check out our tutorial for everything you need to know.

Custom settings are the ultimate power-up for Ghost themes
Want to elevate your Ghost theme? Dive into custom settings with this complete guide. Choose typefaces, color schemes, and more. Your theme, your rules!

While custom setting visibility makes the user experience more intuitive, this feature itself might be a little unintuitive. Keeping with our pizza theme, here's an explanation.

Your user orders a pizza, so you show them the toppings option. They can choose mushrooms, pepperonis, or if they're a genius, pineapple. Showing the toppings option makes sense because they chose pizza. However, if they chose salad, showing the toppings option wouldn't make sense 🙅

slice of pizza

Custom setting visibility works the same way. You control which settings are visible depending on the values users choose. Let's look at a real-world example to see this concept in action.

In Source, it's possible to toggle the background image on and off — but only when the Header style option is Landing or Search.

Search layout with background image
Search layout with background image
Search layout without background image
Search layout without background image

For other layouts, this option doesn't make sense because there isn't a background image to toggle, like in the Magazine layout below.

Magazine layout
Magazine layout

Setting visibility ensures that the background-image toggle is only available when the option is relevant. The graphic below shows precisely how options change depending on the value of Header style:

Custom settings shown in a variety of states. All of them show different options depending on the value of the first option, header style

Now that you have a handle on custom setting visibility, learn how to implement it in your theme and provide a more refined, intuitive experience for your users 🤵

More custom settings

Custom settings were limited to 15. Now it's 20.

Go straight to the Source

The best way to learn how to build a Ghost theme is by checking out the open-source code that powers our official themes. This has never been more true than for Source. Not only does Source show you how to build a highly customizable theme using best practices, but it also includes lots of comments along the way that explain exactly what its code is doing.

GitHub - TryGhost/Source: The default theme for Ghost
The default theme for Ghost. Contribute to TryGhost/Source development by creating an account on GitHub.

Ideas and tools 🛠️

All about open source at OpenSauced is not only a delicious domain name, but also a haven for open-source enthusiasts. We chatted with Bekah from OpenSauced about the company, its mission, and why they use Ghost for their newsletter about open source.

OpenSauced embraces the expansive world of open source, emphasizing that it's not just about code. Their perspective? Everyone can contribute to the open-source sphere, whether through detailed bug reports, insightful blog articles, or fostering community connections.

For those looking to get into the world of open-source software (OSS), OpenSauced offers a cool searchable database of repositories, featuring codebases that are trending and popular.

OpenSauced Insights
The open-source intelligence platform for contributors and maintainers. Unlock the power of open source with project insights by the slice.

Ghost, too, is proudly open source. OpenSauced's decision to use Ghost for their newsletter was motivated by this fact. Bekah also notes Ghost's low barrier to entry that lets folks get started quickly, as well as more advanced approaches like using markdown, which makes her happy 🙂

Above all, we agree with OpenSauced that OSS is a great uniter, bringing people together from around the world to build "something bigger than individual projects." As Developer Experience Lead, Bekah is focused on enhancing the journey for both contributors and maintainers. Want to hear more from Bekah? Check out her recent video for deeper insights:

Sites featured in the Build with Ghost newsletter are discovered through our creator network, Ghost Explore. It’s a way for creators and readers 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?

Be the first to know.

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

No spam. Once a month. Unsubscribe any time.