Skip to main content

Blog Post

Dynamic Data in Quick Tabs

Quick Tabs is a great module, but if your tabs are named Today, Tomorrow, and the name of the day of the week for the next day, it is not obvious how to make the third tab say “Saturday”, “Sunday”, or anything else that changes.

After a quick search for a preprocess function for Quick Tabs didn’t result in a perfectly outlined tutorial, I decided that I would need to dig just a bit.  

I added my Quick Tabs with the third tab as “@Next” and opened my theme’s template.php.  Then, I looked through the Quick Tabs module to see what theme hooks it defines.  The module file revealed the following function:

/**
 * Implements hook_theme().
 */
function quicktabs_theme() {
  return array(
    'quicktabs_admin_form_tabs' => array(
      'render element' => 'tabs',
      'file' => 'quicktabs.admin.inc',
    ),
    'qt_ui_tabs' => array(
      'render element' => 'element',
    ),
    'qt_ui_tabs_tabset' => array(
      'render element' => 'tabset',
    ),
    'qt_quicktabs' => array(
      'render element' => 'element',
    ),
    'qt_quicktabs_tabset' => array(
      'render element' => 'tabset',
    ),
    'qt_accordion' => array(
      'render element' => 'element',
    ),
    'quicktabs_tab_access_denied' => array(
      'variables' => array('tab'),
    ),
  );
}

Many of these coincided with the names of the renderers available in the Quick Tabs configuration.  I was using the “ui_tabs” renderer, so I defined a preprocess function for each theme hook containing “ui_tabs” and placed a dpm in each to see what variables are available at that point in rendering the tabs.  Be sure you have the devel module enabled in order to use the dpm function to print variables to the message area of the page.

/**
 * Implements hook_preprocess_theme().
 *
 * This uses a theme function defined by quicktabs.
 */
function mytheme_preprocess_qt_ui_tabs(&$variables) {
  dpm($variables);
}

 

/**
 * Implements hook_preprocess_theme().
 *
 * This uses a theme function defined by quicktabs.
 */
function mytheme_preprocess_qt_ui_tabs_tabset(&$variables) {
  dpm($variables);
}


After clearing cache and reloading the page, both functions showed the tab links in the variables, but the first function contained an inner render array containing the second, so I decided the second function was the most direct route to the tab that I want to make dynamic.  The output of the dpm showed that $variables[‘tabset’][‘tablinks’] contains an array with markup for the three tab links.  I never want to count on them being in a specific order, so I loop through them to find and replace the text “@Next” with the day of the week.

/**
 * Implements hook_preprocess_theme().
 *
 * This uses a theme function defined by quicktabs.
 */
function mytheme_preprocess_qt_ui_tabs_tabset(&$variables) {
  // Get the full textual day of the week 2 days ahead of now.
  $next_day = date('l', strtotime('+2 days'));
  // Replace @Next with the day of the week.
  foreach ($variables['tabset']['tablinks'] as $key => $tab) {
    $variables[‘tabset’][‘tablinks’][$key][‘#markup’] = 
      preg_replace(‘/@Next/’, $next_day, 
        $variables[‘tabset’][‘tablinks’][$key][‘#markup’]);
  }
}

Additional Resources

Death to Field Arrays with EntityMetadataWrappers | Mediacurrent Blog Post
Top Drupal 7 Modules: Winter 2014 Edition | Mediacurrent Blog Post

Nathan James

Meet team member, Nathan James

Nathan received an early introduction to open source during his days at the University of Arkansas’s Computer Engineering program. From Linux and shell scripting, to PHP and MySQL, to Asterisk...

Learn more about Nathan >