Blog
How to Make Optionally Hide Node Titles in Drupal (Using CCK)
| Wednesday, January 27, 2010
In the popular open-source content management system (CMS) Drupal, titles display on every page as part of the Content Management System's functionality. But what if you don't want to have the titles display on some pages? For example, if you want to use a banner instead of the plain title. There's an easy way to make Drupal's node titles optional using the Content Construction Kit (CCK) module.6.x
Presumably you already have Drupal installed if you're reading this. If not, check out Drupal. It's a powerful CMS that is has a great community of developers. Many sites from well-known companies are powered by Drupal. Even the White House's website is powered by Drupal!
What you'll need to get started:
- Drupal 6.x (something similar should work with 5.x, but I haven't tested it)
- Content Construction Kit (CCK) for Drupal 6.
- NOTE: Most of CCK's functionality has been moved to core in Drupal 7, so downloading the CCK module won't be necessary for Drupal 7 once it's released.
If you don't already have CCK installed, download and install it to your Drupal site now.
Step 1 — Finding content types settings
Once you've installed CCK, go to the "content types" section of Drupal admin (found at /admin/content/types).
Select "content types" in the Drupal admin panel.
Step 2 — Managing a content type's fields
Select "manage fields" for the content type you wish to edit.
Select "manage fields" for the content type you wish to edit.
Step 3 — Adding a new field
Add a new field to the content type. To do this drag the "new field" row to the position you want and fill in the field information. You'll probably want to drag your new field to right below the title field. You can use whatever label and field name you want, but we use "Title hide" and "titlehide" and we'll refer back to this later. The type should be set to "text" and the form element should be set to "Single on/off checkbox." This field will be used to specify if you want the node's title to be displayed or hidden. Once you're done, click "save."
Add the field that will be used to specify whether or not to hide the title.
Step 4 — Defining field's allowed values
After you press save, you'll be brought to a new page where you can specify more detailed settings for the field. Here you need only change one setting: the "allowed values list." Enter "display|Display Title" on the first line and "hide|Hide Title" on the second line. These values will be referred to later. Once you've entered this, scroll down to the bottom of the page and save the field settings.
Complete the allowed values list as it is above.
Once you save, you'll see your new field along with the others.
Your content type's fields, including the new field you just created
Step 5 — Hiding the new field
Because this field will be used internally to hide or show the title of a page, you don't want this field to display in the node view. To hide the display of this field in the node view, click on the "display fields" tab. Once the display fields settings have loaded, change the label, teaser, and full node display to "
The display fields settings.
Step 5 — Grab a cup of coffee (tea?)... you're almost done
Awesome — you're "title hide" field is all set up (but you're not done yet)! If you go to add a new node of that content type, you'll see you can now tick the box to hide the title.
You'll now see the title hide option when you add or edit nodes of that content type.
Step 6 — Bring the field to life
In order to make your new title hide field useful, you need to build it into your theme. To do this, I added some PHP code that will insert the value of the field as a CSS class of the title.
Step 7 — Identify the theme file that displays the node's title on the page
Identify the theme file that displays the node's title on the page. For most themes the theme file that is responsible for displaying the title is called page.tpl.php.
Step 8 — Find the PHP code that displays the page's title
Locate the PHP code that displays the title:
<?php print $title; ?>
It may be surrounded by additional related HTML and PHP that define layout, styles, or in which cases the title should load:
<?php if ($title): ?>
<div id="title"><h1><?php print $title; ?></h1></div>
<?php endif; ?>
Step 9 — Insert your title hide field as a class of the title's H1 tag
Insert your title hide field as a class of the H1 tag. This will look something like this (with the addition in bold):
<?php if ($title): ?>
<div id="title"><h1 class="title <?php if(!empty($node->field_titlehide[0]['value'])) {$titlehide = $node->field_titlehide[0]['value']; print $titlehide;} ?>"><?php print $title; ?></h1></div>
<?php endif; ?>
Step 10 — Finito
Congratulations! You now have optional Drupal node titles.
SU!Subscribe
Search
Search our Blog:
Addoa on Twitter
Addoa Excellence
We know your vision is important to you. That's why our vision is to help you share yours. When you use Addoa for your creative needs, you'll see the difference excellence makes on your project. Our superior quality, strong communication, attitude and unbeatable value make Addoa the right choice for any project.
Free project estimates anytime
Comments
I read your post about "How to Make Optionally Hide Node Titles in Drupal (Using CCK)" and I evaluated it very interesting but unfortunately it don't work for me.
I have made all the change in drupal and i think that the problem is in my page.tpl.php.
Can you see my code (if i understand where is the problem i can share your metod with italian drupal community)
This is the code of my page.tpl.php (from personalised genesis theme):
TKS PGF
<?php
// $Id: page.tpl.php,v 1.1.2.19 2009/06/12 15:44:26 jmburnz Exp $
/**
* @file page.tpl.php
* Theme implementation to display a single Drupal page for Genesis Subtheme.
*
* Available variables:
*
* General utility variables:
* - $base_path: The base URL path of the Drupal installation. At the very
* least, this will always default to /.
* - $css: An array of CSS files for the current page.
* - $directory: The directory the theme is located in, e.g. themes/garland or
* themes/garland/minelli.
* - $is_front: TRUE if the current page is the front page. Used to toggle the mission statement.
* - $logged_in: TRUE if the user is registered and signed in.
* - $is_admin: TRUE if the user has permission to access administration pages.
*
* Page metadata:
* - $language: (object) The language the site is being displayed in.
* $language->language contains its textual representation.
* $language->dir contains the language direction. It will either be 'ltr' or 'rtl'.
* - $head: Markup for the HEAD section (including meta tags, keyword tags, and
* so on).
* - $head_title: A modified version of the page title, for use in the TITLE tag.
* - $styles: Style tags necessary to import all CSS files for the page.
* - $scripts: Script tags necessary to load the JavaScript files and settings
* for the page.
* - $section_class: A CSS class that uses .section + the 1st URL argument, allows for
* themeing site sections based on path.
* - $classes: A set of CSS classes (preprocess $body_classes + Genesis custom classes).
* This contains flags indicating the current layout (multiple columns, single column),
* the current path, whether the user is logged in, and so on.
*
* Site identity:
* - $front_page: The URL of the front page. Use this instead of $base_path,
* when linking to the front page. This includes the language domain or prefix.
* - $site_logo: The preprocessed $logo varaible. Includes the path to the logo image,
* as defined in theme configuration and wrapped in an anchor linking to the homepage.
* - $site_name: The name of the site (preprocessed) wrapped in an anchor linking to the homepage.
* Empty when display has been disabled in theme settings.
* - $site_slogan: The slogan of the site, empty when display has been disabled
* in theme settings.
* - $mission: The text of the site mission, empty when display has been disabled
* in theme settings.
*
* Navigation:
* - $primary_menu: The preprocessed $primary_links (array), an array containing primary
* navigation links for the site, if they have been configured.
* - $secondary_menu: The preprocessed $secondary_links (array), an array containing secondary
* navigation links for the site, if they have been configured.
* - $search_box: HTML to display the search box, empty if search has been disabled.
*
* Page content (in order of occurrance in the default page.tpl.php):
* - $leaderboard: Custom region for displaying content at the top of the page, useful
* for displaying a banner.
* - $header: The header blocks region for display content in the header.
* - $secondary_content: Full width custom region for displaying content between the header
* and the main content columns.
* - $breadcrumb: The breadcrumb trail for the current page.
* - $content_top: A custom region for displaying content above the main content.
* - $title: The page title, for use in the actual HTML content.
* - $help: Dynamic help text, mostly for admin pages.
* - $messages: HTML for status and error messages. Should be displayed prominently.
* - $tabs: Tabs linking to any sub-pages beneath the current page (e.g., the view
* and edit tabs when displaying a node).
* - $content: The main content of the current Drupal page.
* - $content_bottom: A custom region for displaying content above the main content.
* - $left: Region for the left sidebar.
* - $right: Region for the right sidebar.
* - $tertiary_content: Full width custom region for displaying content between main content
* columns and the footer.
*
* Footer/closing data:
* - $footer : The footer region.
* - $footer_message: The footer message as defined in the admin settings.
* - $feed_icons: A string of all feed icons for the current page.
* - $closure: Final closing markup from any modules that have altered the page.
* This variable should always be output last, after all other dynamic content.
*
* @see template_preprocess()
* @see template_preprocess_page()
* @see genesis_preprocess_page()
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/formattafont.css" />
<link type="text/css" rel="stylesheet" media="print" href="/sites/all/themes/genesis_miotema/css/print.css" />
</head>
<?php
/**
* Change the body id selector to your preferred layout, e.g body id="genesis-1a".
* @see layout.css
*/
?>
<body id="genesis-1b" <?php print $section_class; ?>>
<!--inizio salta menu-->
<div class="nascosto">
<strong>Drupal 6 navigazione veloce</strong>. <br />
<a href="#menu1">menu principale</a> |
<a href="#colsinistra">colonna di navigazione a sinistra</a> |
<a href="#contenuto1" >contenuto principale</a> |
<a href="#coldx">colonna di navigazione a destra</a> |
<a href="#sotto">piè di pagina</a>
<hr />
</div>
<!-- fine salta menu -->
<!--<div id="skip-nav">
<a href="#main-content"><?php print t('Skip to main content'); ?></a>
</div>-->
<?php if ($leaderboard): ?>
<div id="leaderboard" class="section region"><div class="region-inner">
<?php print $leaderboard; ?>
</div></div> <!-- /leaderboard -->
<?php endif; ?>
<div id="container" class="<?php print $classes; ?>">
<div id="header" class="clear-block">
<?php if ($site_logo or $site_name or $site_slogan): ?>
<div id="branding">
<?php if ($site_logo): ?>
<div id="logo"><?php print $site_logo; ?></div>
<?php endif; ?>
<?php if ($site_name): ?>
<?php if ($title): ?>
<h1 id="site-name"><strong><?php print $site_name; ?></strong></h1>
<?php else: /* Use h1 when the page title is empty */ ?>
<h1 id="site-name"><?php print $site_name; ?></h1>
<?php endif; ?>
<?php endif; ?>
<div id="indirizzo"><h2><span style="color: #726e32;font-family:font-family:Arial,Helvetica,sans-serif;font-weight:bold;"> <br>Residenze<br/>di classe<br/>a Firenze<br />
<br /></span></h2>
</div>
<?php if ($site_slogan): ?>
<div id="site-slogan"><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /branding -->
<?php endif; ?>
<?php if ($search_box): ?>
<div id="search-box"><?php print $search_box; ?></div> <!-- /search box -->
<?php endif; ?>
<?php if ($header): ?>
<div id="header-blocks" class="section region"><div class="region-inner">
<?php print $header; ?>
</div></div> <!-- /header-blocks -->
<?php endif; ?>
</div> <!-- /header -->
<!--inizio menu1 nascosto-->
<div class="nascosto">
<hr />
<strong><a name="menu1" id="menu1"></a>menu principale</strong>
<hr />
</div>
<!-- fine menu1 nascosto -->
<?php if ($primary_menu or $secondary_menu): ?>
<div id="nav" class="clear-block">
<?php if ($primary_menu): ?>
<div id="primary"><?php print $primary_menu; ?></div>
<?php endif; ?>
<?php if ($secondary_menu): ?>
<div id="secondary"><?php print $secondary_menu; ?></div>
<?php endif; ?>
</div> <!-- /nav -->
<?php endif; ?>
<!-- contenuto nascosto-->
<div class="nascosto">
<hr />
<strong><a name="contenuto1" id="contenuto1"></a>contenuto principale</strong>
<hr />
</div>
<!-- fine contenuto nascosto -->
<?php if ($secondary_content): ?>
<div id="secondary-content" class="section region"><div class="region-inner">
<?php print $secondary_content; ?>
</div></div> <!-- /secondary-content -->
<?php endif; ?>
<div id="columns"><div class="columns-inner clear-block">
<div id="content-column"><div class="content-inner">
<?php if ($mission): ?>
<div id="mission"><?php print $mission; ?></div> <!-- /mission -->
<?php endif; ?>
<?php if ($breadcrumb): ?>
<div id="breadcrumb" class="nav"><?php print $breadcrumb; ?></div> <!-- /breadcrumb -->
<?php endif; ?>
<?php if ($content_top): ?>
<div id="content-top" class="section region"><?php print $content_top; ?></div> <!-- /content-top -->
<?php endif; ?>
<!--// Two column Gpanel //-->
<?php if ($two_col_first or $two_col_second): ?>
<div class="two-col-50 gpanel clear-block">
<div class="section region col-1 first"><div class="inner">
<?php if ($two_col_first): print $two_col_first; endif; ?>
</div></div>
<div class="section region col-2 last"><div class="inner">
<?php if ($two_col_second): print $two_col_second; endif; ?>
</div></div>
</div>
<?php endif; ?>
<!--/end Gpanel-->
<div id="main-content">
<?php if ($title): ?><div id="title"><h1 class="title <?php if(!empty($node->field_titlehide[0]['value'])) {$titlehide = $node->field_titlehide[0]['value']; print $titlehide;} ?>"><?php print $title; ?></h1></div><?php endif; ?>
<?php if ($tabs): ?>
<div class="local-tasks"><div class="clear-block">
<?php print $tabs; ?>
</div></div>
<?php endif; ?>
<?php if ($messages): print $messages; endif; ?>
<?php if ($help): print $help; endif; ?>
<div id="content" class="section region">
<?php print $content; ?>
</div>
</div> <!-- /main-content -->
<!--// Three column Gpanel //-->
<?php if ($three_col_first or $three_col_second or $three_col_third): ?>
<div class="three-col-33 gpanel clear-block">
<div class="section region col-1 first"><div class="inner">
<?php if ($three_col_first): print $three_col_first; endif; ?>
</div></div>
<div class="section region col-2"><div class="inner">
<?php if ($three_col_second): print $three_col_second; endif; ?>
</div></div>
<div class="section region col-3 last"><div class="inner">
<?php if ($three_col_third): print $three_col_third; endif; ?>
</div></div>
</div>
<?php endif; ?>
<!--/end Gpanel-->
<?php if ($content_bottom): ?>
<div id="content-bottom" class="section region"><?php print $content_bottom; ?></div> <!-- /content-bottom -->
<?php endif; ?>
</div></div> <!-- /content-column -->
<!-- colonna sinistra nascosta -->
<div class="nascosto">
<hr />
<strong><a name="colsinistra" id="colsinistra"></a>colonna sinistra</strong>
<hr />
</div>
<!-- fine colonna sinistra nascosta -->
<?php if ($left): ?>
<div id="sidebar-left" class="section sidebar region"><div class="sidebar-inner">
<?php print $left; ?>
</div></div> <!-- /sidebar-left -->
<?php endif; ?>
<!-- colonna destra nascosta -->
<div class="nascosto">
<hr />
<strong><a name="coldx" id="coldx"></a>colonna destra</strong>
<hr />
</div>
<!-- fine colonna destra nascosta -->
<?php if ($right): ?>
<div id="sidebar-right" class="section sidebar region"><div class="sidebar-inner">
<?php print $right; ?>
</div></div> <!-- /sidebar-right -->
<?php endif; ?>
</div></div> <!-- /columns -->
<?php if ($tertiary_content): ?>
<div id="tertiary-content" class="section region clear-block"><div class="region-inner">
<?php print $tertiary_content; ?>
</div></div> <!-- /tertiary-content -->
<?php endif; ?>
<!-- pie di pagina nascosto -->
<div class="nascosto">
<hr />
<strong><a name="sotto" id="sotto"></a>piè di pagina</strong>
<hr />
</div>
<!-- fine pie di pagina nascosto -->
<?php if ($footer or $footer_message): ?>
<div id="foot-wrapper" class="clear-block">
<?php if ($footer_message or $feed_icons): ?>
<div id="footer-message"><?php print $footer_message; ?><?php print $feed_icons; ?></div> <!-- /footer-message/feed-icon -->
<?php endif; ?>
</div> <!-- /footer-wraper -->
<?php endif; ?>
</div> <!-- /container -->
<?php if ($footer): ?>
<div id="footer" class="section region"><div class="region-inner">
<?php print $footer; ?>
</div></div> <!-- /footer -->
<?php endif; ?>
<?php print $closure ?>
</body>
</html>
My theme is a custom theme based off the Zen starter theme, although I don't see why it wouldn't work with your theme.
To make sure the proper CCK variable is available to the template, I recommend installing the Devel module. Once you install it, you can view all of the template variables that are loading (including CCK template variables). You'll be able to see the value of the CCK field you're using to switch the title hide on and off and then verify that the php code you're using is actually calling the variable to load.
Try this and let me know how it goes.
Thanks, that's awesome!
I've been scratching my head on this small problem for a while!
You're tute works just perfect.
One question however: my Title Hide field offers a third (and default) radio box saying "N/A". How do i get rid of it?
Thanks again!
Simon
I used the "Single on/off checkbox" for the widget type rather than "Check boxes/radio buttons." This provides just one checkbox where the default (unchecked) option is the first allowed value and the checked option is the second allowed value.
Thanks for all the great information. I am glad I ran across your blog. I look forward to reading your next post.
How would I hide a field title? I am just getting into Drupal.....
Cliff
Hey Cliff,
Refer to step five above to hide the field's label. As you can see, you want to set "Label" to "" in the "Display Fields" section.
Good luck and let me know if this answers your question.
Nice tutorial, thanks.
If I promote the node to display on front page, it will still show the title.
Any idea where that code would be?
thanks
Node titles are displayed through page.tpl.php. I'd recommend using the Views module to achieve better display of nodes (on the front page for example). Virtually all of my homepage is displayed using views from the Views modules.
Post new comment