Theming a CCK Node

It's easy to create a custom node with CCK, but what if we want to change how the node looks by default? It's a step up from theming your submitted and your terms code, but it's not really that hard. The main difference between theming the CCK node and the regular node is that in node.tpl.php, we have several content sections within a node, so rather than just printing $content, we will print out parts of the content individually. I will use code from the wallpaper node type of this site for my examples.

Step 0, before we get to the phptemplate part of this tutorial, you have to think to yourself if you really need to theme a specific node programmatically. In many cases, you can style a node just fine with CSS only, so first imagine how you want to theme your node and determine if you really need to get into the templating engine.

Subsequently, we need to create a template file for our node type, make a copy of your themes node.tpl.php and rename it node-typename.tpl.php. In the case of my wallpaper node on this site that will be node-dwall.tpl.php.

Next we will learn how to identify and print parts of our node. Rather than $content, we're now working with $node, this is the object that holds all our node its content. To find out what our node object contains we will use the print_r function:

If you check out your node page with the above snippet in place you will find it displays (nearly) all the node data you could wish for. The most interesting parts of our nodes are of course our node fields. This is what a field could look like when printed by print_r:

The above snippet displays all the data from my wallpaper file. Each of these pieces of data can be printed out using the following syntax:

So that's really all there is to it, you find the piece of data you want to use, and you blend it in with your html. There is really no limit to what you can do with your node, you can use the data to create a little google map with each node, if you have location data. You could arrange field data in complex layouts, with tables or definition lists, or you can keep it simple and just print out the fields with some extra structural HTML to use as hooks in order to decorate the node with CSS.

As always, I will please the lazy drupal user who just wants to copy paste and play with the code, which is in fact the best way to learn. The following code is my entire node-dwall.tpl.php file that I currently use on this site, including the print_r stuff, wrapped in an if test that makes sure only the admin gets the array layed out beneath the actual node.

You should see the content part of the node file as 2 parts, the teaser part and the full-view part. I check with $page==0 to see if we want to display just a teaser or the whole thing, so the first part after if $page == is what I want to display as teaser and the part after 'else {' is what we display in in full node view, which is this page. I'm using imagecache to create resized derivatives of the file that was uploaded with the node form. If you want to use my imagecache code below on your site you will probably need to remove all the /system parts in the urls, as this requests the file through the private files ystem, and with imagecache you should use the public files ystem unless you have a good reason not to.