Creating a custom Content Type with CCK

Now that the preparations in the previous section are complete, this section of the guide will help you construct a custom "Content Type" called Article using the CCK module, as well as a variety of custom fields.

After completing the CCK section of the guide, you will have developed skills working with CCK which you will be able to re-apply to your own site in the future, creating your own custom Content Types, and any type of field your Content Type needs. You'll also have gained an understanding about how URL aliases (also known as Paths) work in Drupal, as well as how to make Custom Breadcrumb links for your content types.

Set up the Content Type

Begin by going to Administer > Content management > Content types (admin/content/types) and clicking the "Add content type" link at the top of the page.

  1. For Name enter: Article
  2. For Type enter: article
  3. If you'd like one, enter a Description for your own reference.
  4. Click to expand the "Workflow settings" fieldset and uncheck the Promoted to front page option.
  5. Press the "Save content type" button.

Adding custom fields

The custom fields will include article_teaser_text to serve as a custom-written teaser which will be displayed only in the context of teaser views of the content but not on the full article, and article_subtitle, which is a sub-title about the article that will only be shown on the full version of the page but not in the teaser. You can of course add as many additional fields as you need.

Adding field: article_teaser_text

  1. From the main Content types page, click the "add field" link to the right of your Article content type.
  2. For Field Name enter: article_teaser_text, and for Label enter: Article Teaser.
  3. For Field type, choose Text and press "Continue".
  4. On the following screen set the Widget type to Text field, and press "Continue".
    Note: if you prefer a multiple-line field with the possibility of adding HTML formatting with your WYSIWYG editor (e.g. FCKeditor or TinyMCE) to the text in your field, you can instead choose Text area (multiple rows). Keep in mind that with most WYSIWYG editors, setting a text field to be "multiple rows" usually activates the editor on that text area, which is probably excessive in this case (though your WYSIWYG settings page may allow you to selectively disable these). Generally for a small text field of this sort I don't recommend HTML, and especially not WYSIWYG. If you change your mind you can always adjust this setting later.
  5. In the "Global settings" fieldset, check the Required option, and enter a number for Maximum length such as 100 (it's usually ideal to set a maximum number of characters for the teaser to ensure it fits within the area you allot to teasers in your theme, and to enforce keeping teasers short and to the point for your readers). It's worth noting that Maximum length can only apply to a Text field kind of field -- the HTML textarea tag that the Text area (multiple rows) option creates is not capable of having a maximum length set (which is a limitation of HTML itself, not Drupal - you can however impose a maximum length on this tag using JavaScript).
  6. If you want to be able to use HTML formatting in your teaser (with or without a WYSIWYG editor installed), change the Text processing option to Filtered HTML (again not recommended, as the HTML counts towards the character limit, not to mention the purpose here is just a short bit of teaser text so ideally it should be kept simple... save the fancy stuff for the full article).
  7. Press the "Save field settings" button to complete the addition of your custom field.

Adding field: article_subtitle

  1. Since you are still editing the Article content type, click the "Add field" link at the top of the page to begin adding the next field.
  2. For Field Name enter article_subtitle, and for Label enter Article Subtitle.
  3. For Field type, choose Text and press "Continue".
  4. On the resulting screen set the Widget type to Text field, and press "Continue".
  5. If you wish to always require a Subtitle, then click the Required option, but you can choose to make this optional if you prefer.
  6. As with the first field you added, follow the same guidelines above regarding Text processing and Maximum length, and then press the "Save field settings" button.
  7. Lastly, the 2 custom fields are most likely not in their correct order at this point, so grab the arrow icon next to the fields to drag them to the position you prefer and press the "Save" button.
    Note: the positioning here is only important regarding how you wish the content entry fields to appear while you're creating new Article content. The order/placement in which they are shown on the page for site visitors can be completely different and is easily controlled in your theme, which we'll get to a bit later.

Setting up how the fields "Display" (on the full page)

  1. Click on the "Display fields" link at the top of the page (if your content type is named "Article" as in this guide, this will take you to admin/content/node-type/article/display).
  2. For Article Subtitle, set Label to Hidden, Teaser to Hidden, and leave Full Node set to Default.
  3. For Article Teaser, set all options to Hidden (the reason for this is because this field will "only" ever be used within the context of Views module, which will call it up in its own way, so we want to hide it in every other case).
  4. Press the "Save" button.

Configure Pathauto and Custom Breadcrumbs

Understanding Drupal Paths

Before continuing, it will help you to understand a bit about "how" URL paths in Drupal work, and how that applies to what you're trying to accomplish in following this gude. The terms URL, path, and alias are often used interchangeably in Drupal.

Our goal in this guide is to set up URL paths like this:
example.com/articles
This will be for the index/listing of all the articles, and will be handled by the Views module, covered in a later section of this guide.

example.com/articles/name-of-article
This is the path for the pages (nodes) created for the "Article" Content type. Nodes receive their URL paths through the Path or Pathauto module. Path is a module that comes with Drupal by default and lets you manually make up URLs for pages as you create them, while Pathauto is an add-on module which automates this process, following pre-determined settings which you customize ahead of time before creating the content. In this lesson the Pathauto module will be used.

Although they appear "connected" (similar to how files are placed inside a folder), the example.com/articles path made by Views module and the example.com/articles/name-of-article paths for content are not actually connected to each other internally (however, so long as they're set up correctly, they will "appear" and function as if seamlessly connected to each other).

Think of it along the lines of the "files inside a folder" analogy. The files are the Article content/nodes you create, and the folder is the index or listing of those Articles (articles/), which is created separately by the Views module. This isn't how it actually functions beneath the surface (files and folders), but should help you understand the structure of the URL path.

Customize your Paths with Pathauto

After you've created a Content Type (and before you create any content for it), the first stop you should make is Pathauto. In Drupal 6, the settings for Pathauto have been joined into the URL aliases setting page, and are located at Administer > Site building > URL aliases > Automated alias settings (admin/build/path/pathauto). In Drupal 5, Pathauto's settings can be found at Administer > Site configuration > Pathauto
(admin/settings/pathauto).

In case you're wondering why it's best to set up Pathauto "before" making content, it's because the creation of content adds a URL alias to Drupal - if you haven't customized how the alias should be set up, Drupal (or Pathauto if installed) uses the default settings (e.g. Drupal makes node/# and if Pathauto is installed, it instead makes content/page-title). Once an alias is made, it has to be deleted in order for Pathauto to "remake" it the way you prefer.

Note: In case you do have pre-existing URL aliases which were made before installing Pathauto and/or before reading this, then it's simple to clear the old ones out and automatically generate the new customized ones. If you do not have "custom" aliases that you wish to keep (e.g. written by hand), you can simply click on the "Delete aliases" link at the top of the URL aliases page (admin/build/path/delete_bulk). From here you can check the content checkbox and press the "Delete aliases now!" button. Don't worry - in the next step with Pathauto you'll be able to regenerate aliases for every page on the site, according to your exact settings, with the click of a button. If you happen to have hand-written custom URL aliases and can't delete them all like this, consider switching to allow Pathauto to handle all of your paths to make things easier for yourself - if not you can still delete aliases on a case by case basis from the List view of "URL aliases".

Set up the URL path for Article pages

  1. Head over to Administer > Site building > URL aliases > Automated alias settings (admin/build/path/pathauto).
  2. First, expand the "Strings to Remove" fieldset. These are words that Pathauto will skip when making URLs for your pages. Add or remove any words you prefer to this list, or if you'd like, simply delete the whole list (which is my recommendation, since I prefer paths to "make sense" to people who see them, and removing these words makes them less legible/memorable).
  3. Next expand the "Node path settings" fieldset, which is where the path settings for all Content Types (besides Blog, which is a special case) are found. Locate the Pattern for all Article paths field and enter articles/[title-raw]

    Note: This is where what was explained earlier on this page in "Understanding Drupal Paths" comes into play - the articles/ part of the path here is just a placeholder for the View, making the article both appear and function as if it were "within" the articles/ listing page ("folder"). In this way, the paths will also behave logically the way a site visitor would expect them to (like files inside a folder), allowing them to remove the end of an article's path and arrive at the index/listing of all the articles.

  4. If you'd like to adjust the settings for Default path pattern and any other Content Types while you are on the settings page, feel free to do so now. You can expand the "Replacement patterns" fieldset to see all of the Tokens available for you to include.
  5. Check the Bulk generate aliases for nodes that are not aliased option.
  6. Scroll to the bottom of the page and click the "Save configuration" button. If there were any aliases to generate for pre-existing content, then a message will appear near the top of the following screen to inform you.

Since Path and Pathauto module create "aliases" to content on your site, the original paths to those pages such as node/2 still exist as well (an alias is just a "mask" of sorts that covers up the original URL with a more friendly one. If you are concerned about possible penalties from search engines due to duplicate content (e.g. two different URLs with the same content) then you should install the Global Redirect module. What it does is ensures that all other URLs that lead to a piece of content get forwarded to your friendly Pathauto URLs.

Set up Custom Breadcrumbs

Breadcrumbs are a valuable and well-understood way to improve navigation on a website. Breadcrumbs allow you to "leave a trail" from the page you are currently on (e.g. an Article), up the structure of your site and back to the home page. You can see an example of them in action on this site even (have a look at the top of the page below the logo).

If your theme has included them (as most do - if not, you should add <?php print $breadcrumb; ?> to your page.tpl.php file), Article content that you create will already show breadcrumbs. However by default they will show only as "Home" (which is not all that helpful). The Custom Breadcrumbs module will allow you to customize this so that a link to the "Articles" listing page will be included: "Home › Articles" (in both cases the Name of the Article is shown below as the page title/heading). The breadcrumbs are not limited to a single level either (if you have a reason to, you could include as many levels of links as you'd like).

  1. Begin by going to Administer > Site building > Custom Breadcrumbs > Add custom breadcrumb (admin/build/custom_breadcrumbs/add).
  2. Select Article from the Node type drop down menu.
  3. As with many settings/configuration forms in the Drupal administration section, if you have a WYSIWYG editor installed, depending on its settings it can potentially get in the way if it is loaded on the configuration page for Custom Breadcrumbs. If your WYSIWYG editor appears here, please disable it for this page before continuing (learn how to selectively disable your WYSIWYG editor).
  4. In the Titles field, enter Articles, and in the Paths field, enter articles. Leave the Breadcrumb visibility field empty. Press the "Submit" button to proceed.

Create an Article

Now that the Content Type is complete, you should now go ahead and create one or more pages of Article content to use for testing throughout the remainder of this gude (they can just be fake/test pages for now). Go to Create Content > Article, fill in all of the fields, and "Save" the content.

After saving the Article, you'll notice that:

  1. As expected from the "Display fields" settings earlier in CCK, the Article Teaser does not display on the page, while the Article Subtitle does display.
  2. The URL path to the article is example.com/articles/name-of-article as you set up with the Pathauto module.
  3. Custom breadcrumbs have appeared near the top of the page: "Home › Articles" (and the Name of the Article is shown below as the page title/heading). For the moment, the "Articles" link in the breadcrumbs does not work - that will automatically begin working after completing the next section of this guide, Using Views module to create a "listing" of Articles.

Later in the guide you'll learn how to theme these Article pages to look exactly the way you want them to.