Adding javascript to child theme

admin管理员组

文章数量:1130349

I want to apply some javascript to my header and want to know what the best way to implement it is.

here is the source that contains the javascript I'm including - /

Should I create a new javascript file then add it to the child theme, if so then I'm unsure of what to call the file and will it apply to the head from this location?

I want to apply some javascript to my header and want to know what the best way to implement it is.

here is the source that contains the javascript I'm including - https://codepen.io/kaemak/pen/mHyKa/

Should I create a new javascript file then add it to the child theme, if so then I'm unsure of what to call the file and will it apply to the head from this location?

• javascript
• child-theme
• headers

Share Improve this question asked Jun 21, 2018 at 10:31 Jordan Jordan 11111 gold badge11 silver badge33 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 28

You should enqueue the script in child theme's functions.php. for example if name of the js file is custom.js and if you place it under js folder in your child theme, then in functions.php you should add

function my_custom_scripts() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

Here get_stylesheet_directory_uri() will return the directory of your child theme, then array( 'jquery' ) would make your js load after jquery, if your script requires js then you should use this else you can remove or you can add the dependent script here, then the last parameter true, is to make your js load at the footer.

Yes, create a new JavaScript file and just call it wherever you want, I would suggest to call it under footer that's the best way to call js files. You can add below code to your footer:

<script  src="<?php echo get_template_directory_uri(); ?>/filename.js"></script>

I want to apply some javascript to my header and want to know what the best way to implement it is.

here is the source that contains the javascript I'm including - /

Should I create a new javascript file then add it to the child theme, if so then I'm unsure of what to call the file and will it apply to the head from this location?

I want to apply some javascript to my header and want to know what the best way to implement it is.

here is the source that contains the javascript I'm including - https://codepen.io/kaemak/pen/mHyKa/

Should I create a new javascript file then add it to the child theme, if so then I'm unsure of what to call the file and will it apply to the head from this location?

• javascript
• child-theme
• headers

Share Improve this question asked Jun 21, 2018 at 10:31 Jordan Jordan 11111 gold badge11 silver badge33 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 28

You should enqueue the script in child theme's functions.php. for example if name of the js file is custom.js and if you place it under js folder in your child theme, then in functions.php you should add

function my_custom_scripts() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

Here get_stylesheet_directory_uri() will return the directory of your child theme, then array( 'jquery' ) would make your js load after jquery, if your script requires js then you should use this else you can remove or you can add the dependent script here, then the last parameter true, is to make your js load at the footer.

Yes, create a new JavaScript file and just call it wherever you want, I would suggest to call it under footer that's the best way to call js files. You can add below code to your footer:

<script  src="<?php echo get_template_directory_uri(); ?>/filename.js"></script>

本文标签： Adding javascript to child theme