Adding jQuery Tabs via template.php

Question

How do you add jQuery tabs in a "template.php" file?
I'm trying to add it with drupal_add_library('system', 'jQuery.tabs') or drupal_add_js('/misc/ui/jquery.ui.tabs.min.js'), but I'm not having any luck.

Here's my full snippet:

function custom_theme(&$existing, $type, $theme, $path) {
  $hooks = array(); 
  drupal_add_library('system', 'ui.tabs');
  // custom.js will call jQuery.tabs!
  drupal_add_js( path_to_theme() .'/js/custom.js', array('weight' => 9));

  return $hooks;
}

Answer 1

hook_theme() is a hook that must returns the list of theme functions implemented by a module, or a theme.

Calling drupal_add_library() or drupal_add_js() inside hook_theme() is not the way to add a JavaScript file to a page.

As reported in Structure of the .info file, a theme can use the scripts directive to declare the JavaScript files that it uses.

scripts[] = js/custom.js

Alternatively, a theme can use drupal_add_js() inside a theme function, or use the following snipped inside page.tpl.php, or any alternative page template Drupal would use.

drupal_add_js($path_to_script);
$scripts = drupal_get_js();

Answer 2

I think the specific question is regarding adding jQuery UI Tabs. Another answer speaks to adding custom javascript files.

When I have a lot of tabs on many pages, I've been accomplishing this is in a custom module with hook_init()

function mymodule_init(){
    drupal_add_library('system','ui.tabs');
}

In the comments, this questions asks how to accomplish this for a specific page (or node).

You can do this in your theme in template.php with template_preprocess_page():

function mytheme_preprocess_page(&$variables) {
    echo "<pre>"; print_r($variables['node']); echo "</pre>";   // great for debugging
    if ($variables['node']->nid == 3) drupal_add_library('system', 'ui.tabs');
}

The above code assumes that node 3 is the target page that has the jQuery UI Tabs.

Don't forget to flush caches after adding these.

So now we've loaded the library. The next step is to add a javascript file to your module/theme. This is done in the mytheme/mymodule .info file. Add

scripts[] = js/script.js

Make the 'js' folder, create the script.js, and follow Drupal practices by following this pattern:

(function($, Drupal, window, document, undefined) {
    Drupal.behaviors.my_custom_behavior = {
        attach : function(context, settings) {
            // assuming your div is "tabs"
            jQuery("#tabs").tabs();
        }
    };
})(jQuery, Drupal, this, this.document);

So, for sake of simplicity, you can have your node 3 content set to Full HTML (or PHP in this example), and the body like this, which will show two Views on different tabs:

<div id="tabs">
<ul>
  <li><a href="#tabs-1">Stack Overflow</a></li>
  <li><a href="#tabs-2">Drupal StackExchange</a></li>
</ul>
  <div id="tabs-1">
    Let's show our View for Stack Overflow
    <?php echo views_embed_view('stackoverflow', 'machine_name_foo'); ?>
  </div>
  <div id="tabs-2">
    And for Drupal
    <?php echo views_embed_view('drupal_se', 'machine_name_bar'); ?>
  </div>
</div>