Why is my javascript not invoked in my hooks except wp_head?

Question

I am asking in the last instance because I am totally confused after not being able to invoke custom javascript functions for 2 days straight. I am new to Wordpress plugin developmnet as my background is Java and NodeJS and I simply can't understand why my code is not working.

I want to append a script in the html head based on the success event of a login, logout, and some other stuff. So I thought I could hook into the wp_registration, wp_login function and so on, enrich some data for the call and send this to a custom javascript. However the custom javascript is only invoked when I am calling the php function in the wp_head hook or by doing add_action ('wp_enqueue_scripts', 'my_function' ); and never in the hook function where I need the invocation.

For testing purposes I have installed a clean Wordpress instance and have added the following function in my plugin:

function my_function() {
    wp_register_script( 'custom-script', plugin_dir_url( __FILE__ ) . 'hook-test.js' );
    wp_enqueue_script('custom-script');

    $testVars = array(
            'test' => __('I should see something!'),
    );

    wp_localize_script('custom-script', 'test_script_vars', $testVars);
}

Now how can I use this in the form (or with an analogous functionality): add_action('wp_login', 'my_function'); ?

The javascript is never executed. But when I am doing add_action('wp_head', 'my_function'); and add_action ('wp_enqueue_scripts', 'my_function'); it is...

I am welcoming any explanation and advice. Can't imagine this is so hard to achieve...

Answer 1

WordPress has various hooks to enqueue scripts in different areas.

For the front end it's wp_enqueue_scripts, for the back end it's admin_enqueue_scripts, and for the login page it's login_enqueue_scripts.

I don't know Ultimate Members, but if it uses wp-login.php the login_enqueue_scripts hook should work.

If um_user_registration is called somewhere else on the front end though, you should totally be able to enqueue some JavaScript when hooking into um_user_registration. It will just be added to the footer.

The same with the wp_login hook. As long as this hook is called before wp_footer() in your theme, you should be able to enqueue any scripts directly.

Answer 2

As it turned out it was not a matter of my code but of the fact that you cannot echo some custom javascript inside the 'wp_login' hook. What I did to solve this is to call set_transient inside my wp_login hook and then checking in the wp_head if there is any transient set. In this case I am echoing my javascript script and deleting the transient afterwards, as explained in this answer: Run javascript code after wp_login hook?

My code now is:

/**
 * Register scripts used for pushing in the dataLayer
 */
function add_my_scripts() {
    wp_register_script( 'custom-script', plugin_dir_url( __FILE__ ) . 'js/append_user_status.js' );
}

/**
 * Set transient in wp_login hook function
 */
function wp_login_hook( $user_login ) {
    set_transient( $user_login, '1', 0 );
}

/**
 * Add wp_login_hook as wp_login hook function
 */
add_action( 'wp_login', 'wp_login_hook' );

/**
 * Check if there is a transient set and echo js script in wp_head hook
 */
function echo_javascript_after_wp_login() {
    global $current_user;

    if ( ! is_user_logged_in() )
        return;

    if ( ! get_transient( $current_user->user_login ) )
        return;

    $testVars = array(
            'test' => __('I should see something!'),
    );
    wp_enqueue_script ( 'custom-script' );
    wp_localize_script('custom-script', 'test_script_vars', $testVars);
    delete_transient( $current_user->user_login );
}

/**
 * Add echo_javascript_after_wp_login function as wp_head hook
 */
add_action ('wp_head', 'echo_javascript_after_wp_login', 9 );

If there are no additions to this, I will mark it as the answer to the question to help possibly other beginners in wordpress plugin development.

Answer 3

That hook will be deprecated in Ultimate Member 2.0.

Beside that, have you added the actual hook with do_action in the header.php file of your theme? It is necessary for add_action to work.

I'm not sure it's the best soulution though.

I would rather register the script separately, "localize" it separately at um_user_registration (or its new equivalent on 2.0) and enqueue it conditionally using some function from Ultimate Member if available or a result of the registration stored ad hoc in usermeta if not available.