0

I've built a child theme of Divi Theme to use with Buddypress. So far so good, except for a script conflict on commenting buttons.

The theme load a javascript (js/custom.js at 2642:2662) with the following function:

    $( 'a[href*=#]:not([href=#])' ).click( function() {
        if ( $(this).closest( '.woocommerce-tabs' ).length && $(this).closest( '.tabs' ).length ) {
            return false;
        }

        if ( location.pathname.replace( /^\//,'' ) == this.pathname.replace( /^\//,'' ) && location.hostname == this.hostname ) {
            var target = $( this.hash );
            target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' );
            if ( target.length ) {
                et_pb_smooth_scroll( target, false, 800 );

                if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
                        setTimeout(function(){
                        et_pb_smooth_scroll( target, false, 200);
                    }, 500 );
                }

                return false;
            }
        }
    });

This event target the same button that Buddypress use for commenting, preventing AJAX form from loading on click.

enter image description here

I don't want to edit the parent theme (custom.js). How can I prevent this conflict? Is there a workaround, maybe from functions.php?

UPDATE

Using wp_dequeue_script to load that script later, didn't work. When using this code in functions.php

function de_script() {
    wp_dequeue_script( 'divi-custom-script' );
}
add_action( 'wp_print_scripts', 'de_script', 100 );

then the full script (custom.js) was not loaded at all.

  • why is this a wordpress specific question? – Mark Kaplun Mar 1 '15 at 16:19
  • I'm trying to build a child theme for wordpress. Maybe should be more generic? Something like "how to unbind a specific piece of javascript loaded from the parent theme, when developing a child theme". – Giulio Bonanome Mar 1 '15 at 16:31
  • exactly, it is a question about conflict resolution between two JS libraries, whatever is the solution it will have very little to do with wordpress unless your question is how to enqueue and dequeue JS files. – Mark Kaplun Mar 1 '15 at 17:48
  • It is a question on how to handle conflict between javascript when developing child themes on wordpress. Sorry but I'm missing your point. Do you think the question should be edited? How? – Giulio Bonanome Mar 1 '15 at 18:24
  • 1
    there is no general conflict handling and each conflict has it own resolution. Once you know what type of resolution will work for you people can help you to implement it in the context of wordpress but for that first step you need JS experts not wordpress experts. – Mark Kaplun Mar 2 '15 at 4:13
1

First of all, to resolve the javascript conflict I've set up a simple tl_custom.js under my theme js/ folder, with the following code

jQuery(document).ready(function($) {
    //  Remove handler set by themes/Divi/js/custom.js at line 2642
    $( 'a[href*=#]:not([href=#])' ).off();
});

Then I add the script with the following code in functions.php

function tl_custom_scripts() {
    if ( ! is_admin() ) {
        $scriptsrc = get_stylesheet_directory_uri() . '/js/';
        wp_register_script( 'tl_custom', $scriptsrc . 'tl_custom.js', '', '', true );
        wp_enqueue_script( 'tl_custom' );
    }
}
add_action( 'wp_enqueue_scripts', 'tl_custom_scripts', 20 );

The main problem is that the parent theme register custom.js in the footer, so I had to set the wp_register_script last parameter to true and then set add_action priority to 20.

1

I just ran into this same problem with my premium theme not having buddypress support. Disabling the click event removes the ability to have scrollto page anchors which I have on one of my interior pages. So I just target the buddypress class to enable the comment/reply buttons.

if ( $('body').hasClass('buddypress') ) {

    $( 'a[href*=#]:not([href=#])' ).off();

}

I placed the code in a custom.js file in my child theme then enqueued the resource from functions.php. Make sure the file is enqueued after the premium theme's js.

0

From a purely WordPress perspective, the only solution I see would be to copy the script to your child theme and make edits to it to remove the conflict. If the parent theme uses get_template_directory_uri to reference the path to the script, you'll also have to dequeue the original, and enqueue your modified version. If the script is loaded using get_stylesheet_directory_uri, then simply mirroring the same hierarchy in your child theme will correctly override the script without having to do anything else.

Of course, the issue will be with parent theme updates adding or modifying that script file, you will have to monitor each update to insure your updated theme is not broken or missing functionality.

0

I might be off track here, but would removing the return false; from the javascript you posted help?

return false; in a click function is like saying:

   event.preventDefault();
   event.stopPropagation();

I think this is why your other function is not firing as there is no restriction to having multiple handlers bound to the same event on an element. However removing the return false; may cause you other issues.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.