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.

Set up 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.

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.

Set up the "Articles" View

The next step is to set up a new View using Views module, to generate a list of the latest Articles, making use of the fields that were set up in the Article content type. Of course, Views module can export/import Views, but going through the full process below will help you learn how Views works so you will be able to work with it and create your own custom Views.

Initial setup/configuration of your “Articles” View

1. Go to Administer > Site Building > Views (admin/build/views) and click “Add” at the top.
2. For View name enter: articles. Optionally add a short View description for your own reference, and a View tag of article to help you find the View in the future. Leave View type set to Node. Press “Next” to continue.

Configure the “Default” settings

Views version 2 now offers the ability to define multiple “Displays” for a single View, each of which can present the same View in a different way.

The first thing to do when creating a new View is to set up the Defaults configuration. The options you set for Defaults apply to all other custom Displays you create later. However, all of the options set for Defaults can be overridden with your own custom settings by each Display. This saves you time by defining some or all of the settings that will be shared by every Display.

Views configuration for “Defaults”: Basic settings

1. Begin by clicking the link for Basic settings > Title, and in the field that dynamically appears, enter Articles. Press the “Update” button to save the new setting.
2. Next click the link for Basic settings > Use pager, select the Full pager option, and press the “Update” button.

Views configuration for “Defaults”: Fields

1. Next, on the Fields configuration block, press the + icon to bring up the option to begin adding new Fields to the View. Scroll down the list and add a check for the following items:
   • Content: Text: Article Teaser (field_article_teaser_text)
   • Node: Post date
   • Node: Title
   • Note: Add only the above fields… you may notice a field called “Node: Teaser” but that is not the one you need to add. Also be sure not to add the other custom field that you created earlier, field_article_subtitle, since it is not needed in the View.
2. Click the “Add” button and you will then be presented with a sequence of configuration screens (one after the next) allowing you to customize the settings for each individual field you just added. After configuring each field, press the “Update” button to proceed to the next field’s configuration:
   • For Content: Text: Article Teaser change the Label option to None.
   • For Node: Post date delete the text from the Label field so that it is blank and adjust the Date format option if you wish to. For instance, if you’d like the date displayed similar to July 4, 2008 (leaving out the time of day), set the Date format to Custom and enter the Custom date format as F jS, Y.
   • For Node: Title delete the text from the Label field so that it is blank and check the Link this field to its node option.
3. Again on the Fields configuration block, click the up/down arrow icon, which allows you to rearrange the order of the fields. Simply drag the fields into the correct order (e.g. Title, Post date, and Article Teaser), and press “Update”.

Views configuration for “Defaults”: Sort criteria

1. Click the + icon in the Sort criteria configuration block. Scroll down the list and add the Node: Post date item. In the following screen choose Descending for the Sort order and press the “Update” button.

Views configuration for “Defaults”: Filters

1. Click the + icon in the Filters configuration block. Scroll down the list and add the following filters:
   • Node: Published
   • Node: Type
2. Click the “Add” button and customize the settings for each field. After configuring each field, press the “Update” button to proceed to the next field’s configuration:
   • For Node: Published check Published (which ensures only content that is marked as Published will be shown).
   • For Node: Type put a check next to Article under “Node type”.

Create the “Page” Display

You will be creating two custom Displays: the first, a “Page” Display, which will be a full-size listing of the articles, and a second “Block” Display, which will be a small sub-listing of article teasers which will be placed in the sidebar of the site (or on your home page). So let’s begin first with the “Page” Display:

1. Near the top left, with the dropdown menu set to Page, click on the “Add Display” button. A new tab with the name “Page” will appear below the Default Display.

Views configuration for “Page”: Basic settings

1. Since you can have as many different Displays as you want, it’s a good habit to always add a custom name to each Display you make so that you can keep them organized (these names are for your own reference and are not displayed publicly). Begin by clicking the link for Basic settings > Name, and in the field that dynamically appears, change the name to Page: Articles. Press the “Update” button, and then press the “Save” button at the bottom of the Views interface to save the View - you should now see that the Page Display is now named Page: Articles (Display name changes aren’t updated until you save the View). Click on the new Page: Articles tab to make it the active tab again.

Views configuration for “Page”: Page settings

1. Click the link for Page settings > Path, and enter the URL you want the full article listing page to have (e.g. enter articles if you want the URL to be example.com/articles). Press the “Update” button.
2. Optional step:
   If you’d like to add the Articles page to your site’s menu, click the link for Page settings > Menu. Select the Normal menu entry option, enter the menu item title in the field (e.g. Articles), and press the “Update” button. Menu items generated by Views modules appear by default in Drupal’s Navigation menu. You can adjust this (e.g. to move it to your Primary Links menu) though you MUST first save your View before navigating away from it. Go to Administer > Site building > Menus > Navigation (admin/build/menu-customize/navigation), locate the name of your menu item, click edit, and choose the Primary links menu under the “Parent item” option.

Create the “Block” Display

Now you’ll create the second Display, this time as a “Block” type, which will be a small sub-listing of article teasers which will be placed in the sidebar of the site (or on your home page):

1. Near the top left of the page, change the dropdown menu setting to Block, and click on the “Add Display” button. A new tab with the name “Block” will appear below the Default and Page: Articles Displays.

Views configuration for “Block”: Basic settings

1. Again, it’s wise to give every Display a unique name. Click the link for Basic settings > Name, and in the field that dynamically appears, change the name to Block: Articles. Press the “Update” button, and then press the “Save” button at the bottom of the Views interface to save the View. Click on the new Block: Articles tab to make it the active tab again.
2. Click the link for Basic settings > More link, and click on the “Override” button, which makes this setting apply to this Display only and none of the others (if you intend to Override a setting, always click the “Override” button immediately before you make any changes to the settings). Check the option for Create more link, and press the “Update” button.

   Note: Since the “More link” option only applies to Block Displays, you could turn this setting on in the Defaults Display - however it’s included in this way here as at least one example of using the Override feature of Views Displays. You can use this feature to do all kinds of interesting things within a single View, including adding specific fields, filters, and arguments to one Display of the View, and completely different ones to a different Display (thereby creating a separate Display that is based on the same underlying Default values, but otherwise an entirely different View).

Your View is now complete

The View and its Displays are now complete. However, you can return to edit and adjust the View at any time.

Ensure that you click the “Save” button for the View (make sure you see the “The view has been saved” message at the top of the screen). Pay a visit to http://www.example.com/articles to see the output of the Page: Articles Display you’ve created.

When you’re ready proceed to the next section of the guide, where you will activate the Block: Articles Display to be used in the sidebar of your site.

Enable the new "Articles" block

The Block: Articles Display you just created has now become automatically available to the rest of Drupal as a “Block” at Administer > Site building > Blocks (admin/build/block).

1. Go to the Blocks administration page and locate articles in the list of “Disabled” blocks (until you enable them, Blocks are disabled by default).
2. Click on the Region drop down menu to the right of articles, and choose one of your theme’s available Regions (for instance, Right sidebar). The articles block will immediately move out of the Disabled category and up into the Right sidebar category higher up on the page. You can adjust its position relative to the other blocks in that Region using the move icon at the far left.
3. Scroll to the bottom of the page and press the “Save blocks” button. The new Views-generated Block should now appear in the Region you selected.

More info to add…
- You are not limited to only the blocks that are pre-defined for your theme.
- Short mention of the possibility of adding blocks to your front page (and link to article on making front pages).

Theming Views

Until I get a chance to finish this page, this post I made on drupal.org should provide a little help:
http://drupal.org/node/299406#comment-978324

Theming the full Article pages (nodes)

While the page.tpl.php file of your theme is the “highest level” template which controls the layout of your site overall and by default is consistent through all the pages of your site, there are a number of more specific template files that control how sub-elements of pages are themed “within” page.tpl.php, such as the different content that appears on each page throughout the site. The template file in your theme responsible for theming content is called node.tpl.php.

Creating a “custom” node.tpl.php template for Article content

This guide will use the Garland theme to present its examples, however feel free to follow along with your own theme if you prefer.

One of the great features of Drupal’s flexible theming system is the ability to create separate “versions” of templates to affect only a specific Content Type. Since the goal is to theme the “Article” pages in a way that may be completely different than other types of pages on the site, this is definitely a useful feature.

1. To accomplish this, simply browse to your theme’s directory… in the example this is themes/Garland (if you’re using your own theme it would likely be in sites/all/themes/yourtheme).
2. Locate the node.tpl.php file, and make a copy of it, renaming the copy to node-article.tpl.php

   Note: you can create a custom template in this way for any Content Type you’ve created. Simply copy the node.tpl.php file and rename it, adding -content_type_name after the word node in the file name. For Content Type names consisting of multiple words, separate each word with an underscore.

3. Add a little bit of sample text anywhere in your new custom template, save it, and visit an Article page - Drupal sees the new template immediately and uses it instead of the default template for your Article content (you should see your sample text appear). After confirming the functionality of the new template file, remove the sample text. If you’ve performed the steps correctly but the sample text is not showing, try going to Administer > Site configuration > Performance (admin/settings/performance) and clicking the “Clear cached data” button to clear the Theme Registry.

Custom theming for node-article.tpl.php

Here is a before and after screenshot to illustrate how an Article page looks right now “out of the box”, as well as how it will look after completing the customizations to the theme that will follow in this guide.
[insert screenshot image]

Open up the new node-article.tpl.php file you just created, and locate <?php print $content ?> in the code. This one PHP variable is what is responsible for displaying just about every field of the content on the page (the exception being the node’s Title field, which is usually displayed by the page.tpl.php template).
<?php print $content ?> displays a combination of the Body of the node, as well as all of your custom CCK fields.

Since the goal is to achieve more flexible control over the HTML of all the custom CCK fields in the Article Content Type, what needs to happen is for the $content variable to be broken up into each individual field, instead of combined all into one which you cannot control.

If you’d like, the Contemplate module can be a useful tool to help you “look inside” the $content variable, and pick and choose the code for the fields you want to copy and paste into your template file. If you’d prefer to use Contemplate, please see the guide on How to use Contemplate module.

However, it is often (and most likely) the case that using Contemplate for this purpose is unnecessary (and more unwieldy than it is worth). Simply copy the bits of code below, and you’ll be able to use them in future Content Type template files as well simply by changing the name of the field (in most cases). In any case, it doesn’t hurt to have Contemplate around for reference, in situations where certain types of fields use different code than below.

Adding individual/separate fields to node-article.tpl.php

Several short bits of code will be used to replace the $content variable, providing you with essentially the same output, only now with direct control over each field.

1. Begin by copying and pasting the following line into your node-article.tpl.php file, completely replacing the <?php print $content ?> line. This new line displays the content of the Body field (note that the code for displaying the Body field is a bit different than the code for displaying custom CCK fields):
   
   <?php print $node->content['body']['#value'] ?>
2. Next, add the Article Subtitle field (field_article_subtitle) to the page, right above the line that says <?php if ($submitted): ?> (note that a div tag has been added around the field_article_subtitle field, so that it will be easy to style with CSS later):
   
   <div id="article-subtitle">
  <?php print $node->field_article_subtitle[0]['view'] ?>
</div>
3. You can easily insert other custom CCK fields in the same way as in Step 2. Simply copy and paste the above code, and change the name of the field as appropriate (you need to always use the “machine-readable name” of the field, which can be found by going to Administer > Content management and clicking on the “manage fields” link in the Article row (Direct path to this page: admin/content/node-type/article/fields) — the field names to use are listed in the Name column. Every field automatically has the field_ prefix added before the custom part of the name which you chose when creating the field. Do not use the “Label” version of the field name.

   For instance, if you had a field in your Content Type called field_drupal_rules you would change field_article_subtitle instead to field_drupal_rules. This often works, though for some other field types you might need to use Contemplate to acquire the code (or Devel module can assist you with this as well if you prefer). Be sure to surround every field with a unique CSS ID or Class in a div or span tag, since that will make it much easier to add your own custom style/design to each field.

   If you need to add a CCK field that has “multiple values” (for example has the Number of values setting set to Unlimited or a number other than 1), you can use the following bit of code, customizing just the field name (feel free to customize or remove the div tag):

   <?php foreach ((array)$field_drupal_rules as $item) { ?>
  <div class="field-item"><?php print $item['view'] ?></div>
<?php } ?>

Customizing “Submitted by…”

There is a line in your node-article.tpl.php file which contains <?php print $submitted; ?>, which is what produces the “Submitted by…” line. By default, the line it creates looks something like this (how the date is formatted depends on the settings at admin/settings/date-time):
Submitted by Username on August 7, 2008 - 4:05pm

If your goal is simply to remove the “time of day” portion of the date (a common request), have a look at this excellent article which covers how to do that in both Drupal 5 and 6: No time of day in node date (scroll down to the line “To modify the medium-size format for dates…” above the first screenshot). In Drupal 6 it can be done with the Custom format setting under Medium date format, located at Administer > Site configuration > Date and time (admin/settings/date-time), while in Drupal 5 some copy/paste code into your theme is required.

If your goal involves more detailed customization of $submitted, then pasting in a bit of code is necessary.
If you’d like your $submitted line to read as: Posted August 3rd, 2008 by Username

Then replace <span class="submitted"><?php print $submitted; ?></span> with the below code:

With a tiny bit of understanding of a simple PHP feature called concatenating strings (the name of which sounds much more complicated than it really is), you can easily “rearrange” the various words and bits of code to however you need. The key to how it works is the period (.) which separates each part of the code.

In Drupal 6, the above method still works, but you can also accomplish this for every Content Type on your site overall in one step, by pasting the following into the template.php file of your theme (or changing the pre-existing function if your theme, such as Garland which is Drupal’s default theme, already has this function… since you cannot have the same function twice):

In the return t('Submitted by !username on @datetime', line, rearrange !username and @datetime however you prefer. You can also feel free to customize the date format by exchanging $node->created for $node->created, 'custom', "F jS, Y" (or any other custom date format).

If you’d like to remove the $submitted line altogether (in case you don’t want it included at all on the page), you can either simply delete the $submitted line from node-article.tpl.php or you can turn it off for the Article content type at admin/build/themes/settings under the “Display post information on” setting.