EditTheming CCK in Drupal
I recently had a friend ask me how to be able to give CCK fields more user-friendly class names so that they could be styled a little easier. I actually needed to do this myself with a project at work, so I had time to really sit down and figure out a good way to do this.
The Content Creation Kit (CCK) is a great way to add different fields to any particular content type within Drupal. When you first start learning Drupal, you’ll see that it ships with two main content types: Page and Story. The fields that these two content types have by default are the Title and the Body. These are respectively a single line text field, and a multi-line text field of which you can choose an input format. This is great and very useful for basic content, but what if I would like another text field other then just Title and Body? CCK allows you to add this. But instead of trying to explain the power and awe of CCK here, please take a look at the CCK handbook where this is explained in much greater detail.
Now adding CCK fields to a content type is all fine and dandy, but what if I want to make them look better by perhaps changing around the order in which they appear when viewed, or perhaps target that specific element with my CSS in order to specify the exact look and feel of the content it holds? This is where you want to start theming. However, sometimes theming in Drupal can be a pretty complex concept to grok at first. Not because it is very hard, but because without any stepping stones to how theming actually works, you can very easily fall into a dangerous quagmire of code, arrays and objects that you have no idea are even available to you.
Contemplate this my friend
This is where Jeff Robbins of the Lullabot crew has come to our rescue with a great module called Content Templates (contemplate). I believe this module is an incredible stepping stone in learning how to bridge the gap that exists between CCK and the way CCK fields are presented (themed). Installing this module will add a new menu item under Content Mangement in your Administration panel called ‘Content templates’, and also a templates tab inside of your ‘Content types’ page of your Admin section. Once you create a template for any given content type, you can effectually customize the look and feel of not just the content type’s node view (labeled Body in contemplate), but also the Teaser and the RSS!
Ok, time for a downer
So what do we do about the teeny, tiny, little text box that we’re supposed to put all of our theming code into? Well, fortunately Drupal’s main theming engine, phptemplate, has already taken care of this. Listen carefully now, ‘cuz this is important and I don’t want to lose you now. We’ve already come so far. Each content type can have it’s very own template file within your theme.
Theming a content type
You can actually accomplish this very easily. The first step is to create a file within your theme directory named node-content_type.tpl.php replacing content_type with the machine readable name you’ve given your content type. So if your content type is named forum, you’ll want the file to be named node-forum.tpl.php. For almost all of my work lately I’ve been using a theme called zen. It’s written by the Lullabot crew once again, and is probably the best theme out there to teach you anything about a theme. This theme has a file that is a custom themed content type already specific to the forum module. The file is node-forum.tpl.php. I’ve used this on multiple occasions as a template on how to start a new custom theme file for a content type. If you use this file, you’ll notice that, among other things, it prints out the $content variable. All of our CCK fields can be found inside of this variable, along with the default theming of them that you find in the contemplate module’s teeny, tiny, little box for the template code. So you can take the code that is generated by default in the contemplate module, and insert all of that where you see the $content variable being printed in the tpl file. From there, you can do all of your editing in the editor of your choice without having to strain your back trying to bend closer to your monitor to see what’s inside of the teeny, tiny, little box.