how to apply two themes for an element in custom module?

Question

In the custom field module that i have written, i am trying to use two themes for same element. One is pager theme and another one is item_list theme ..

I want to make both of these themes work for this element. Do i have to add them in array one item after another ?

Thank you very much :)

Edit: I have modified my code as per patmacs suggestion. I will put that code below, since my page is not displaying anything with change in code.

function event_webpages_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {

// Retrieve documents from Solr function using query
foreach($items as $delta => $item) {
$records = solr_get_results($item['query']);

// iterate through the documents and put them in the array $items in which every record is passed over a theme defined in hook_theme()
foreach($records as $record) {
  $items[] = array(
    'data' => array(
    '#theme' => 'event_webpages_field_list',
    '#node' => $record,
    ),
  );
}

// Number of items per page 
$per_page = 10;
// Initialise the pager
$current_page = pager_default_initialize(count($items),$per_page);
// Split your list in to page sized chunks
$chunks = array_chunk($items, $per_page, TRUE);

// The pager theme element
$element1 = theme('pager', array('quantity',count($items)));

// The item_list theme element
$element2 = array(
  '#theme' => 'item_list',
  '#items' => $items,
  '#pre_render' => array('event_webpages_item_list_child_render'),
  );

// the final element passed along with the theme defined in hook_theme()
$output = array(
  '#theme' => 'event-webpages-theme-list',
  '#element1' => $element1,
  '#element2' => $element2,
 );
drupal_add_css(drupal_get_path('module', 'event_webpages') . '/event-webpages.css');
return $output;
 }

The above one is my formatter_view function and my hook_theme function looks like this

/**
 * Implements hook_theme()
 */
function event_webpages_theme($existing, $type, $theme, $path) {
  return array(
    // The theme applied for each item in the item_list
    'event_webpages_field_list' => array(
    'variables' => array(
    'node' => NULL,
    ),
    'template' => 'event-webpages-field-list',
    ),
    // The theme applied to the final output and each variable is theme element
    'event_webpages_theme_list' => array(
    'variables' => array(
      'element1' => NULL,
      'element2' => NULL,
    ), 
    'template' => 'event-webpages-theme-list',
    ),
  ); 
}

The code in event-webpages-theme-list is

<?php
// $Id$
?>
<div class="<?php print $classes; ?>">
<?php print $element1; ?>
<?php print $element2; ?>
</div>

Sorry if it made it more confusing but i thought this will give a overall view of what i have done. Should i use a preprocessor function for 'event-webpages-theme-list' before passing the variables ?

Many Thanks

Answer 1

**
* Implements hook_theme().
*
* Defines the theming capabilities provided by this module.
*/
function YOURMODULENAME_theme() {

  return array(
    'THEMENAME1' => array(
    'template' => 'PATHTOTEMPLATEFILE', 
       // EXAMPLE URL FOR ABOVE - 'templates/mymodulename--event--list-item',
       // This will make the module look for mymodulename--event--list-item.tpl.php
       // in the template folder within the module's directory 
    'variables' => array(
      'SOMEVARIABLETOPASSTOTHETEMPLATE' => NULL,
      'ANOTHERVARIABLETOPASSTOTHETEMPLATE' => NULL,
      ),
    ),
  ),

}

Then when you have to return the content for the block or page, just call this function:

$output = theme("THEMENAME1", array('SOMEVARIABLETOPASSTOTHETEMPLATE' => "this is the variable that gets passed to the tpl", 'ANOTHERVARIABLETOPASSTOTHETEMPLATE' => "Another variable that is being passed to the template"));
return $output; // You could also just return the theme function above

Now, within your mymodulename--event--list-item.tpl.php file (Or whatever you named it) you can print any of the variables that you defined above.

<div class="somemarkup">
  <?php print $SOMEVARIABLETOPAsStOTHETEMPLATE; ?>
</div>