I found this code:

 (function ($) {  
 Drupal.behaviors.betterExposedFiltersExpandCollapseNested = {
   attach:function (context, settings) {
     // first collapse the children
     $('ul.bef-tree-child').css('display', 'none'); 
     $('.form-checkboxes.bef-select-all-none li').has('ul').once('bef-tree', function () {
         .click(function() {
           $ul = $(this).parents('li:first').find('ul');
           if($(this).attr('checked')) {
           else {
   }   } }) (jQuery);

for expandable hierarchy filters from here

I have no idea how to put it in my theme, what files and how to edit. Anyone could tell me the steps to do that?


There are (at least) two ways to add a JavaScript file to an Omega subtheme. The Omega Theme Documentation Handbook adds it as a library that can then be toggled on in the theme settings. I tend to use drupal_add_js, with a slight workaround to point it to the subtheme (more about why that's necessary in the Docs issue queue).

As a library

First, add the file to a js folder in your theme. The path to mine was sites/all/themes/webbykat/js/webbykat.js.

Second, add a reference to the new file in your theme's .info file. During this step, you'll also add some identifying information for your new file, like a name and a description, as well as its weight. Here's what mine looked like:

libraries[MYTHEME_custom][name] = Some custom name
libraries[MYTHEME_custom][description] = Some custom description
libraries[MYTHEME_custom][js][0][file] = script.js
libraries[MYTHEME_custom][js][0][options][weight] = 15

Be sure to clear your cache after you update your .info file.

Please note: If you're adding more than one file, you'll need to up that number for each file - libraries[MYTHEME_custom][js][0][file] = script.js and then libraries[MYTHEME_custom][js]3[file] = secondfile.js. Be sure to adjust it next to the weight as well. (Thanks, Screenack, for pointing that out in the comments.)

Third, now that the Omega theme is aware of your new file, formally inform Omega that you'd like to use it. Under Appearance > Settings > [Theme name], go to the Toggle libraries tab. Check the box next to the name of your file. Save.

With drupal_add_js

In template.php, you might think you could use drupal_add_js to add it like this:

function MYTHEME_preprocess_page(&$variables) {
  drupal_add_js(path_to_theme() . '/js/script.js');

However, path_to_theme doesn't reference the active theme (more on that here), so we need a slight workaround. Instead, use the following:

function MYTHEME_preprocess_html(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'MYTHEME') . '/js/script.js', array( 
    'scope' => 'header', 
    'weight' => '15' 

Scope tells the function that the file should be called in the header or footer, and the weight tells it what order it should be called in relative to other files.

I prefer the two methods above because one is featured in the Omega documentation, and the other allows you to control what pages the JavaScript is called on if you want to (post on that to come). But as a developer friend pointed out, if you just want something quick and dirty to get a JavaScript file called on every page of your site, scripts[] = js/script.js in the .info file works too.



You add custom stylesheets and scripts to an Omega subtheme by adding them to yourtheme.info and then (after clearing caches) enabling them in your theme's appearance settings.

Like so:

scripts[] = script.js

As mentioned in this comment on d.o.

There are also other questions on this site with useful answers.


you can use JS injector which offers many functions but puts code in sql, or learn how-to with that well-done page, which will lead you to the function drupal_add_js .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.