[Drupal] How to create Quick Tab Programmatically

| | 3 min read

This article will be explaining how to create custom block and how to add the custom block in to quick tabs, programmatically. If you want to display the block inside a node you can refer our artilce How to print a block inside a node on a Drupal 6 website.

First lets create a custom block using hook_block. In this block what I want to display is when we provide a url, need to display corresponding alexa graph for the particular site.



function custom_module_block($op = 'list', $delta = 0, $edit = array()) {
  
  if ($op == 'list') {
    //'list' shows the items in admin/build/block admin page
    $blocks[1]['info'] = t('Daily Traffic Rank');
    $blocks[1]['cache'] = BLOCK_NO_CACHE;
    $blocks[2]['info'] = t('Daily Pageviews');
    $blocks[2]['cache'] = BLOCK_NO_CACHE;
    $blocks[3]['info'] = t('Daily Reach');
    $blocks[3]['cache'] = BLOCK_NO_CACHE;
    $blocks[4]['info'] = t('Daily Statistics');
    $blocks[4]['cache'] = BLOCK_NO_CACHE;
    return $blocks;
  }
  elseif ($op == 'view') {
    $content_websiteurl = www.zyxware.com;
    //'view' shows the contents of the block
    switch ($delta) {
      case  1:
        $block['subject'] = 'Daily Traffic Rank';
        $block['content'] =  '< script language="JavaScript" type="text/javascript" src="http://xsltcache.alexa.com/traffic_graph/js/g/b/6m?&u='.$content_websiteurl.'+++++"> </script >';
        break;
      case  2:
        $block['subject'] = 'Daily Pageviews';
        $block['content'] =  '< img src="http://traffic.alexa.com/graph?&w=400&h=220&o=f&c=1&y=p&b=ffffff&r=1m&u='.$content_websiteurl.'&" >';
        break;
      case  3:
        $block['subject'] = 'Daily Reach';
        $block['content'] =  '< img src="http://traffic.alexa.com/graph?u='.$content_websiteurl.'&c=1&w=400&h=220&y=r&r=3m&b=e6f3fc" alt="Alexa Graph Widget" >';
        break;
      case '4':
        //set quicktab tab content
        $tabs['rank'] = array(
              'title' => t('Traffic Rank'),
              'type' => 'block',
              'bid' => 'block id',/*block id*/
              'hide_title' => TRUE,
        );
        $tabs['pageviews'] = array(
              'title' => t('Pageviews'),
              'type' => 'block',
              'bid' => 'block id',
              'hide_title' => TRUE,
        );
        $tabs['reach'] = array(
              'title' => t('Reach'),
              'type' => 'block',
              'bid' => 'block id',
              'hide_title' => TRUE,
        );
        $quicktabs['qtid'] = 'custom_module_quicktabs';	// Machine Readable Name
        $quicktabs['hide_empty_tags'] = TRUE;		// Hide empty tabs
        $quicktabs['default_tab'] = 'rank';	// Set default tab
        $quicktabs['tabs'] = $tabs;		// Get all tabs with content
        $quicktabs['style'] = 'Excel';		// Tabs theme
        $quicktabs['ajax'] = FALSE;		// ajax or not values TRUE or FALSE
        $block = array('subject' => 'Daily Statistics', 'content' => theme('quicktabs', $quicktabs));
        break;
    }    
    return $block;
  }
}

Here in switch case 1, 2 and 3 we define the corresponding block title and content part. In case 4 we define tab contents for each tab to be displayed in quick tabs. In our example we displayed all the tabs as blocks, by passing corresponding blok id. Now in $quicktabs we pass the following values Quick Tab Id, Hide Empty Tags, Tabs to be displayed, Style for the tab and Content passed as an arry with title and content.

Other than block content we could display following types in quick tabs,


/*Freetext*/
$tabs['freetext'] = array(
'title' => t('Freetext'),
'type' => 'freetext',
'text' => t('Free Text'),
);
/*Node*/
$tabs['node'] = array(
'title' => t('Node'),
'type' => 'node',
'nid' => 'nodeid',
'teaser' => TRUE,
'hide_title' => TRUE,
);
/*Views*/
$tabs['views'] = array(
'title' => t('Views'),
'type' => 'view',
'vid' => 'viewid',
'display' => 'machinename',
'args' => '1',
);

Once we have created the quick tab, we could see the block in admin/build/block and assign it to the required region. We have Implemented this in Top Drupal Sites

Reference Links
http://www.leveltendesign.com/blog/dustin-currie/how-programmatically-c…
http://www.braahm.be/posts/creating-quicktabs-programmatically