How to import my own javascript into a custom theme?

Try this in template.php and put the script in the /js folder in your subtheme

function omega_preprocess_page(&$variables) {
drupal_add_js(path_to_theme() . '/js/test.js');
}

I'd like to second this comment on custom scripts not firing for 3.0.

I've tried all four solutions listed on getting a custom .js file added and I can't get the script to load (clearing cache each time).

If anyone else has a step-by-step solution that they have used within a subtheme of the Omega theme since the release on Aug. 23 on enabling custom.js (or whatever.js), please share.

Okay... i see that you edited the .info file as well... no need for that!
- Create a new folder in your custom theme called 'js' like 'themes/customtheme/js ( do NOT put it in omega/omega/js)
- Insert the following code to your custom themes template.php

function omega_preprocess_page(&$variables) {
drupal_add_js(path_to_theme() . '/js/yourjavascriptfile.js');
}

- Clear cashes... and check if it shows in the source code of your browser.

below a snippet of my template.php

function omega_preprocess_page(&$variables) {



  if ($variables['node']->type == "content" && arg(2) != 'edit' && arg(2) != 'delete') {

	

	$variables['theme_hook_suggestion'] = 'page__node__content';

	drupal_add_js(path_to_theme() . '/js/sound.js');

   }



	drupal_add_js(path_to_theme() . '/js/popup.js');

	drupal_add_js('http://www.absoluteurl.com/sites/all/modules/disqus/disqus.js');

}

as you can see, I have one js file that only loads for one specific content type. The other 2 load on all pages.

Tx makeapage

The Omega Starterkit I got was missing some things, which was leading to some weird stuff.

Got it though!

I can't seem to get the js file working. It was fine in omega 2x as I just added scripts[] = script.js to the .info file.

I'm fairly new to drupal and have researched adding js files to themes, however to no success. I'm not sure what i'm doing wrong. I added to template.php of my subtheme

function omega_preprocess_page(&$variables) {
drupal_add_js(path_to_theme() . '/js/jquery-scripts.js');
}

AND the below in js/jquery-scripts.js file

(function ($) {
		var scroll_timer;
		var displayed = false;
		var $message = $('#message a');
		var $window = $(window);
		var top = $(document.body).children(0).position().top;
		$window.scroll(function () {
			window.clearTimeout(scroll_timer);
			scroll_timer = window.setTimeout(function () {
				if($window.scrollTop() <= top)
				{
					displayed = false;
					$message.fadeOut(500);
				}
				else if(displayed == false)
				{
					displayed = true;
					$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
				}
			}, 100);
		});
	}(jQuery));

I've cleared the cache several times.
Could anybody tell me what i'm doing wrong. Many thanks.

Nevermind - solution found

Building a subtheme using the starterkit with omega_7.x-3.0 the path_to_theme() seems to be consistently returning the path to omega rather than the subtheme. This seems to be a Drupal core issue http://drupal.org/node/1026156

Simple hack to correct the path (and I'm not really certain why it is necessary), but wanted to note for others stumbling along this path.

In mysubtheme template.php:

function omega_preprocess_page(&$variables) {
drupal_add_js(str_replace('omega/omega', 'mysubthemename', path_to_theme()) . '/js/idfgcustom.js');
}

kingfisher64, now that you found the solution to your problem, do you think you could share it?

Thanks.

Can you share the solution?

yep, sorry. just download the latest omega version and add

scripts[] = script.js to the .info file of the theme you wish to use. Personally i'd create a subtheme using http://drupal.org/project/omega_tools

obviously repleace script with whatever your filename is

For me it's loading the js-file before the page rendering process. So the javascript code I have does not get applied at all, as no page exists yet. That's why it seems as it is not working.

So what would the correct declarations be inside the javascript file?

OK, I solved this by adding javascripts' window.onload function before the code:

window.onload = function() {
	(function ($) {

		// Start your jQuery code here

		alert("Foo!");

		// End your jQuery code here

	}(jQuery));
}

In my case, if I left out the first and last rows, the alert box pops up before the page rendering. The above code makes it appear in correct order.

Hope this helps someone with a similar problem. A question though: is this still the correct way to do it?

I think this solution will load the JS file in all pages.
Is there a way to call your JS code only in home page?

I am having the same issue. I've added the correct link to my js files in my .info file. I've wrapped my jQuery in the correct syntax:

(function($) {

// Code goes here

})(jQuery);

And still nothing. Console gives me an error (Uncaught Syntax error, unrecognized expression: [href=/"my themes base URL on my development system"/])

I've been trying my hardest to figure this out, but so far nothing has worked for me. I feel like it shouldn't be this difficult to add a simple jQuery file (that works) to our subtheme so we may access it for use in our pages.

I was able to correct this problem by wrapping my code in a window.onload function. But is this the proper method for resolving the problem?

The correct syntax is }(jQuery));

You can add the script on your subtheme.info file using the example below:

libraries[subtheme_script][name] = The name to be shown on the administration page 
libraries[subtheme_script][description] = Some description.
libraries[subtheme_script][js][0][file] = script_name.js

Notice that you must add the file to a js folder in your subtheme (i.e. sites/all/themes/subtheme/js/script_name.js) in order to your file can be found.
I recommend that you you clear cache after you update your .info file.
You also have to formally inform Omega that you'd like to use it by going to your subtheme settings page under Appearance > Settings > [Subtheme name] and checking the box corresponding to your file on the Toggle libraries tab.

For the drupal_add_js solution you have to follow this example:

function THEMENAME_alpha_preprocess_html(&$variables) {
  if (/* Some Condition */) {
    drupal_add_js(path_to_theme() . '/js/script_name.js');
  }
}

REVAGOMEZ IS THE MAN!

The instructions in the Omega Documentation are wrong!

There is a lot of discussions about where is the best place to put your scripts; the header or footer.
see #784626: Default all JS to the footer, allow asset libraries to force their JS to the header for some excellent discussions on this - not clear cut bu any means!

In Omega you can influence this too; so to build on revagomes' excellent example:

libraries[subtheme_script][name] = The name to be shown on the administration page
libraries[subtheme_script][description] = Some description.
libraries[subtheme_script][js][0][file] = script_name.js
libraries[subtheme_script][js][0][options][scope] = footer
libraries[subtheme_script][js][0][options][group] = JS_THEME
libraries[subtheme_script][js][0][options][weight] = 1

This will then add your script (see function alpha_libraries_include() { in Omega/alpha/includes/alpha.inc) and respect your options.

Hello, i have the same problem that it doesn't load my js file.
everyone keeps talking about the template.php but i don't have such a file. i have
html.tpl.php
page.tpl.php
template.info
and my style.css file am i missing out on a file or? This is how my teacher told me eitherway.
So the code that you have given must been placed where?

Many thanks :)

Thank you Drupov, the window.load technique has worked great for me. I also noticed that the code was loading before the page, but I didn't know how to get around the problem. Thank you!

if you want to include the js via hook_preprocess_page you should do shomething like this:

<?php
function NAME_OF_SUBTHEME_preprocess_page(&$variables) {
    drupal_add_js(drupal_get_path('theme','NAME_OF_SUBTHEME').'/libraries/libname/libname-min.js');
}
?>