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 that the lowercase handle and Entry URI Format are created for you. The handle is what you’ll use to refer to the section in your templates and GraphQL queries, and the URI is where you’ll eventually see your blog post on the front end.
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”.

Screenshot of new section fields — Settings for the new blog section.

You’ll see a new “Entries” menu item in the control panel navigation. Choose that item and select “New Entry” → “Blog”.

Technically we could create a new blog post now, but all we would have is a “Title” field.

Screenshot of new blog post entry with only a title — The new blog post entry doesn’t yet have any fields.

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.

Create a local Asset Volume for storing blog post images:

In your local filesystem, find Craft’s web/ folder and create a new folder inside that called assets. Inside that folder, create one more named blog. This is where we’ll store uploaded blog post files.
Back in the Craft CMS control panel, navigate to “Settings” and choose “Assets”.
Choose “+ New volume”.
Enter the name “Blog”, enable the “Assets in this volume have public URLs” switch, enter a “Base URL” value of @web/assets/blog, and a “File System Path” of @webroot/assets/blog.
Save the Asset Volume.

@web and @webroot are aliases Craft includes by default, pointing to the base website URL and document root file path respectively.

Screenshot of settings for the new asset volume — Settings for the new blog volume.

If you’d rather store your Assets on a cloud service like Amazon S3, you could install the Amazon S3 plugin in order to select and configure that Volume Type here.

# 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 now.
For “Category URI Format”, enter blog/category/{slug} and set the template to blog/_category.
Save the Category Group.

Screenshot of new category group fields — Settings for the new blog category group.

# Install the Redactor plugin for rich text fields

You’ll probably want a rich text editor (WYSISYG) for editing the main text of your blog posts. For this, we’ll install the first-party Redactor 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 composer require craftcms/redactor. Composer will download the plugin and add it to your project.
Now run php craft install/plugin redactor.

That’s it! The Redactor plugin is installed and ready to use in our site.

Screenshot of plugins list showing Redactor installed — Redactor now appears in the list of installed Plugins, where it can also be disabled and uninstalled.

# Create individual fields

Next, let’s create the individual fields for our blog posts:

Navigate to “Settings” and choose “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 start by creating a new Plain Text field named “Summary”. Use the “Instructions” input to help the content editor know what to do. Add “Enter a brief, one or two sentence post summary.”. Enable “Allow line breaks” and set “Initial Rows” to 1. Save the field.
Create an Assets “Feature Image” field.
Choose “New Field” again, enter “Feature Image” for its name, and choose “Assets” from the “Field Type” dropdown menu. Enable “Restrict uploads to a single folder?” and select the “Blog” volume. Enable “Restrict allowed file types?” and check “Image” to ensure content editors can only select files that are images. Set Limit to 1 and save the field.
Create a Categories field named “Post Categories”.
Again choose “New Field”, enter “Post Categories” for its name, and select “Categories” as the field type. The “Source” setting will default to our “Blog Categories”, so we can just save the field.
Create a Matrix field named “Post Content”.
Choose “New Field” once more, enter “Post Content” for its name, and choose “Matrix” from the “Field Type” dropdown menu. We’ll use the Configuration setting to define two Block Types that can be added and reordered to build the post content.
1. First add a text block an author can use to enter rich text.
  Choose “+ New block type” and enter “Text” for its name. In the Field Settings section, enter the name “Text” again and select “Rich Text” from the “Field Type” dropdown menu. Since every post should have at least some text, make sure “This field is required” is checked.
2. Add one more block for images.
  Choose “+ New block type” again and enter “Image” for its name. Enter “Image” again for the “Name” under Field Settings. Mark this field required as well and select “Assets” from the “Field Type” dropdown menu. Restrict uploads to the “Blog” volume, enable “Restrict allowed file types?” and make sure “Image” is checked.
3. Save the field.

Screenshot of complete Blog Post Fields group — Our complete group of new fields.

# 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. It’s time to add our custom fields to the blog section in a Field Layout:

Navigate to “Settings” and return to “Sections”.
If you were to choose the name of the section again, that would take you back to the settings we established earlier. This time, 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 better label such as “Post Content”.
Drag each of the fields we created earlier to this “Post Content” 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 the “Title Field Label”.
Save the field layout.

You can also drag an entire field group from the available sets into your entry type’s field layout.

Screenshot of complete blog field layout — Completed blog entry type 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. You’ll see each of the fields you created and you’re ready to publish some content!

Screenshot of new entry screen with our custom fields — A new blog post entry now includes our custom fields.

← Content in Craft CMS Configure globals →

Was this page helpful?

back to craftcms.com