We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

How Does Theming Node Form Work In Drupal 7

drupal theme form

We’re going to take a look at how to theme the layout of a node with the Drupal theme editor. We will use Drupal 7 for the purpose of this theme development tutorial.

We’re going to use a taxonomy field field_tags, and we want to put this field into another region called sidebar.

The form buttons will be extracted as $buttons in another region, too.

Drupal Theme Editor Tutorial

The first thing you need to do with your Drupal theme form is create a hook_theme(). This can be implemented in your template.php file, but for the purpose of this tutorial we will place it in our custom module called MYMODULE.

Your theme output should be put through article-node-form.tpl.php:

* Implements hook_theme().
function MYMODULE_theme($existing, $type, $theme, $path) {
return array(
'article_node_form' => array(
'render element' => 'form',
'template' => 'article-node-form',
// this will set to module/theme path by default:
'path' => drupal_get_path('module', 'MYMODULE'),

You then need to define your preprocess function for article_node_form.
Send the following to the template file:

* Preprocessor for theme('article_node_form').
function template_preprocess_article_node_form(&$variables) {
// nodeformcols is an alternative for this solution.
if (!module_exists('nodeformcols')) {
$variables['sidebar'] = array();   // Put taxonomy fields in sidebar.
$variables['sidebar'][] = $variables['form']['field_tags'];
// Extract the form buttons, and put them in independent variable.
$variables['buttons'] = $variables['form']['actions'];

You then need to create your template page with your Drupal theme design editor in the module directory.
Implement the following code:

<?php echo drupal_render_children($form)?>

Then edit with:

<div class="node-add-wrapper clear-block">
<div class="node-column-sidebar">
<?php if($sidebar): ?>
<?php print render($sidebar); ?>
<?php endif; ?>
<div class="node-column-main">
<?php if($form): ?>
<?php print drupal_render_children($form); ?>
<?php endif; ?>
<?php if($buttons): ?>
<div class="node-buttons">
<?php print render($buttons); ?>
<?php endif; ?>
<div class="clear"></div>

The final must-have part of HTML for your Drupal theme form to work is the following:

<input type="hidden" name="form_build_id" value="form-9DoBKF-JQBgOvH7V6ygTI_-E9FiD77VGM5tzz6KFB_0" />
<input type="hidden" name="form_token" value="Ilw23wpvQ_NZ-wAV_VeMOgE-tfJ3wf4PBQ_XHIL18cI" />
<input type="hidden" name="form_id" value="my_super_form_id" />

You can now go ahead and work on your own CSS styling.

If you don’t feel like developing, then perhaps our list of the best drupal 7 themes will suit you more.

Comments are closed.