Having difficulty overriding JS files and controlling their specific placement in a WordPress child theme

I'm trying to override 2 different JS files in my WordPress site's child theme, and am running into some major difficulty.

Here is the site URL: https://staging.royalpalm.com/

My goal is to change these 2 lines ..

<script type='text/javascript' src='https://royalpalm.com/wp-content/themes/houzez/js/houzez_ajax_calls.js?ver=1.5.7.3'></script>
<script type='text/javascript' src='https://royalpalm.com/wp-content/themes/houzez/js/custom.js?ver=1.5.7.3'></script>

Open in new window


To this:

<script type='text/javascript' src='https://royalpalm.com/wp-content/themes/houzez-child/js/houzez_ajax_calls.js?ver=1.5.7.3'></script>
<script type='text/javascript' src='https://royalpalm.com/wp-content/themes/houzez-child/js/custom.js?ver=1.5.7.3'></script>

Open in new window



This is what I currently have in my functions.php file .. in attempt to override these 2 JS files:

------------------------------------------------------------------------------

function remove_scripts() {
    wp_dequeue_script( 'houzez_ajax_calls' );
    wp_dequeue_script( 'houzez-custom' );    
}

add_action( 'wp_print_scripts', 'remove_scripts' );

wp_enqueue_script('myscript_ajax_calls', get_stylesheet_directory_uri() . '/js/houzez_ajax_calls.js', array('jquery'), null, true);

wp_enqueue_script('myscript_custom', get_stylesheet_directory_uri() . '/js/custom.js', array('houzez_ajax_calls'), null, true);

Open in new window


.. But I'm not able to dequeue the "houzes_ajax_calls" script for some reason.  I'm able to insert the houzes_ajax_calls.js file from my child theme, .. but the placement of it is incorrect (above the localized script that references "var HOUZEZ_ajaxcalls_vars" ) .. and the houzes_ajax_calls.js file 's now being duplicated.

If you view the underlying source code for the homepage, you'll see that the problem starts at around line #3690:

https://staging.royalpalm.com/

What am I doing wrong here?  And more importantly, how can I control the specific placement of the JS files in the bottom footer?

- Yvan
egoselfaxisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gr8gonzoConsultantCommented:
Try adding a late priority of 100 to the action:
add_action( 'wp_print_scripts', 'remove_scripts', 100);
0
rgranlundCommented:
You are not initializing from the Child Theme.  I will look and see if I can find exactly the syntax, but in the enque you need to reference the parent theme
0
Chris StanyonWebDevCommented:
In your code, you're dequeuing the scripts registered with the handles of houzez_ajax_calls and houzez custom, which is correct. However, you then enqueue your own scripts, telling the custom.js file that it has a dependency on the script registered with the handle of houzez_ajax_calls, so it gets added back in. Remove that dependency and it won't reload it:

wp_enqueue_script('myscript_custom', get_stylesheet_directory_uri() . '/js/custom.js', null, null, true);

You should also be queuing your scripts in an action, so they get added at the right time. Set a high priority (100 for example) so they get loaded later in the chain:

function my_scripts() {
    wp_enqueue_script('myscript_ajax_calls', get_stylesheet_directory_uri() . '/js/houzez_ajax_calls.js', array('jquery'), null, true);
    wp_enqueue_script('myscript_custom', get_stylesheet_directory_uri() . '/js/custom.js', null, null, true);
} 
add_action( 'wp_enqueue_scripts', 'my_scripts', 100);

Open in new window

Not sure where your variable data is coming from so you may need to re-queue that as well.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Chris StanyonWebDevCommented:
As an addition to what I've just said, you can dictate the order of your own scripts by passing in a dependency on your other script:

wp_enqueue_script('myscript_ajax_calls', get_stylesheet_directory_uri() . '/js/houzez_ajax_calls.js', array('jquery'), null, true);
wp_enqueue_script('myscript_custom', get_stylesheet_directory_uri() . '/js/custom.js', array('myscript_ajax_calls'), null, true);

This way your houzez_ajax_calls script will be inserted before your custom scripts
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
egoselfaxisAuthor Commented:
Chris -- your suggestions are working (thank you) , .. but for whatever reason, when I dequeue the houzez_ajax_calls.js script and load my own from my child theme -- it's  also removing the localized script that references "var HOUZEZ_ajaxcalls_vars" (which I believe the houzez_ajax_calls.js script is dependent upon in order to initialize properly).  

This is the updated code that I've added to my functions.php file:

function remove_scripts() {
    wp_dequeue_script( 'houzez_ajax_calls' );
    wp_dequeue_script( 'houzez-custom' );    
}

add_action( 'wp_print_scripts', 'remove_scripts' ); 

function add_scripts() {
    wp_enqueue_script('myscript_ajax_calls', get_stylesheet_directory_uri() . '/js/houzez_ajax_calls.js', array('jquery'), null, true);    
    wp_enqueue_script('myscript_custom', get_stylesheet_directory_uri() . '/js/custom.js', null, null, true);
} 

add_action( 'wp_enqueue_scripts', 'add_scripts', 100);

Open in new window


Also .. here is a link to the unmodified production version of the website that you can use as a reference, as it demonstrates the correct sequence for the scripts that I'm trying to reproduce (code starts at around line #3614):

https://royalpalm.com/

- Yvan
0
egoselfaxisAuthor Commented:
UPDATE: I found this code in one of my PHP files .. but it's unclear how I would deregister it and then enqueue it in my functions.php file:

       wp_localize_script('houzez_ajax_calls', 'HOUZEZ_ajaxcalls_vars',
            array(
                'admin_url' => get_admin_url(),
                'houzez_rtl' => $houzez_rtl,
                'redirect_type' => $after_login_redirect,
                'login_redirect' => $login_redirect,
                'login_loading' => esc_html__('Sending user info, please wait...', 'houzez'),
                'direct_pay_text' => esc_html__('Processing, Please wait...', 'houzez'),
                'user_id' => $userID,
                'transparent_menu' => $fave_main_menu_trans,
                'simple_logo' => $simple_logo,
                'retina_logo' => $retina_logo_url,
                'retina_logo_mobile' => $retina_mobilelogo_url,
                'retina_logo_mobile_splash' => $retina_logo_mobile_splash,
                'retina_logo_splash' => $retina_splash_logo_url,
                'retina_logo_height' => $retina_logo_height,
                'retina_logo_width' => $retina_logo_width,
                'property_lat' => $property_lat,
                'property_lng' => $property_lng,
                'property_map' => $property_map,
                'property_map_street' => $property_streetView,
                'is_singular_property' => $is_singular_property,
                'process_loader_refresh' => 'fa fa-spin fa-refresh',
                'process_loader_spinner' => 'fa fa-spin fa-spinner',
                'process_loader_circle' => 'fa fa-spin fa-circle-o-notch',
                'process_loader_cog' => 'fa fa-spin fa-cog',
                'success_icon' => 'fa fa-check',
                'set_as_featured' => esc_html__('Set as Featured', 'houzez'),
                'remove_featured' => esc_html__('Remove From Featured', 'houzez'),
                'prop_featured' => esc_html__('Featured', 'houzez'),
                'featured_listings_none' => esc_html__('You have used all the "Featured" listings in your package.', 'houzez'),
                'prop_sent_for_approval' => esc_html__('Sent for Approval', 'houzez'),
                'paypal_connecting' => esc_html__('Connecting to paypal, Please wait... ', 'houzez'),
                'mollie_connecting' => esc_html__('Connecting to mollie, Please wait... ', 'houzez'),
                'confirm' => esc_html__('Are you sure you want to delete?', 'houzez'),
                'confirm_featured' => esc_html__('Are you sure you want to make this a featured listing?', 'houzez'),
                'confirm_featured_remove' => esc_html__('Are you sure you want to remove from featured listing?', 'houzez'),
                'confirm_relist' => esc_html__('Are you sure you want to relist this property?', 'houzez'),
                'delete_property' => esc_html__('Processing, please wait...', 'houzez'),
                'delete_confirmation' => esc_html__('Are you sure you want to delete?', 'houzez'),
                'not_found' => esc_html__("We didn't find any results", 'houzez'),
                'for_rent' => $advanced_search_rent_status,
                'for_rent_price_range' => $advanced_search_price_range_rent_status,
                'currency_symbol' => $currency_symbol,
                'advanced_search_widget_min_price' => $advanced_search_widget_min_price,
                'advanced_search_widget_max_price' => $advanced_search_widget_max_price,
                'advanced_search_min_price_range_for_rent' => $advanced_search_min_price_range_for_rent,
                'advanced_search_max_price_range_for_rent' => $advanced_search_max_price_range_for_rent,
                'advanced_search_widget_min_area' => $advanced_search_widget_min_area,
                'advanced_search_widget_max_area' => $advanced_search_widget_max_area,
                'advanced_search_price_slide' => houzez_option('adv_search_price_slider'),
                'fave_page_template' => basename(get_page_template()),
                'google_map_style' => houzez_option('googlemap_stype'),
                'googlemap_default_zoom' => $googlemap_zoom_level,
                'googlemap_pin_cluster' => $googlemap_pin_cluster,
                'googlemap_zoom_cluster' => $googlemap_zoom_cluster,
                'map_icons_path' => get_template_directory_uri() . '/images/map/',
                'infoboxClose' => get_template_directory_uri() . '/images/map/close.png',
                'clusterIcon' => $clusterIcon,
                'google_map_needed' => $google_map_needed,
                'paged' => $paged,
                'search_result_page' => $search_result_page,
                'search_keyword' => stripslashes($search_keyword),
                'search_country' => $search_country,
                'search_state' => $search_state,
                'search_city' => $search_city,
                'search_feature' => $search_feature,
                'search_area' => $search_area,
                'search_status' => $search_status,
                'search_label' => $search_label,
                'search_type' => $search_type,
                'search_bedrooms' => $search_bedrooms,
                'search_bathrooms' => $search_bathrooms,
                'search_min_price' => $search_min_price,
                'search_max_price' => $search_max_price,
                'search_currency' => $search_currency,
                'search_min_area' => $search_min_area,
                'search_max_area' => $search_max_area,
                'search_property_id' => $search_property_id,
                'search_publish_date' => $search_publish_date,
                'search_no_posts' => $prop_no_halfmap,

                'search_location' => $search_location,
                'use_radius' => $use_radius,
                'search_lat' => $search_lat,
                'search_long' => $search_long,
                'search_radius' => $search_radius,

                'transportation' => esc_html__('Transportation', 'houzez'),
                'supermarket' => esc_html__('Supermarket', 'houzez'),
                'schools' => esc_html__('Schools', 'houzez'),
                'libraries' => esc_html__('Libraries', 'houzez'),
                'pharmacies' => esc_html__('Pharmacies', 'houzez'),
                'hospitals' => esc_html__('Hospitals', 'houzez'),
                'sort_by' => $sort_by,
                'measurement_updating_msg' => esc_html__('Updating, Please wait...', 'houzez'),
                'autosearch_text' => esc_html__('Searching...', 'houzez'),
                'currency_updating_msg' => esc_html__('Updating Currency, Please wait...', 'houzez'),
                'currency_position' => houzez_option('currency_position'),
                'submission_currency' => houzez_option('currency_paid_submission'),
                'wire_transfer_text' => esc_html__('To be paid', 'houzez'),
                'direct_pay_thanks' => esc_html__('Thank you. Please check your email for payment instructions.', 'houzez'),
                'direct_payment_title' => esc_html__('Direct Payment Instructions', 'houzez'),
                'direct_payment_button' => esc_html__('SEND ME THE INVOICE', 'houzez'),
                'direct_payment_details' => houzez_option('direct_payment_instruction'),
                'measurement_unit' => $measurement_unit_adv_search,
                'header_map_selected_city' => $header_map_selected_city,
                'thousands_separator' => $thousands_separator,
                'current_tempalte' => $current_template,
                'monthly_payment' => esc_html__('Monthly Payment', 'houzez'),
                'weekly_payment' => esc_html__('Weekly Payment', 'houzez'),
                'bi_weekly_payment' => esc_html__('Bi-Weekly Payment', 'houzez'),
                'compare_button_url' => houzez_get_template_link_2('template/template-compare.php'),
                'template_thankyou' => houzez_get_template_link('template/template-thankyou.php'),
                'compare_page_not_found' => esc_html__('Please create page using compare properties template', 'houzez'),
                'property_detail_top' => esc_attr($property_top_area),
                'keyword_search_field' => $keyword_field,
                'keyword_autocomplete' => $keyword_autocomplete,
                'houzez_date_language' => $houzez_date_language,
                'houzez_default_radius' => $houzez_default_radius,
                'enable_radius_search' => $enable_radius_search,
                'enable_radius_search_halfmap' => $enable_radius_search_halfmap,
                'houzez_primary_color' => $houzez_primary_color,
                'geocomplete_country' => $geocomplete_country,
                'houzez_logged_in' => $houzez_logged_in,
                'ipinfo_location' => houzez_option('ipinfo_location'),
                'gallery_autoplay' => houzez_option('gallery_autoplay'),
                'stripe_page' => houzez_get_template_link('template/template-stripe-charge.php'),
                'twocheckout_page' => houzez_get_template_link('template/template-2checkout.php'),
                'custom_fields' => json_encode($custom_fields_array),
                'houzez_reCaptcha' => $enable_reCaptcha
            )
        ); // end ajax calls

Open in new window

0
Chris StanyonWebDevCommented:
You don't really register or unregister a localised script. The idea is that you pass in the handle of your scripts and then when you enqueue them, the localised data will be added in. You need to call the localize function AFTER you enqueue the scripts. I think what you'll need to do is dequeue the original script and then requeue your own script using the same handle. For that, remove your remove_scripts function altogether, and wrap the dequeue and enqueue into one function call with a relatively high priority:

function add_scripts() {
    wp_dequeue_script( 'houzez_ajax_calls' ); // dequeue the parent houzez_ajax_calls 
    wp_dequeue_script( 'houzez-custom' );  

    // now enqueue your own version, but use the same houzez_ajax_calls handle
    wp_enqueue_script('houzez_ajax_calls', get_stylesheet_directory_uri() . '/js/houzez_ajax_calls.js', array('jquery'), null, true);
    wp_enqueue_script('myscript_custom', get_stylesheet_directory_uri() . '/js/custom.js', null, null, true);
 }
add_action( 'wp_enqueue_scripts', 'add_scripts', 100);

Open in new window

That should place your own script in the footer with the correct localised data stored in the JS variable.
0
egoselfaxisAuthor Commented:
I tried exactly what you've suggested, but it's now loading the houzez_ajax_calls.js script from the parent theme instead of the child theme:

https://staging.royalpalm.com/

- Yvan
0
Chris StanyonWebDevCommented:
Post up the code from your functions.php (child) file and I'll take a look
0
egoselfaxisAuthor Commented:
function add_scripts() {
    wp_dequeue_script( 'houzez_ajax_calls' ); // dequeue the parent houzez_ajax_calls 
    wp_dequeue_script( 'houzez-custom' );  

    // now enqueue your own version, but use the same houzez_ajax_calls handle
    wp_enqueue_script('houzez_ajax_calls', get_stylesheet_directory_uri() . '/js/houzez_ajax_calls.js', array('jquery'), null, true);
    wp_enqueue_script('myscript_custom', get_stylesheet_directory_uri() . '/js/custom.js', null, null, true);
 }
add_action( 'wp_enqueue_scripts', 'add_scripts', 100);

Open in new window

0
egoselfaxisAuthor Commented:
Any suggestions?
0
Chris StanyonWebDevCommented:
Hmmm. Not at the moment. I've been too busy to look into in more detail. In theory, the code you have should work, and I don't know why it doesn't. I'll try and take another look shortly and come back to you.
0
egoselfaxisAuthor Commented:
I can't seem to award anyone any points.  Is the site broken or something?
0
egoselfaxisAuthor Commented:
I was only able to override the custom.js file, and have given up on trying to override the other JS file. Thanks for your help.
0
Chris StanyonWebDevCommented:
Sorry we couldn't get it completely working. All the stuff I read indicates that we were doing things right. I just haven't had any time to look into it further - it may just be down to an upgrade in WordPress that prevents this from doing what it's supposed to do (it could even be bug!)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.