Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Alton Caber
2,709 PointsHaving issues linking js in function.php of WP child theme
NEED HELP:
I have created a child theme and just trying something to override the parent themes main.js file.
Here is a my site url: http://altoncaber3.com/?page_id=251 The parent theme is Bogoh
I added this code to the functions.php file:
<?php
//Load custom_script.js (This is my custom js file, which is inside the js folder)
function theme_js() {
wp_enqueue_script('custom_script', get_template_directory_uri() . '/js/custom_script.js', array('jquery'), '', true);
};
add_action('wp_enqueue_scripts', 'theme_js');
?>
ERROR message prompts:
Warning: Cannot modify header information - headers already sent by (output started at /home/content/53/10014153/html/wp-content/themes/main-bogoh/bogoh-child/functions.php:23) in /home/content/53/10014153/html/wp-content/plugins/wpclef/includes/lib/wp-session/class-wp-session.php on line 124
The Code in my custom_script.js is a copy of the parent just with changes in height of the header:
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 1) {
jQuery('#header').css('position', 'fixed');
//jQuery('#header').css('height', '60');
jQuery('#header').css('height', '70');
jQuery('.menu ul > li > a').css('padding', '20');
jQuery('h1.site-title').css('font-size', '40px');
jQuery('.site-title').css('margin', '0');
jQuery('.logo-image').css('margin', '15px 0');
jQuery('.logo img').css('max-width', '60%');
jQuery('#mobile-menu').css('margin-top', '10px');
} else {
jQuery('#header').css('position', 'relative');
//jQuery('#header').css('height', '100');
jQuery('#header').css('height', '150');
jQuery('.menu ul > li > a').css('padding', '40px 20px');
jQuery('h1.site-title').css('font-size', '50px');
jQuery('.site-title').css('margin', '20px auto');
jQuery('.logo-image').css('margin', '30px 0');
jQuery('.logo img').css('max-width', '100%');
jQuery('#mobile-menu').css('margin-top', '30px');
}
});
I followed examples on-line and still can't figure out what's wrong. If there is any other info I need to supply to help with answer please let me know...Thanks!!!
Ryan Duchene
Courses Plus Student 46,022 PointsI edited your post to add syntax highlighting. :)
Alton Caber
2,709 Points@ Ryan Duchene thank you for the edit.
@ Tristan Eason Thank you, I did what you said and it fixed the error message :). However I don't understand how it was pulling it twice when I commented out the code. I'm new to Wordpress and though that since it was using PHP I could just comment it out Wordpress would see it twice.
Still can't get the wp_enqueue_script to work. I viewed the source code in Firebug and see that it's still pulling from the main parent theme and not the child-Theme. I looked at several examples and copied the code from them and tweaked a few things to try to get it to work, and no luck. I don't know if there is something wrong with my code or what I need to do. Had no issues getting the CSS to Import, Just the script in the functions.php.
6 Answers
Christopher Rebacz
10,904 PointsYou are right...with as many things going on in the theme, you probably don't want to deregister the parent script. You seem to be on the right track (adding a higher priority to your action, making sure it is loading in the footer like the parent them js). You are just missing the dependency to the main js file when you are enqueuing the custom_script.js file.
I would remove the function overwrite_parent_js, and modify the my_scripts_method to this:
function my_scripts_method() {
// register your script location and dependencies
wp_enqueue_script('custom_script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
array('jquery', 'mainjs'), '', true
);
// enqueue the script
wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method', 100);
What I changed from your example is:
- Delete the function overwrite_parent_js and the accompanying add_action calls.
- Uncomment the add action for the my_scripts_method.
- Added 'mainjs' to the array of dependencies in your wp_enqueue_script function.
I just tested this quickly here, and it is loading the custom_script after the mainjs file.
Hope this helps!
Alton Caber
2,709 PointsThat worked !!!
So happy...many kudos to you and all your help !!!!! :)
Glad to see I was in the right ball field and just a few more tweaks were needed.
Zac Gordon
Treehouse Guest TeacherWhat I meant is this link doesn't work:
http://altoncaber3.com/wp-content/themes/main-bogoh/bogoh/js/custom_script.js?ver=4.0
That is what the code is outputting. What is the correct link to the file and when you paste it in the browser, does it bring up the correct file? This is what we need to get first, then we can figure out the code to make it link correctly.
Alton Caber
2,709 Pointsok gotcha,
here's the direct file path for the link:
http://altoncaber3.com/wp-content/themes/main-bogoh/bogoh-child/js/custom_script.js
here's the file path when the code is correctly outputted WordPress:
http://altoncaber3.com/wp-content/themes/main-bogoh/bogoh-child/js/custom_script.js?ver=4.0
Both of these links take me to the correct file when copying into the browser.
Christopher Rebacz
10,904 PointsNot sure if you have this answered, but since you are using a child-theme, you need to use get stylesheet directory rather than get_template_directory.
wp_enqueue_script('custom_script', get_stylesheet_directory_uri() . '/js/custom_script.js', array('jquery'), '', true);
The template directory will refer to your parent theme; to point towards your child theme directory, you will want to use get_stylesheet_directory_uri().
Alton Caber
2,709 PointsAwesome! I got the code to include thanks to your help.
I'm nearly there now!
The file path is correct now for the JS file, but it not picking up the code.
When I look at the page source code in the browser, it seems to include (load ) the custom script file before the main
parent theme JS file.
I'm thinking if this load prior like CSS, then code is being over-written with parent them JS file code.
Is there a way to force the custom JS file to load after the parent theme JS ?
Zac Gordon
Treehouse Guest TeacherHi, I see that file loading in the source code, but it looks like the link doesn't work. Can you double check it's in the right place and you can even see it in the source code and click on it to see if it's a valid link.
Alton Caber
2,709 PointsThanks Zac for the suggestion,
I have clicked on the source code link and it give me a 404.
When I moved the code in the header or footer and got an error message: Warning: Cannot modify header information
It seems to work best in the functions.php file. I checked the file path that it references and it's correct.
However when I did a: var_dump(get_template_directory_uri()); It tells me I'm still in the parent theme bogoh. Not sure if I'm correct and in thinking that there is an issue with the get_template_directory_uri(). As it's not referencing being inside the child theme.
I tried to activate the parent and re-activate the child theme I been using to see if it would help and that didn't work either.
Not sure what I can to :(
Christopher Rebacz
10,904 PointsSo there are a couple of ways to do this:
- A common approach is to just deregister the parent-theme js file so that it doesn't get loaded from the parent theme at all. To deregister the parent-theme js, you need to get the script 'handle'; just look at how the parent theme enqueues that js file to find out what it is. Let's assume it is 'parent_script'.
<?php
function overwrite_parent_js () {
wp_deregister_script ('parent_script');
}
add_action ('wp_print_scripts', 'overwrite_parent_js');
Using this approach, you can, for example, copy all of the contents of the parent-theme js file into your custom js file before any of your custom content. What's nice is that you have reduced the number of js files being served to your site (which is good for performance), and it follows a similar mindset as to what you do with other child-theme files (i.e., overwrite the parent theme file with your own code).
- Another option is to take advantage of registering and enqueueing scripts: In your case, if you want the custom JS to load after the parent theme JS, you will need to identify the parent theme JS as a dependency when you register your custom JS file. This lets Wordpress know that you need the parent theme JS loaded before loading your custom JS. To do this, you just need to include the handle of the parent script to your array of dependencies (which currently has jQuery).
<?php
wp_register_script('custom_script', get_stylesheet_directory_uri() . '/js/custom_script.js', array('jquery', 'parent_script'), '', true);
wp_enqueue_script('custom_script');
?>
I know you can just do all of this within enqueue script, but I really like registering the script first. Registering the script just lets Wordpress know how to handle the script if you ever need to load it. It won't load it until you call it. What's nice about this approach is that if you don't need something on a particular page, you can easily create conditionals as to when that script should be loaded.
Alton Caber
2,709 PointsFirst off I would like to thank you for all your help and time !!! Unfortunately I tried the both methods over the past several days, and had no luck getting either to work. My theme that I have has a page builder option in addition to the standard theme. So I'm not sure if other themes are this complex to change. I'm thinking of eventually getting a frameworks like Genesis. However, I really like this theme and am trying to adapt it.
Here's my parents function theme: http://altoncaber3.com/wp-content/themes/main-bogoh/bogoh/function.php
I went into the http://altoncaber3.com/wp-content/themes/main-bogoh/bogoh/inc/function/custom.php Where I found what I think enqueues the script:
<?php
// LET'S enqueue NECESSARY SCRIPT
function add_our_scripts() {
if (!is_admin()) {
wp_register_script( 'mainjs', AKMANDA_DIR.'/js/main.js');
//load the scripts and style.
wp_enqueue_script('mainjs');
}
}
add_action( 'wp_footer', 'add_our_scripts',0);
// LET'S enqueue NECESSARY STYLES
function add_our_styles() {
if (!is_admin()) {
wp_register_script('isotope', AKMANDA_DIR . '/js/isotope.min.js');
wp_register_script('portfolio', AKMANDA_DIR . '/js/portfolio.js');
wp_register_script('prettyPhoto', AKMANDA_DIR . '/js/prettyPhoto.js');
wp_register_script('plugins', AKMANDA_DIR . '/js/plugins.js');
wp_register_script('respond', AKMANDA_DIR. '/js/respond.js' );
wp_register_style( 'font', AKMANDA_DIR .'/css/font.css');
wp_register_style( 'bootstrap', AKMANDA_DIR .'/css/bootstrap.min.css');
wp_register_style( 'plugin', AKMANDA_DIR .'/css/plugin.css');
wp_enqueue_style( 'bootstrap' );
wp_enqueue_script('plugins');
wp_enqueue_style( 'plugin' );
wp_enqueue_style( 'stylesheet', get_stylesheet_uri() );
wp_enqueue_style( 'font' );
wp_enqueue_script('jquery');
if (preg_match('/MSIE/', $_SERVER['HTTP_USER_AGENT'])) {
wp_enqueue_script('respond');
}
}
}
add_action( 'wp_head', 'add_our_styles',0);
?>
Then I went back into the http://altoncaber3.com/wp-content/themes/main-bogoh/bogoh-child/js/custom_script.js
I placed this piece of code in and it didn't work:
<?php
function my_scripts_method() {
// register your script location and dependencies
wp_enqueue_script('custom_script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
array('jquery'), '', true
);
// enqueue the script
wp_enqueue_script('custom_script');
}
//add_action('wp_enqueue_scripts', 'my_scripts_method', 100);
function overwrite_parent_js () {
wp_deregister_script ('mainjs', AKMANDA_DIR.'/js/main.js');
}
add_action ('wp_print_scripts', 'overwrite_parent_js');
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>
Carrie Carter
7,662 Pointsfollowing this thread also.. having same issues. Had to comment to get email notifications of responses. :)
Tristan Eason
13,400 PointsTristan Eason
13,400 PointsI took a look at your source code and it shows this bit of code first before it actually declares the HTML doctype.
<!--if ( !is_admin() ) { // instruction to only load if it is not the admin area // register your script location, dependencies and version wp_register_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/custom_script.js', array('jquery'), '' );
// enqueue the script wp_enqueue_script('custom_script'); } -->
My guess is that in the two referenced php files, it is trying to load the same custom_scripts.js file twice. How does it behave when you comment out the 'add_action('wp_enqueue_scripts', 'theme_js');' in your functions.php?