Adding JS to dante child theme

[Keith]

Hi
New to WP
I have added a child theme to Dante so easier to alter some things and functions.php works fine

However how do i add a different js file?

Looked on web and got this from codex

(added into \wp-content\themes\dante-child\functions.php)
add_action( ‘wp_print_scripts’, ‘child_overwrite_scripts’, 100 );

function child_overwrite_scripts() {
wp_deregister_script( ‘sf-functions’, SF_LOCAL_PATH . ‘/js/functions.js’ );
wp_register_script( ‘sf-functions’, SF_LOCAL_PATH . ‘/js/functions.js’, ‘jquery’, NULL, TRUE );
}

the Deregister part works ok but what is wrong with the register code for the child js?

Thanks

[Kyle – SUPPORT]

Hi

The easiest way to add custom JS is by adding it to Theme Options > Custom CSS/JS

– Kyle

[Keith]

Hi Kyle
Thanks for that
However if I do that will it be preserved when I update the theme (and where will it be saved)?

Also I actually wanted to change some of the code in an existing function – surely your suggestion will not apply to that?

Specifically at this point I wanted to reduce the padding-top on the page-heading.fancy-heading from 120px to say 50px
When I just changed it in the css stylesheet it was over-ridden by the js in the theme (I think) in the headerOverlaySet: function() { part of the functions.js

That is what I wish to resolve

Thanks

[Kyle – SUPPORT]

Hi

If you want to edit the JS that is already in the theme, you would need to edit the functions.js file, however you can’t add this file to your child theme. For CSS instances, you can override the theme css with !important if need be. In this case you just need to add this to your custom css:

.page-heading.fancy-heading {
  padding-top: 50px;
  padding-bottom: 50px;
}

Oh, and the theme options > custom css & js will not be overwritten when you update the theme, it is saved in the database

– Kyle

[Keith]

Hi Kyle

That is what I did initially and as I said in my first email it did NOT work

I then looked at the source code to see why not and saw that the js (presumably) had written in a style for padding-top which was then what was used by the browser (checked in Web Developer)- NOT the value that I had in the css…

Surely it is possible to over-ride js functions using child themes for Dante (as I believe you can with other Themes) else you would need to remember all changes that you had made to effectively core code (I thought that was the point of child themes and why WP had introduced them?)

Cheers

[Kyle – SUPPORT]

Try:

.page-heading.fancy-heading {
  padding-top: 50px!important;
  padding-bottom: 50px!important;
}

That definitely works

– Kyle

[Keith]

Hi Kyle

Yes the !important makes all the difference!

You didn’t respond to my question about the child theme and js files?

thanks
Keith

[Kyle – SUPPORT]

Will check this with Mohammad, he will be with your shortly

– Kyle

[wired_pl]

Looking for the same answer.
Namely, I want permanently remove some part of a code from js/functions.js
I think the easiest it would be to overwrite functions.js by adding it to child theme.

[Mohammad – SUPPORT]

Hi,
Please create a directory named js at child theme directory. Now place functions.js at /dante-child/js/ and edit it as you want.
Now insert this code at

<?php
function remove_scripts(){
wp_deregister_script('sf-functions' );
wp_register_script('sf-functions-new', SF_LOCAL_PATH . '/js/functions.js', 'jquery', NULL, TRUE);
if (!is_admin()) {
		    	wp_enqueue_script('sf-functions');
		    }
}
add_action( 'wp_enqueue_scripts', 'remove_scripts', 100 );
?>

Thanks
Mohammad

[wired_pl]

Hello Mohammad,
Where this code should be placed?
I added it to dante-child/functions.php but this just removes themes/dante/js/functions.js 🙁

[Mohammad – SUPPORT]

Hi,
We can only remove the js file. Because override rule dont work with JS files. So i removed the parent functions.js and added new functions.js file.
Thanks
Mohammad

[wired_pl]

I see, but problem is that I don’t see dante-child/js/functions.js in a page code. Looks that new functions.js is not added by this function.

[David Martin – Support]

Hey,

Looks like a small typo, in the code provided change this wp_enqueue_script('sf-functions'); to this wp_enqueue_script('sf-functions-new');.

Thanks,
David.