Create the blog
The first thing we’ll do is create a new Section for our blog posts.
# Create a section
- In the control panel, choose Settings from the main navigation.
- Choose Sections from the “Content” options.
- Choose + New section.
- Enter “Blog” for this new section’s name. Notice the lowercase handle and Entry URI Format are created for you. The handle is what you’ll use referring to this section in your templates and GraphQL queries, and the URI is where you’ll eventually see your blog post on the public site.
- Enter
blog/_entry
for the Template setting. We’ll create that template later on. - Leave the rest of the default settings as they are and choose Save.
You’ll see a new Entries menu item in the sidebar navigation. Choose that, then New Entry → Blog.
We can create a new blog post now, but all it would have is a Title field:
Let’s create some fields to store blog post content!
# Create blog fields
Now we’ll create some fields for storing content and add them to the blog entry type’s field layout.
Here’s what we’ll set up for our blog posts:
- A Volume for storing images used for post content.
- A Plain Text field to be used for a post summary.
- An Assets field for a feature image.
- A Categories field for post taxonomy.
- A Matrix field for flexible post content.
# Create an Asset Volume
First, let’s create a place to upload the files we’ll use for our feature and post images.
Craft uses the concept of Assets to describe uploaded files. Assets consist of the files themselves and any other fields we’d like to attach to them. All Assets are stored in folders referred to as Volumes. These can be in your filesystem or different cloud storage providers—see the documentation on Volumes for more about those options.
We’ll create a local Asset Volume within the web root for blog post images:
- In the control panel, navigate to Settings → Assets.
- Choose + New volume.
- Enter the name “Blog” and set the following:
- Assets in this volume have public URLs: on/enabled
- Base URL:
@web/assets/blog
- File System Path:
@webroot/assets/blog
- Save the Asset Volume.
Craft will create that folder and let you upload and manage its Assets from the control panel.
@web
and @webroot
are aliases Craft includes by default, pointing to the base site URL and document root file path respectively.
If you’d rather store your Assets on a cloud service like Amazon S3, you could install the Amazon S3 plugin (opens new window) to select and configure that Volume Type instead.
# Create a Category Group
Now create a Category Group we can use for blog post categories:
- Navigate to Settings and choose Categories.
- Choose + New category group.
- Enter the name Blog Categories and limit Max Levels to
1
. - For Category URI Format, enter
blog/category/{slug}
and set the Template toblog/_category
. - Save the Category Group.
# Install the Redactor plugin for rich text fields
You’ll probably want a rich text editor (WYSIWYG) for editing the main text of your blog posts. For this, we’ll install the first-party Redactor (opens new window) plugin. You can do this through the control panel or from the terminal.
Let’s be adventurous and use console commands:
- From your terminal, run
ddev composer require craftcms/redactor
. Composer will download the plugin and add it to your project. - Now run
ddev php craft plugin/install redactor
.
You can install Craft and Craft plugins from the browser like we did earlier or using terminal commands like we did here. 😎
That’s it! The Redactor plugin is installed and ready to use in our site.
# Create individual fields
Next, let’s create the individual fields for our blog posts. With Craft, we explicitly create and configure each custom field we want to use so we can arrange them in field layouts.
Navigate to Settings → Fields.
Choose + New group to create a new field group with the name “Blog Post Fields”. Save the group.
Create a Plain Text “Summary” field. Choose New Field and enter the following:
- Name:
Summary
- Default Instructions:
Enter a brief, one or two sentence post summary.
(This helps the content editor know what to do!) - Allow line breaks: on/enabled
- Initial Rows:
1
Save the field.
- Name:
Create an Assets “Feature Image” field. Choose New Field again and enter the following:
- Name:
Feature Image
- Field Type: Assets
- Restrict uploads to a single folder?: checked
- Default Asset Location: Blog
- Restrict allowed file types?: checked
- Select Image to ensure content editors can only select files that are images
- Limit:
1
Save the field.
- Name:
Create a Categories field named “Post Categories”. Again choose New Field and enter:
- Name:
Post Categories
- Field Type: Categories
- Source: Blog Categories (selected by default, because we just created it in the last step).
Save the field.
- Name:
Create a Matrix field named “Post Content”. Choose New Field one more time and enter:
- Name:
Post Content
- Field Type: Matrix
We’ll use the Configuration area to add two block types, each being its own group of sub-fields:
- First add a text block an author can use to enter rich text.
Choose + New block type, enterText
for its Name, and choose Create. For this block’s first field, enter:- Name:
Text
- This field is required: checked (Every text block should have at least some text.)
- Field Type: Redactor
- Name:
- Add one more block for images.
Choose + New block type again, enterImage
for its name, and enter:- Name:
Image
- This field is required: checked (Every image block should have an image.)
- Field Type: Assets
- Restrict uploads to a single folder?: checked
- Restrict allowed file types?: checked
- Select Image to ensure content editors can only select files that are images
- Name:
Save the field.
- Name:
# Add fields to the blog field layout
Now we have everything we need to collect content for our blog posts. If you were to create a new entry right now, however, you’d still only see that Title field again.
It’s time to use our custom fields by creating a blog section Field Layout:
- Navigate to Settings → Sections.
- Choose Edit entry types (1), and then choose the Blog entry type that was added for you.
- At the bottom of this view you’ll see the field layout designer. Choose + New Tab.
- Select the gear icon to the right of the new tab, choose Rename, and give this tab a more descriptive label like
Post Content
. - Drag each of the fields we created earlier to this tab, in whatever order you’d like.
- Since every blog post should have some kind of content, choose the gear icon to the right of the “Post Content” field and make sure it’s required.
- Enter
Headline
for Title Field Label. - Save the field layout.
That Title Field Label is a simple way to relabel the title—which every entry has—to something more descriptive for content editors. This can be especially important later if each entry represents something like a service, a physical object, or a person.
Once you’ve added fields to the blog section’s field layout, return to Entries and create a new blog entry. Now you’ll see each of the fields you created and you’re ready to publish some content!