Last updated March 26, 2011. Created on March 17, 2007.
Edited by linclark, rootwork, ksenzee, Michelle. Log in to edit this page.

Setup

  1. Download views module.
  2. Enabled views, views ui, and views theming wizard
  3. 'Add' the front page view
  4. Change the view type to list view
  5. You add the node id field, so we can load the node in the template file.

Let's get theming

  1. If we visit oursite.com/?q=frontpage, we see a list of node ids. But we can do better. A lot better.
  2. Go to example.com/?q=admin/build/views/wizard, and select frontpage as the view.
  3. Make the theme type simple list
  4. Click select theme type
  5. Paste all the code in the correct files
  6. Visit example.com/?q=frontpage. tada! Ugly! Yay!

If we look at our function in template.php, we see

<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
 
$fields = _views_get_fields();

 
$taken = array();

 
// Set up the fields in nicely named chunks.
 
foreach ($view->field as $id => $field) {
   
$field_name = $field['field'];
    if (isset(
$taken[$field_name])) {
     
$field_name = $field['queryname'];
    }
   
$taken[$field_name] = true;
   
$field_names[$id] = $field_name;
  }

 
// Set up some variables that won't change.
 
$base_vars = array(
   
'view' => $view,
   
'view_type' => $type,
  );

  foreach (
$nodes as $i => $node) {
   
$vars = $base_vars;
   
$vars['node'] = $node;
   
$vars['count'] = $i;
   
$vars['stripe'] = $i % 2 ? 'even' : 'odd';
    foreach (
$view->field as $id => $field) {
     
$name = $field_names[$id];
     
$vars[$name] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view);
      if (isset(
$field['label'])) {
       
$vars[$name . '_label'] = $field['label'];
      }
    }
   
$items[] = _phptemplate_callback('views-list-frontpage', $vars);
  }
  if (
$items) {
    return
theme('item_list', $items);
  }
}
?>

We want something simpler.
How about stripping all the complex code, so we end up like this.

<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
  foreach (
$nodes as $i => $node) {
   
$items[] = _phptemplate_callback('views-list-frontpage', array('node' => $node));
  }
  if (
$items) {
    return
theme('item_list', $items);
  }
}
?>

This should give us the whole node in the view, in a $node object, although now we don't have a $nid variable.
So, we can edit the views-list-frontpage.tpl.php to this.

<?php
/**
 * views template to output one 'row' of a view.
 * This code was generated by the views theming wizard
 * Date: ---, --/--/----, --:-- --
 * View: frontpage
 *
 * Variables available:
 * $view -- the entire view object. Important parts of this object are
 *   frontpage, .
 * $view_type -- The type of the view. Probably 'page' or 'block' but could
 *   also be 'embed' or other string passed in from a custom view creator.
 * $node -- the raw data. This is not a real node object, but will contain
 *   the nid as well as other support fields that might be necessary.
 * $count -- the current row in the view (not TOTAL but for this page) starting
 *   from 0.
 * $stripe -- 'odd' or 'even', alternating. * $nid -- Display the NID of a node.
 * $nid_label -- The assigned label for $nid
 *
 * This function goes in your views-list-frontpage.tpl.php file
 */
 

 //now we add the stylesheet...
 

drupal_add_css(path_to_theme() .'/views-list-frontpage.css');
 
 
?>

<div class="view-label view-field-nid">
  <?php print $nid_label ?>
</div>
<div class="view-field view-data-nid">
  <?php print $node->nid ?>
</div>

This gives us the same thing, with less code.
We can also do something like the following:

<?php
/**
 * views template to output one 'row' of a view.
 * This code was generated by the views theming wizard
 * Date: ---, --/--/----, --:-- --
 * View: frontpage
 *
 * Variables available:
 * $view -- the entire view object. Important parts of this object are
 *   frontpage, .
 * $view_type -- The type of the view. Probably 'page' or 'block' but could
 *   also be 'embed' or other string passed in from a custom view creator.
 * $node -- the raw data. This is not a real node object, but will contain
 *   the nid as well as other support fields that might be necessary.
 * $count -- the current row in the view (not TOTAL but for this page) starting
 *   from 0.
 * $stripe -- 'odd' or 'even', alternating. * $nid -- Display the NID of a node.
 * $nid_label -- The assigned label for $nid
 *
 * This function goes in your views-list-frontpage.tpl.php file
 */
 
$node = node_load($node->nid);
 
//now we add the stylesheet...
 
drupal_add_css(path_to_theme() .'/views-list-frontpage.css');
 
 
?>

<div class="view-field view-data-nid">
  <?php print $node->nid ?>
</div>

With this, we can transform it into a table, with very little code, and so it displays the title, author, ect.
This is our code for template.php

<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
 
$output = "<table>";
  foreach (
$nodes as $i => $node) {
   
$output .= _phptemplate_callback('views-list-frontpage', array('node' => $node));
  }
 
$output .= "</table>";
  return
$output;
}
?>

And views-list-frontpage.tpl.php:

<?php
/**
 * views template to output one 'row' of a view.
 * This code was generated by the views theming wizard
 * Date: ---, --/--/----, --:-- --
 * View: frontpage
 *
 * Variables available:
 * $view -- the entire view object. Important parts of this object are
 *   frontpage, .
 * $view_type -- The type of the view. Probably 'page' or 'block' but could
 *   also be 'embed' or other string passed in from a custom view creator.
 * $node -- the raw data. This is not a real node object, but will contain
 *   the nid as well as other support fields that might be necessary.
 * $count -- the current row in the view (not TOTAL but for this page) starting
 *   from 0.
 * $stripe -- 'odd' or 'even', alternating. * $nid -- Display the NID of a node.
 * $nid_label -- The assigned label for $nid
 *
 * This function goes in your views-list-frontpage.tpl.php file
 */
 
$node = node_load($node->nid);
 
//now we add the stylesheet...
 
drupal_add_css(path_to_theme() .'/views-list-frontpage.css');
 
 
?>

<tr>
  <td>
    <?php print $node->nid ?>
  </td>
</tr>

Or, even better, we could use theme_table, and not include any external files.

template.php:

<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
 
$table = array();
  foreach (
$nodes as $i => $node) {
   
$node = node_load($node->nid);
   
$table[] = array($node->nid);
  }
  return
theme_table(array('Node id'), $table);
}
?>

Beautiful. We can go on to do things like

<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
 
$table = array();
  foreach (
$nodes as $i => $node) {
   
$node = node_load($node->nid);
   
$user = user_load(array('uid' => $node->uid));
   
$table[] = array(l($user->name, 'user/'. $user->uid), l($node->title, 'node/'. $node->nid), $node->teaser);
  }
  return
theme_table(array('Author', 'Title', 'Teaser'), $table);
}
?>

We can also do stuff with cck.
For debugging, use

<?php
function phptemplate_views_view_list_frontpage($view, $nodes, $type) {
 
$output = "";
  foreach (
$nodes as $i => $node) {
   
$node = node_load($node->nid);
   
$output .= "Node ". $node->nid ."<br /><pre>". print_r($node, 1) ."</pre><br />";
  }
  return
$output;
}
?>

This will show the whole node object, including any cck fields.

Go wild!

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

nunoveloso’s picture

If you wish to use Drupal's theme_table, the function signature should be like:

<?php
function phptemplate_views_view_table_frontpage($view, $nodes, $type) {
 
// your code
}
?>

--
Nuno Veloso (tanguito in irc.freenode.net)

kotu’s picture

I've checked out many options, but pager still is not appearing...

Any idea !??

--
Marcin Kot - http://kotu.pl

laken’s picture

Thanks Ivan, I'd used the theming wizard before but this helps take it to a new level. Thanks for working on these docs - looking forward to reading the whole section!