Adding our own Javascript into child theme

[magicss]

How do I add my own Javascript into Jumpstart? I thought it was as easy as a Custom CSS File…

I am working with my developer. She says this:
I am struggling with couple of issues with js file here. it worked with my custom css file but not with jquery.

Firstly I have my custom myScript.js and the jquery-min.js file in the child theme assests/js/myScript.js.

I registerd and enqueued in my function.php file in child theme and also added that in the header.php file between script tags also .

But for some reason It is linking to my parent theme.

secondly if
it’s pulling the js from my parent jump start theme it is not even executing the first jquery line from there too.
For now, I just have an alert statement to test…it’s not taking that.

If you need any file to look at it. please let me know. Thanks again for your help.

jQuery(document).ready(function(){
alert(‘test’);
});

Topic

[Wendell Harness]

Jason may have a better answer, but I recently added Backstretch to my WPJS child theme and here’s how I did it. It’s not tailored to your specific situation, but hopefully it will help.

In functions.php of the child theme:

add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );
function custom_enqueue_scripts() {

	//* Load scripts only if custom background is being used
	if ( ! get_background_image() )
		return;

	wp_enqueue_script( 'custom-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/assets/js/backstretch.js', array( 'jquery' ), '2.0.4' );
	wp_enqueue_script( 'custom-backstretch-set', get_bloginfo('stylesheet_directory').'/assets/js/backstretch-set.js' , array( 'jquery', 'custom-backstretch' ), '1.0.0' );

	wp_localize_script( 'custom-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );

}

I placed my Backstretch javascript files in my child theme at public_html/wp-content/themes/[insert-child-theme-name-here]/assets/js/

The code above calls them from there.

[Jason Bobich]

Hello,

There’s nothing really specific to Jump Start here. You’re just enqueing your script in the standard way from your child theme’s functions.php.

Here’s a basic example:

function my_scripts() {
	wp_enqueue_script( 'my-script', get_stylesheet_directory_uri().'/example.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Documentation: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Firstly I have my custom myScript.js and the jquery-min.js file in the child theme assests/js/myScript.js.

You don’t need the jquery-min.js file. WordPress already has this file, and Jump Start already enqueues it. And in the above code example I gave you, I put “jquery” in the $deps array passed in, which means jQuery is required to be loaded above your script.

… and also added that in the header.php file between script tags also .

You never add anything to header.php. The above code example will hook into WordPress’s wp_head() function, which is the header.php of every WordPress theme.

But for some reason It is linking to my parent theme.

When you’re using a child theme, it’s important that you use get_stylesheet_directory_uri() to retrieve the URL to your child theme directory.

If you use get_template_directory_uri(), it will pull the parent theme’s theme URL.

secondly if
it’s pulling the js from my parent jump start theme it is not even executing the first jquery line from there too.
For now, I just have an alert statement to test…it’s not taking that.

Try to get familiar with what’s happening when you’re doing all this. When you’re enqueueing these scripts and messing with your code, view the source on the frontend of your website, and see where these items are getting inserted.

[Herb Trevathan]

this was helpful, Thank You

[Author]

Replies