Custom Content Types and the Fields UI

Posted: May 7, 2013 under Drupal

One of the best things about Drupal is the ability to flexibly manage your content. If you're coming from a WordPress background, you'll know that system uses the Post and Page for its content types. In Drupal you have something similar in the Article and Basic page, but also an easy to use interface for creating a virtually unlimited number of other content types

Before we get into the how, let's briefly discuss why we would want to use custom content types. Some of you may be thinking to yourselves that you've been getting along very nicely without additional content types. Whenever you've needed to organize your content, you've always had your taxonomy terms handy.

Although taxonomy terms (the equivalent of Categories in WordPress) are very useful, they don't solve the same problem as content types. Let's break away for a moment from the idea of our site consisting of pages and instead think of it as being comprised of objects. Of course we still have objects we call pages, but we may also find that our site has other types of objects like products, events, and forum topics.

Ultimately, all of our objects may be expressed as web pages, but conceptually they represent different types of things and have often have different characteristics. We can use Drupal's custom content types and the Fields UI to define these objects and give a more logical structure to our site's content. 

Now you may be asking about those taxonomy terms...where do they fit in? Taxonomy terms simply help us differentiate between the variations we find within our objects. For example, a bicycle and a shirt are both products, but certainly quite different. So we can use taxonomy terms to essentially create sub-categories within our content types. In a future lesson in this series we'll take a closer look at taxonomy in Drupal.

Creating a Custom Content Type

Now that we have an idea of why we would want a new content type, let's create one called "Product" for our example site. We'll begin by going to Structure > Content types. You should see something like the screenshot below.

Custom content types

You'll see a link at the upper left that says, "Add content type". Go ahead and click that link. You'll be directed to the screen below where we can define our new content type.

Creating a new content type

The name and description fields are pretty self explanatory, but we'll briefly go through the other fields in the tabs at the bottom of the form.

Submission form settings
You see three settings under this tab. The first is "Title field label". This is what content creators will see when creating a new piece of content and by default it's set to, "Title". Frequently with custom content types, this isn't as descriptive as we would like. In our case we should change it to something like, "Product name". 

The second setting controls preview options and the last one allows you to create a message that will be displayed at the top of the page providing submission guidelines. This can be very useful if the content type you are creating will be user-generated content.

Publishing options
These setting help you determine the default status of the post when you click 'Save'. For example, should the post be automatically published? Should it be promoted to the front page? If you have the Revisioning module installed you will also see options for creating a new revision - very handy if you want to be able to roll back any changes.

Display settings
You can disable the display of the author and post date information by unchecking this box.

Comment settings
This is where you can adjust the settings for the comments on your site. I personally recommend you consider disabling Drupal comments and use a third party commenting system. I've talked about this in a recent post, but suffice it to say there are significant advantages to not using Drupal's built-in comments.

Menu settings
With this setting, you can optionally make your content assignable to any menus you may have created for your site.

XML sitemap
This setting isn't present in Drupal by default, but is found in our example site because using a sitemap is such an important - and in my view, fundamental - part of building a website. However, there are times when you may not want a content type indexed by search engines and here is where you can disable that if needed.

Custom breadcrumbs
This is another one that isn't included by default with Drupal, but also very useful for most sites. It exposes the custom breadcrumb information on the node edit form. 

For most of these settings, we'll stick with the defaults. Once we've given our content type a name we'll click the "Save and add fields" button at the bottom of the form. You should then see something similar to the image below.

Fields UI

The Fields UI

The image above is the Fields UI, the administrative interface for adding and configuring the fields for your content types. There are a few fields here that have been added by modules that are installed with the example site (Meta tags, for example) and two that are included by default by Drupal. The default fields are Title - in our case renamed to Product name - and Body.

What we're going to do next is add a new field. Since we're adding a content type for our products,  Price seems like a logical field to start with.

Adding price field to a content type.

You'll notice in the area highlighted in green how we have the form filled out. Our Field type is set to decimal and we've chosen a text box for the widget - aka input element -  that will appear on the node create form for our content type. Let's go ahead and click Save to continue.

The next screen (not shown) allows us to set the precision of our decimal number as well as how many digits should be to the right of our decimal point. We've kept these at the defaults and continued to the screen below.

Content type settings

We won't go over each of these, but an important point to keep in mind is that these settings will change depending on the content type you set for the field. For example, if you chose the image type, you would have settings for allowable file formats, maximum and minimum image size, as well as for which image style you wanted to apply.

In this particular example, one field we may want to change would be the prefix. Maybe setting it to the dollar sign (or pound, euro, etc.) might be a good idea. Let's do this and then click save. You'll then see that our field has been added to our content type and we can change its position on the node create/edit form by dragging it up or down our list of fields.

Before we move on we should briefly note that you can also reuse fields that you may have defined previously using the, "Add existing field" component. One situation where this may come in handy is for an image field. Instead of having multiple image fields, you could reuse a single field for all of your content types and control the display of the image using image styles. Sometimes this may not be what you need, but in general it's a good practice because it will make things less confusing as your site grows in complexity.

Managing Display

The final thing we'll discuss is managing the display of our fields. You'll see a tab on the page titled, "Manage Display". The settings on that tab are pretty straightforward so I won't go into too much detail, but something that new site builders sometimes do is forget to hide the display of the label for certain fields, in particular, those for images. This tab is where you can remove the label for those images as well as other aspects of how the fields for the content type will be displayed on your nodes (aka web pages).

That's it for our discussion of content types and the fields UI. There is a lot going on, but fortunately it is pretty intuitive to use, particularly once you've got a handle on what is happening conceptually. Next time we're going to take a look at using Views - a big and very important topic!

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.