Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

    Overwriting WordPress plugin javascript files

    Overwriting WordPress plugin javascript files

    CHALLENGE: change the content of the .js file without editing plugin source code

    SOLUTION: use the script_loader_tag hook

    WordPress is a popular CMS that uses plugins to extend its functionality. Sometimes, we need to customize the way the plugin works. For the PHP part – we can often use filters and actions prepared by the author of the plugin. The customization of plugin behavior by using filters ensures future compatibility with new plugin versions.

    Deregistering the file

    To customize the .js file, which is included in the plugin, we can follow a typical solution: dequeue and deregister the plugin file and enqueue our new file (with new content). The downside of this solution is that now the order of the .js file can be different. Also, it might not work correctly if the plugin used wp_localize_script for translating javascript strings.

    Overwriting javascripts

    We’re going to force the plugin to use our .js file instead of the originally enqueued file. Using the script_loader_tag filter, we can check when the file loads and replace the path to the file. The new file will be stored in our child-theme assets directory. We need to know 2 things: script handle (used in the wp_enqueue_script function) and script original path.

    /**
     * Way of replacing original wordpress plugin .js file
     * ( to overwrite file code without editing plugin source code )
     */
    add_filter("script_loader_tag", "ct_script_loader_tag3", 90, 2);
    function ct_script_loader_tag3($tag, $handle){
        if('contact-form-7-js' !== $handle){
            return $tag;
        }
        $new_file =  'themes/child-theme/assets/js/custom-contact-form-7.js';
        return str_replace( 'plugins/contact-form-7/includes/js/index.js', $new_file, $tag );
    }

    Troubleshooting

    • I use cache / minify / autoptimize plugin for JS concatenation and the ‘script_loader_tag’ filter doesn’t work
    • Try to change filter priority or add a particular javascript file to the ‘ignored list’ / excluded files in cache plugin settings.

    Make sure you follow us for other useful tips.

    Comments
    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    A game changer for WooCommerce users
    • Our Highlights

    A game changer for WooCommerce users

    March 24, 2023 by createIT
    The differences between a web app and a mobile app
    • Services
    • Technology
    • Trends

    The differences between a web app and a mobile app

    March 7, 2023 by createIT
    Webrooming and showrooming
    • Trends

    Webrooming and showrooming

    February 14, 2023 by createIT
    PHPStorm – fix long load time of a directory window
    • Dev Tips and Tricks

    PHPStorm – fix long load time of a directory window

    January 20, 2023 by createIT
    reCAPTCHA v3 – WordPress implementation
    • Dev Tips and Tricks

    reCAPTCHA v3 – WordPress implementation

    January 20, 2023 by createIT
    How to compare GIT and server files
    • Dev Tips and Tricks

    How to compare GIT and server files

    January 19, 2023 by createIT
    How to trigger a click event inside iframe?
    • Dev Tips and Tricks

    How to trigger a click event inside iframe?

    January 19, 2023 by createIT
    FOOEvents – generate a custom CSV report
    • Dev Tips and Tricks

    FOOEvents – generate a custom CSV report

    January 19, 2023 by createIT
    Headless chrome – testing webgl using playwright
    • Dev Tips and Tricks

    Headless chrome – testing webgl using playwright

    January 18, 2023 by createIT
    Preview big SQL files with PilotEdit
    • Dev Tips and Tricks

    Preview big SQL files with PilotEdit

    January 18, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us