extrenal javascript using child theme

ThemeShaper Forums » Thematic

extrenal javascript using child theme

(11 posts)

Started 2 years ago by aceinnovations
Latest reply from eirik
This topic is resolved

Tags:

aceinnovations
Member

Hi! Thanks for the framework and great docs etc. I've successfully (so far) been able to port my theme to a child of Thematic ... very cool.

I'm not sure how to best go about adding a reference to external javascript files (and, while I'm asking, where to store those files).

I was originally thinking something like this:

// add stuff in <head>
function my_wp_head(){
echo '<script type="text/javascript" src="' . get_bloginfo('template_url') . '/javascript/prototype.js"></script>';
echo '<script type="text/javascript" src="' . get_bloginfo('template_url') . '/javascript/javascript.js"></script>';
}
add_action('wp_head', 'my_wp_head');

and storing the files in a subdirectory "javascript" of my child theme directory. However, get_bloginfo('template_url') returns the parent theme's directory (Thematic of course).

I'd rather not spit out inline JS if I don't have to... Any advice?

Posted 2 years ago #
killtheliterate
Member

i've been trying to add inline JS, but it seems as if it doesn't load...
not that it has much to do with what you're asking, but if i can load it with a function, maybe it will start to work

Posted 2 years ago #
aceinnovations
Member

Not sure what exactly you're trying, but if I put the following in my child theme's functions.php I do get the alert I'm testing for when I refresh the page.

function my_wp_head(){
echo '<script type="text/javascript">alert(\'hi\');</script>';
}
add_action('wp_head', 'my_wp_head');

Posted 2 years ago #
killtheliterate
Member

i'm trying to load a script called easyslider... i'm calling the script source now using that function, but the actual script part;

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>

how would i call that using the function file?

Posted 2 years ago #
amygail
Member

This may help
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Posted 2 years ago #
aceinnovations
Member

Ya I ended up wp_enqueue'ing the script. My only gripe is the closest to the child theme directory I could find was get_bloginfo('stylesheet_directory').

// queue up my custom javascript
function my_init_method() {
wp_enqueue_script('javascript', get_bloginfo('stylesheet_directory') . '/javascript/javascript.js', array('jquery'));
}
add_action('init', my_init_method);

Posted 2 years ago #
amygail
Member

OH - maybe what you want to do is define your own directories(?)

This is what I'm using (obviously you'd change the names)

`
// Define constant paths (PHP files)
define( BURNTSUGAR_DIR, STYLESHEETPATH );

// Define constant paths (other file types)
$sugar_dir = get_stylesheet_directory_uri();
define( BURNTSUGAR_JS, $burntsugar_dir . '/js' );'

Posted 2 years ago #
amygail
Member
I'm sorry -I was in a rush earlier and I think you've already worked this out - bt just in case...

killtheliterate you can try this in your functions.php
```
function easyslider() { ?>
    		<script type="text/javascript">
		jQuery(document).ready(function(){
		jQuery("#slider").easySlider();
		});
		</script

	<?php
}
 add_action( 'thematic_after', 'easyslider' );
```
(I changed all the $ to jQuery to avoid and conflicts)
Posted 2 years ago #
killtheliterate
Member

i went ahead and put the script in the functions file instead of in the header... might be imagining this, but it seems like the script is a bit snappier that way. thank you!

Posted 2 years ago #
amygail
Member

it's possible that it's snappier - it's also nice to load the scripts last (thematic_after) - seems to speed up my overall page load time

Posted 2 years ago #
eirik
Member

Great tips guys, this helps me bigtime. Cheers

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.