Bolt.tips

It's ridiculously easy to set up new page types in Bolt CMS

At Bolt HQ, we are a bunch of pragmatic web developers who make a living out of building websites for clients. We know a thing or two about CMS features that content editors are looking for, so with the help of our open source community, we baked them into Bolt CMS. Bolt gives you the Lego blocks, it's up to you to decide if you are building a megapolis, or a quiet little house on the side of the road. It's completely free and open source.

Today we’re building new page types, as many and as variable as you like

To build different types of pages, called Content Types in Bolt speak, we need knowledge of two concepts:

  • Basic YAML file structure

  • Creating Content Types and adding fields

Basic YAML file structure

YAML (stands for YAML Ain’t Markup Language) is a human-readable data serialisation standard that can be used in conjunction with all programming languages and is often used to write configuration files. In plain English, YAML is an easy-to-read and work with configuration file format!

Here is an example:

# This is a valid YAML file

groceries:
  - milk
  - eggs
  - juice

It allows you to create your own structure and nesting, pretty flexibly:

# This is also a valid YAML file

groceries:
 milk:
    price: 2.99
    shelf_life: 2021-06-05
 eggs:
    price: 1.99
    shelf_life: 2021-05-20
    size: M
 juice:
    price: 1.50
    shelf_life: 2022-01-01
    type: orange
    size: 2 litres

Pretty readable, right? You can learn more about YAML files in this article by Robert Gibb.

So far, so good!

Creating Content Types

To create a Content Type, you need to locate the config/bolt/contenttypes.yaml file of your Bolt project.

Each Content Type has three key components:

  • A plural name (e.g. pages, books, posts, news, …)

  • A singular name (e.g. page, book, post, newsitem, …)

  • And fields: what type of information do you want to store and display on a page, or a book, or a post.

For instance, here is an example of a very simple pages Content Type:

posts:
  name: Posts
  singular_name: post
  fields:
    title:
      type: text
    body:
      type: redactor

By just adding those few lines of configuration, Bolt will allow you to:

  • Create, Edit, Update and Delete (CRUD) as many posts as you may need.

  • Create a frontend page for each Post, as well as a page containing a list of all posts (paginated).

Here is how it will look when you create a new Post from the Bolt Editor:

Creating a new Post in the Bolt EditorCreating a new Post in the Bolt Editor

You can add as many or as few Content Types as you need! For maximum flexibility, you can use any combination of over 20 field types in Bolt.

Here are a few popular fields that people use:

  1. Filelist & Imagelist: easy way to allow editors to attach multiple files and images.

  2. Collections: a grouping of fields. Adding dynamic number of fields is as easy as pressing a button in the Editor. For example, we can define a collection of members on our Team page and allow content editors to add multiple people with their name, image and position. Editors can add, delete, and re-order collection items with a click of a button!

  3. Templateselect: allow editors to select the Twig template that will be used to display the page.

For a comprehensive list of all built-in fields, check the documentation here. There are also custom fields that the Bolt community has developed over time, which are available as extensions on the Bolt Extensions website.

The next steps?

If you’re looking to learn more, here are useful resources to help you get started:

Happy building! 🛠⚙️

Permalink - Written by Ivo on June 4, 2021.

« How to build a personal blog with Bolt CMS in under 30 minutes…