Theming 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.
CCK
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.
Stepping Stones
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!
Commercial break
BUT WAIT, THERE’S MORE! Each fieldset (teaser, body, and rss) has not just a text field to edit the template in, but also inserts a default view of what Drupal spits out, ready to edit. And if that isn’t exciting enough for you, there is (IMHO the most useful feature of this module) a rich text-field next to that which lists every object available to you for templating! There’s even some neato javascript that allows you to click on an object and insert the php to print that object into the template field. This is just good stuff man. Fun times. Act now while supplies last. Void where prohibited.
Ok, time for a downer
Finding such a gem is really very great, but the excitement starts to wear off after about an hour of trying to template a complete content type inside of that teeny, tiny, little box. Even the javascript insertion of the box next to it begins to feel like a sticky piece of candy that’s lost it’s flavor. I’d like to take this opportunity to mention that the devel module provides you with a feature quite similar to this little javascript flavored object reference box, but unless you’re already very familiar with how to work with these field objects in PHP, the devel module is next to useless. So, again as a stepping stone, the contemplate module really comes in handy for referencing what objects are available to theme, and will give you a little insight as to how to work with them in PHP.
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.