Calling a function via a shortcode in javascript

Question

I’m afraid the code you’ve shared is rather wonky and there isn’t just one thing that is backwards. Here are the first few things that came into my mind.

add_filter( ‘learn-press/after-content-item-summary/lp_lesson’,
‘psb_comment_listener_func’);

When you attach a callback function to a filter with add_filter, the callback should return a value. If the callback isn’t supposed to return anything, but for example print something on the screen, then you should generally use add_action to hook the callback to an action. echoing inside a filter may cause unexpected results as the printed content may not appear in the intended place.

function psb_all_comments_func() {…}

The shortcode callback is also supposed to return a string and not echo anything. As noted on the Shortcode API Codex page, “..anything that is echoed will be output to the browser, but it won’t appear in the correct place on the page..“.

Another problematic thing is calling update_option() inside the shortcode callback. The option is updated every time the shortcode is evaluated and executed whether the user clicked anything or not.

As there isn’t any additional details about the option, I assume it is a global option with a single boolean value. Based on this assumption update_option() poses another issue. Unless there is other code, or manual admin intervention, to toggle the option back to true, then its value is set to false for everyone until the end of time when the shortcode is executed the first time.

myFunction(event) {…}

When copying and pasting the script to the browser console '<?php echo do_shortcode(\"[psb_all_comments]\"); ?>'; is evaluated as a plain string, not PHP, and that is why it doesn’t do anything. PHP is a server side language and you can’t execute it with javascript on the frontend.

What to do instead?

I recommend splitting the code into smaller parts by the different responsibilities. Something along these lines,

A separate script file to house the js clicky thing
A PHP function to register the script file for later when needed
A custom WP REST API endpoint and a controller (or admin-ajax.php handler, if you’re not into WP REST API) for receiving js requests and toggling settings in the backend
A callback attached to suitable action for determining, if the script file should be enqueued or not

The script file.

// clicky-script.js
(function(){
    const navPrevElement = document.querySelector('.nav-previous');

    if (navPrevElement) {
        navPrevElement.addEventListener('click', function(event){
            // do something e.g.
            // hide element with js
            // or send ajax request to REST endpoint or admin-ajax.php
        });
    }
})();

The PHP stuff.

// e.g. functions.php
add_action( 'wp_enqueue_scripts', 'wpse_425194_register_script' );
function wpse_425194_register_script() { 
    wp_register_script(
        'wpse_425194_clicky_script', 
        get_template_directory_uri() .'/assets/clicky-script.js',
        array(),
        wp_get_theme()->get( 'Version' ),
        array(
            'strategy' => 'defer',
            'in_footer' => true,
        )
    );
}

add_action( 'template_redirect', 'wpse_425194_enqueue_script' );
function wpse_425194_enqueue_script() {
    if ( is_singular( 'my-post-type' ) ) {
        wp_enqueue_script( 'wpse_425194_clicky_script' );
    }
}

See WP REST API Handbook or Ajax documentation for registering the backend handler.

Related Posts: