how do i link to the js files that reside in my child theme? WordPress
- SOLVED
i'm using coyier's BLANK Theme. I've created a child theme.
i've registered jquery in the functions file in the parent theme using:
// Load jQuery
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}
in the header.php file in my child theme, i've linked to the jquery plugins i'm using:
<script src="<?php bloginfo('template_url'); ?>/js/jquery.movingboxes.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.jscrollpane.min.js"></script>
and i've registered the jquery so it's working fine. nothing's broken.
what's bothering me is that i don't want to keep those jquery plugins in the js file of the PARENT.
how do i link to those same js files if they reside in the js folder of my CHILD THEME?
url: [[LINK href="http://drupal.bucktowndigital.com"]]drupal.bucktowndigital.com[[/LINK]]
not sure if that came out: it's drupal.bucktowndigital.com
thank you!
Answers (5)
Jens Filipsson answers:
<?php echo get_stylesheet_directory_uri().'/js/file.js'; ?>
<strong>edit, just to be clear:</strong>
<script src="<?php echo get_stylesheet_directory_uri().'/js/file.js'; ?></script>
Victor Teixeira answers:
Don't add the script directly on the header.php file.
Add this to the functions.php:
wp_enqueue_script( 'movingboxes', get_stylesheet_directory_uri() .'/js/jquery.movingboxes.js', array ( 'jquery' ), null, true );
wp_enqueue_script( 'jscrollpane', get_stylesheet_directory_uri() .'/js/jquery.jscrollpane.min.js', array ( 'jquery' ), null, true );
Ashfame answers:
Victor's method is right but personally I would do them this way.
In functions.php first I will register them so that I can call them by name.
wp_register_script( 'movingboxes', get_stylesheet_directory_uri() .'/js/jquery.movingboxes.js', array ( 'jquery' ), null, true );
wp_register_script( 'jscrollpane', get_stylesheet_directory_uri() .'/js/jquery.jscrollpane.min.js', array ( 'jquery' ), null, true );
Now when I need them, I can just call them to be loaded by this code
wp_enqueue_script( 'movingboxes' );
wp_enqueue_script( 'jscrollpane' );
This gives an advantage to conditionally load them only when required and if you want to load them on all pages, then you can directly enqueue them how Victor's solution did.
Let me know if you have any questions. :)
sergi comments:
how do you "just call them to be loaded by this code?" let's say I want that script to only load on template-portfolio.php
would i do the following:
<?php if(is_page_template(‘template-portfolio.php’)) { ?>
<scrript src=”<?php bloginfo(‘template_url’); ?>jscrollpane”>
<?php } ?>
Ashfame comments:
No, Something like
<?php if(is_page_template(‘template-portfolio.php’)) { ?>
wp_enqueue_script( 'jscrollpane' );
<?php } ?>
once you have registered it like this
<?php wp_register_script( 'jscrollpane', get_stylesheet_directory_uri() .'/js/jquery.jscrollpane.min.js', array ( 'jquery' ), null, true ); ?>
Similarly for any other script.
Advantage of using wp_enqueue_script is that it will only be loaded once if you call it multiple times and its dependencies (which we have specified) are loaded before it. So if some other script is also loading jQuery as its dependencies like this, it will be loaded only once. I hope I made myself clear. :)
Ashfame comments:
And regarding your other query, this is how it is used
<blockquote>If child theme is used
get stylesheet directory() - responds to child theme</blockquote>
get_template_directory() - responds to parent theme
<blockquote>If child theme is not used
get stylesheet directory() - responds to parent theme
get_template_directory() - responds to parent theme
Parent theme in the sense that its the only direct theme being used</blockquote>
Utkarsh Kukreti answers:
Use bloginfo('stylesheet_directory') to point to the child theme's directory.