Build a Blog in Drupal 8: Content types and Fields

This tutorial is part of the “Build a Blog in Drupal 8” series:

1. Content types and Fields
2. Adding Comments
3. Using Views
4. Managing Blocks
5. Create and Manage Menus
6. Custom Contact Forms

With Drupal 8 on the horizon, now is a good time to start using it. The best way to learn the new version is to build something with it.

Over the next few weeks, I’ll be publishing a series of tutorials teaching you how to create a blog in Drupal 8. The aim of the series is to help new comers, as well as experienced site builders, how to create a blog website using Drupal 8.

Throughout each tutorial, major changes between Drupal 7 and 8 will be highlighted. Even if you know Drupal 7, follow along and you’ll learn what’s new in Drupal 8.

In this first tutorial, you’ll learn how to create a Blog content type and how to add custom fields. You’ll also learn about the Taxonomy system by creating your own vocabulary to categorize blog posts.

Install Drupal

Before we begin, make sure you have installed Drupal 8 using the Standard installation profile. I won’t go into details on installing it, but if you need to spin up a test site then check out simplytest.me. Just type in “Drupal core” into the project name field and select the latest Drupal 8 option from the drop-down list. Or click on this link.

Create Blog Content Type

When using the Standard installation profile, you’ll get an Article content type. This content type is useful. It comes with an Image and Tags field. On a proper Drupal project you would use this content type for a blog section.

But to learn how they work, we’ll need to create our own. So we’ll create a Blog content type with the following fields:

• Body
• Image
• Tags
• Category

To save time we’ll reuse the Image and Tags field which is already on the Article content type, but we’ll need to create a Category field which will allow you to categorize blog posts.

1. Click on Structure in the toolbar, “Content types” and click “Add content type”.

2. Enter in Blog into the Name field and enter “Used in the daily blog section.” into the Description field.

3. Below the Description, you’ll see a group of vertical tabs. Here you can configure content type settings like “Publishing options” and “Display options” and more. These options can be changed at anytime, so we’ll leave them as they are for now.

When you’re ready click on “Save and manage fields”.

Adding Fields

Once you’ve created a content type, you’ll be redirected to the “Manage fields” page where you can create new fields and edit existing ones.

When a new content type’s created Drupal will add a Body field. This is default functionality, if you don’t want to use the field simply delete it.

As mentioned earlier, the Blog content type will have four fields: Body, Image, Tags and Category.

The Body is already on the content type, but we’ll need to add Image and Tags. The Standard installation profile already created these fields and attached them to the Article content type. Let’s just save time and reuse these fields.

1. From the “Manage fields” page click on “Add field”.

2. From the “Re-use an existing field” drop-down, select “Image: field_image” and click on “Save and continue”.

3. Leave the field settings as is for now and click on “Save settings”.

4. Now repeat the steps to add the Tags field. Click on “Add field”, select “Entity reference: field_tags” from “Re-use an existing field” and click on “Save and continue”.

In the “Reference type” field-set, check Tags and “Create referenced entities if they don’t already exist” under Vocabularies and click on “Save settings”.

New in Drupal 8

Fields can’t be shared across entity types.

In Drupal 7 you could share fields across entity types. For example, a field could be used on an Article content type as well as a Tags vocabulary.
In Drupal 8, fields can only be shared amongst bundles not entity types. So if you create an image field on the Article content type, it can only be shared with other content types. You couldn’t attach it to a vocabulary or user entity.

For a more technical explanation on entities and fields, go to the link below:

https://drupalwatchdog.com/blog/2015/3/entity-storage-drupal-8-way

Form Displays

You may have noticed that we didn’t select or configure a widget. In Drupal 7, when you create a field you also selected a widget. Now in Drupal 8, you manage the widgets from the “Manage form display” page.

What’s a widget?
A widget is a form element used to enter data into a field. A text field, select box, checkboxes all of these are widgets.

You can choose a different widget by selecting one from the drop-down. You can also reorder them by dragging them up or down. To configure one click on the cogwheel, similar to how formatters are managed in Drupal 7 and still in Drupal 8.

For now, just reorder the fields to the top of the page.

1. On the “Manage form display” page, move the Image field below the Title and Tags below Image, then click on Save.

At this point, the Blog content type has a Body, Image and Tags field. The only one missing is the Category field. But before we can create it, we’ll need to create a Category vocabulary.

Create Category Vocabulary

1. Click on Structure, Taxonomy and click on “Add vocabulary”.

2. Enter “Category” as the Name and “Used to categorize blog posts.” as the Description, then click on Save.

3. Enter in a few category items by clicking on “Add term”. I entered in the following:

Now that the vocabulary has been created, let’s jump back to the “Manage fields” page and create the Category field.

Create Category Field

1. Go to Structure, “Content types” and click on “Manage fields” on the Blog row. Then click on “Add field”.

2. From the “Add a new field” drop-down, select “Taxonomy term”. Enter Category into Name and click on “Save and continue”.

3. On the “Fields settings” page, leave “Allowed number of values” limited to 1. We only want to allow a single category to be selected on a blog post. Then click on “Save field settings”.

4. In the “Reference type” field-set, select Category under Vocabularies and click on “Save settings”.

Configure Category Widget

We’ve added the field, now let’s configure the widget like we did for the others.

1. Click on the “Manage form display” tab, move the field so it sits above the Body field. Then change the widget to “Select list”. Scroll to the bottom then click on Save.

Configure Blog Formatters

We’ve spent all our time building out the fields and configuring the widgets. Now let’s configure the field formatters. The “Manage display” page isn’t that different in Drupal 8.

1. Click on the “Manage display” tab. All we’ll really do is reorder the fields.

2. Move Links right to the bottom and move Image so it sits above the Body field. It should look like the image below:

Once you’ve reordered the fields, don’t forget to click on Save at the bottom of the page.

Create Blog Post

Now go to Content, “Add content” and click on Blog. Fill out the form and click on “Save and publish”.

Summary

The site building experience isn’t drastically different than in Drupal 7. Which in a way is good. You won’t have to learn any crazy new concepts. The UI in Drupal 8 for managing content types and fields has been streamlined and feels a lot nicer.

In the next tutorial, we’ll look at adding comments to the Blog content type.