Creating a custom theme layout for a CCK node form

Avatar-eric-london
Created by Eric.London on 2008-10-09
Tags:
New Comment
 
Please note: the content on this page orginates from ericlondon.com.
Sometimes the default theming layout of a CCK node cannot simply be adjusted using CSS. In this example, I'll explain how to modify the layout of a CCK node form and group some form elements into a table, item list, etc. NOTE: this code has to reside in you template.php file.

<?php
// first, modify the theme registry so Drupal knows you'd like to override the theming of your CCK node type
function MYTHEME_theme($existing, $type, $theme, $path) {
  return array(
    'MYCCKTYPE_node_form' => array(
      'arguments' => array(
        'form' => NULL
      )
    )
  );
}

// now, define the function that will modify the structure of the form object
function MYTHEME_MYCCKTYPE_node_form($form) {

  // create a variable to store the form html
  $html = "";

  // loop through the $form object
  $fields = array();
  foreach ($form as $k => $v) {
    // check if the current key is a field
    if (substr($k, 0, 6)=='field_') {
      // NOTE: you can use the drupal_render() function to generate the output on $v
      // in this example, I'll create the html for each field and store it in an array
      $fields[$k] = drupal_render($v);

      // NOTE: since we're executing drupal_render on $v, and not directly on $form, 
      // we'll have to remove this field from $form so it will not be rendered twice
      // Normally, drupal will not render a form object if it has already been rendered
      unset($form[$k]);

    }
  }

  // Now the html has been stored in the associative array $fields variable in the format:
  // [field name] => [field html]
  // At this point you could use a theme function
  // (theme_table, theme_item_list, theme_fieldset, etc)
  // to generate the html for a common layout format,
  // or you could create your own html/css layout
  // For example, you could put the fields in an item list:
  $html .= theme('item_list', array_values($fields));

  // Lastly, you'll need to generate the html for the rest of the form fields
  $html .= drupal_render($form);

  return $html;
}
?>


Here's a screen shot of a CCK node form that I rebuilt in a table:

Comments

 
  • 3 cck fields in single line
    Created by Anonymous on 2009-04-05
    how can i theme 3 cck fields to put in a single line? i have these 3 fields: Lastname,firstname and middle name. I want to put this 3 cck fields in just a single line. how can i do this and can i put this in a ccknodetype.tpl.php through preprocess? if not, how can i put my cck form fields ina a ccknodetype.tpl.php?

    hope to hear from you soon, Thanks in Advance!

    best,
    Arnel
    • question
      Created by Eric.London on 2009-04-06
      Hi Arnel,

      You're talking about a CCK node form, not the node view, right?

      In regards to the above code, you could replace the line that creates an item list:
      <?php
      $html .= theme('item_list', array_values($fields));
      ?>


      with some code that surrounds the fields in span tags:
      <?php
      foreach ($fields as $k => $v)
      {
          $html .= "<span class='cck_inline_span'>$v</span>";
      }
      ?>


      Sometimes a span does not stay inline if there are block level html elements inside the span. In that case, you could add some CSS:
      
      span.cck_inline_span * { display: inline; }
      


      Does that help?

      Regards,
      Eric
  • I have the following fields:
    Created by Anonymous on 2011-08-01
    I have the following fields: field_email, field_fax,...for a content type called
    coupon

    I have implemented the code above in
    template.php
    file, and the items shows is a list. I will be using the grid 960 to layout these fields and I am not sure how to do this or how to replace the line displaying the list item. additionally, the form does not seem to save on my Drupal 6.22 install

    thanks.