How do you theme a content type's create/edit form?

Question

Like it says -- I've got a D7 content type whose editing form needs to be themed. I did this all the time in D6 by registering theme functions in template.php and writing the associated theming functions, but things seem to have changed in D7, especially regarding what goes into template.php, or if D7 has shifted to using .tpl.php files for this, or whatever. Is there any advice out there?

Answer 1

According to the handbook page on theming node forms in Drupal 7, you would indeed make changes in the .tpl.php template files.

That said, we have usually found it easier to use Field Group and Display Suite. Node Form Columns is another option.

Answer 2

You have two options.

option 1: using the template.php of your admin theme

• Pick the right theme to customize. Remember that by default, drupal 7 uses a different theme for administration and there is a setting under admin/appearance that says what your admin theme is and if content editing should use the admin theme. look at this setting and figure out whether you want to customize your main theme or your admin theme.
• once the theme has been identified, if that theme is a core theme and not one that resides in sites/all/themes or sites/something.com/themes, you may want to create a base theme rather than changing the existing theme. it is a bad idea to change a core theme anyways. Even if it is a downloaded theme, it makes sense to create a subtheme so that you can keep upgrading the downloaded theme when new versions come out.

• (optional) to create a subtheme. lets say, your admin theme is seven and it is also being used for content editing, simply create a folder called my_seven under sites/all/themes. next add a my_seven.info under the newly created my_seven directory with the following contents

  base theme = seven name = My Seven description = My simple one-column, tableless, fluid width administration theme (child of Seven).

• Now add a file called template.php under the same folder with the following contents. please note that the form id is strictly derived from your content types machine name. the template name however can be anything you please but -node-form looks like a good convention to follow.

  <?php 
  
  function my_seven_theme() {
    return array(
      '<my_content_machinename>_node_form' => array(
          'arguments' => array('form' => NULL),
          'template' => '<my_content_machinename or anything else>-node-form',
          'render element' => 'form',
      ),
    );
  }
  

• now create a <content_type_machinename>-node-form.tpl.php file with the following contents to test if things are working.. once you see the custom form, just change the tpl.php to your heart's content. pick a custom field other than title to be sure it is working fine.. ideally pick something that is not a simple text field. a term reference field type would be a good candidate to ensure that your subtheme is working ok.

  <div>   
      <?php print drupal_render($form['title']); ?>
  </div>
  <div>
      <?php print drupal_render($form['field_<my_field1>']); ?>   
  </div>
  

• clear your theme registry cache (actually not required for the first time a theme is made use of but do it anyways)

• set the new subtheme as the admin theme using the admin/appearance page.
• edit a content or create a new content and you should see your modified form.

option 2: using your own drupal module to customize the form

• create a new folder called custom_content_forms under sites/all/modules

• create a custom_content_forms.info file with the following contents

  name = My Custom Content Forms
  description = A trivial module to customize my content entry forms such as smartphone
  core = 7.x
  

• create a custom_content_forms.module with the following content

  <?php
  
  function custom_content_forms_theme() {
      return array(
          '<contenttype_machine_name>_node_form' => array(
              'template' => '<contenttype_machine_name>-node-form',
                  'render element' => 'form',
          ),
      );
  }
  

• now create a <content_type_machinename>-node-form.tpl.php file with the following contents to test if things are working.. once you see the custom form, just change the tpl.php to your heart's content. pick a custom field other than title to be sure it is working fine.. ideally pick something that is not a simple text field. a term reference field type would be a good candidate to ensure that your subtheme is working ok.

  <div>   
      <?php print drupal_render($form['title']); ?>
  </div>
  <div>
      <?php print drupal_render($form['field_<my_field1>']); ?>   
  </div>
  

• go to administration and enable the new module and you should see your customized form when you add or edit content of the targeted type.

NOTE: If you customize using both mechanisms, drupal will prefer the theme over the module.

EDIT: the above will only produce the fields. you wont get the node settings menu and submit and preview buttons by default. if you just add a

<?php print kpr($form); ?>

on the page (devel module needs to be enabled for kpr to work) to produce a dump of the $forms array. You will see that you can get these things on your form page quite easily by adding the following to the tpl.php

<div><?php print drupal_render($form['additional_settings']); ?></div>
<div><?php print drupal_render($form['actions']); ?></div>

Answer 3

To change node forms from Admin interface you may use:

Display Suite - http://drupal.org/project/ds

Field Group - http://drupal.org/project/field_group

Renderable Elements - http://drupal.org/project/rel

Enable the following modules: Display Suite, Display Suite Forms, Display Suite Extras, Field Group, Renderable Elements

Set the Renderable Elements settings by going to the settings page at admin/structure/rel/config and making sure the "Enable form registration" checkbox is checked.

Now go to the "Manage fields" form of one of your content types. Click on "Manage form display" at the top of the page to register the form with Renderable Elements to select which fields to enable. Upon saving this form you will be able to manage the display of ALL fields on your content type using the standard Display Suite UI.

source: http://getlevelten.com/blog/ian-whitcomb/drupal-form-layouts-renderable-elements