HowTo: Add a Subheadline field to your content types
Newspaper articles usually start with a headline that indicates the nature of the article below it; because of space constraints, it is often written in Headlinese, giving a compact summary of what the article is about. Thus, the so called news hed is often complemented with a subheadline that contains further details, a quotation, or a source.
Drupal Core requires a title for every node; while it is possible to suppress the body field, Drupal Core does not allow to add a Subheadline ("subtitle"). This HowTo aims to guide you through the steps to add a newspaper-like subheadline to your content types.
Requirements
- Installed Modules: Content Construction Kit (CCK)
- Access to Drupal's theme folder
Step 1: Preferably, you should test this HowTo on a development server. If you're working with a live installation: Make a backup of your Drupal installation, including files and database. That's the only way to cleanly undo your changes if something goes wrong, or you don't like the newly added subtitles. Read the manual pages about modifications to your theme, add a new sub-theme if you haven't done already. Don't work directly on a Drupal core or a contributed theme as this will break the update functionality. Please read this HowTo before implementing it so you can decide if it offers exacty what you need!
Step 2: Inside the Adminstration area of your Drupal installation, go to admin/content/types. Choose a content type and create a textfield via CCK called "subheadline" (local task "Add Field"). The CCK field will have the label "subheadline" and the computer-readable name "field_subheadline". If the modified content type is named "article", this will happen on admin/content/types/article/fields. Position the newly created field directly below the "title" field from Drupal core in the input form (local task "Display fields", usually weight "-4").
Step 3: You are going to work on your theme, so go to the "Performance" setting (admin/settings/performance) and disable temporarily all caching and performance optimizations. Make a notice how the settings were configured so you remember it later.
Step 4: Leave the administrative interface of Drupal and dive into the file system. This might - depending on your setup - require to open a SSH connection to your server, or to start an application like the "Explorer" on a Windows system or the "Finder" on a Mac OS machine. If set up properly, you will find your theme's files at path/to/drupal/sites/all/themes/your-theme. On Debian GNU/Linux, this path migh look something like /var/www/drupal/sites/all/themes/slash (if your theme is named "slash" and your Drupal installation resides in the directory "drupal").
Step 5: Copy the example files from /sites/all/modules/cck/theme to your theme folder. You will find the files "field-field_my_field.tpl.php", "field.tpl.php", and "template.php". That enables you to theme all CCK fields through "field.tpl.php"; for theming exactly one CCK field - e.g. our newly created "field_subheadline", make a copy of "field-field_my_field.tpl.php" and rename it to "field-field_subheadline.tpl.php".
Step 6: Start theming "field_subheadline" by editing "field-field_subheadline.tpl.php" as follows:
<div class="subheadline">
<?php foreach ($items as $item) {
print $item['view'] ?><br/>
<?php } ?>
</div>Step 7: Make a decision where the subheadline is supposed to appear in your node, and how you want it to look and behave. The following example is just a suggestion that applies to the "Slash" theme; for your theme, you might need different styling.
Step 7a: If you made up your mind, start styling; open common.css and add a class like:
.node .subheadline {
background: transparent;
color: #fff;
font-size: 1.1em;
font-weight: bold;
font-style: italic;
margin: 0;
padding: 2px 10px 2px 10px;
}Step 7b: Open style.css and add a class like:
.node .subheadline {
background: #660000;
display: none;
}So far, we created a new CCK field for the subheadline, told Drupal to consider theming this field, and added styles to our CSS stylesheets. However, the "subheadline" field shows up in the node's body. Since it's white on white background, it will be invisible to the human eye. That we're going to change now:
Step 7c:
Alternative 1: Add the field to your general node template, e.g. "node.tpl.php". That means, that this template is applied to all content types that don't have a more specific node template.
The two lines below the "print $title" statements tell the template engine to display "field_subheadline" directly below the node's title, using the above defined styles.
<?php if ($page == 0): ?>
<h1 class="title"><a href="<?php print $node_url ?>"><?php print $title ?></a></h1>
<h1 class="subheadline"><?php print content_format('field_subheadline', $field_subheadline[0]); ?></h1>
<?php else: ?>
<h1 class="title"><?php print $title ?></h1>
<h1 class="subheadline"><?php print content_format('field_subheadline', $field_subheadline[0]); ?></h1>
<?php endif; ?>Alternative 2: Add the field to a specific node template, e.g. "node-article.tpl.php". That means, that this template is applied to exactly one node type which is handled by this node template. However, it's exactly the same code as above - but you gain the possibility to make specific modifications to this content type.
<?php if ($page == 0): ?>
<h1 class="title"><a href="<?php print $node_url ?>"><?php print $title ?></a></h1>
<h1 class="subheadline"><?php print content_format('field_subheadline', $field_subheadline[0]); ?></h1>
<?php else: ?>
<h1 class="title"><?php print $title ?></h1>
<h1 class="subheadline"><?php print content_format('field_subheadline', $field_subheadline[0]); ?></h1>
<?php endif; ?>The downside of thes approach is that all CCK fields are still rendered in the node's body; because of the styling instructions in "field-field_subheadline.tpl.php", it is pretty invisible, but it might take up screenspace and might mess up the page layout.
Step 8b (optional): David posted an article about Theming the full Article pages (nodes) that suggests a possible solution: Open "node-article.tpl.php", locate
<?php
print $content
?><?php print $node->content['body']['#value'] ?>That instructs Drupal to handle CCK fields and other additions to your node type (like images added through the "image" module) differently; instead of displaying everything unless you tell them not to, now Drupal will be only display something if you tell it to do so. Now you will have to theme everything inside your node's body, but you won't have a duplicate subheadline.
Step 8b (optional): Another option might be to turn off the display for the "subheadline" field by setting the options on the display fields page to hidden (Local task "Display fields" for the content type, e.g. admin/content/types/article/display). As Alex Pott points out, this might prevent Drupal to index the "subheadline" field since turning off the display for the "subheadline" field bypasses the node view hook. As it seems, currently there is no cleaner or simpler solution; however, it might be possible to add some code to template.php that does the trick.
Step 9: Visit the "Performance" settings again (admin/settings/performance) and enable the caching and performance optimizations that were selected before.