send popup after wp_redirect()

Question

Hello Wordpress Developer,

I want to ask about how to send popup after wp_redirect(); I'm sending link to user for verify. I just want to let user know that the verify process is done.

Here is the code:

class edu002_verifyAccount{

    static function verify(){
        global $wpdb;
        $em = filter_input(INPUT_GET, "em");
        $tk = filter_input(INPUT_GET, "tk");
        $url = site_url();

        $registered_date = date( 'Y-m-d H:i:s', current_time( 'timestamp', 0 ) );  
 
        $newsletter_db = $wpdb->get_row( $wpdb->prepare("SELECT * FROM {$wpdb->prefix}newsletter_subscribe WHERE email = '$em'", ARRAY_A));

        ob_start();

        if($newsletter_db){
            $user_token = $wpdb->get_row( $wpdb->prepare("SELECT * FROM {$wpdb->prefix}user_token WHERE token = '$tk'", ARRAY_A));

            if($user_token){
                if(time() - $user_token->date_created < (60*60*24)){
                    $wpdb->update($wpdb->prefix . 'newsletter_subscribe', ["status" => 1, "subscribe_date" => $registered_date], ["email" => $em]);
                    $wpdb->delete($wpdb->prefix . 'user_token', ['email' => $em]);
                    //send popup

                    wp_redirect($url);
                    exit;


                }else{
                    //sendpopup

                    $wpdb->delete($wpdb->prefix . 'newsletter_subscribe', ['email' => $em]);
                    $wpdb->delete($wpdb->prefix . 'user_token', ['email' => $em]);

                }

            } else{

                if(($tk != $user_token) === true){
                  //sendpopup
                    wp_redirect($url);    
                    exit;
         
                }

            }

        } else{

            if(($em != $newsletter_db->email) === true){
                //sendpopup   

                wp_redirect($url);    
                exit;

            }

        }

        return ob_get_clean(); 


    }

}

Oh, I forgot. I'm using this hook:

add_action ('template_redirect', array( 'edu002_verifyAccount', 'verify'));

I use window.location, still not working.

All answer is much appreciated. Thank you in advance.

Best Regards

Hendra

Answer 1

In general, the easiest way to implement such functionality is just to append some parameter to the URL using add_query_arg() and then trigger a popup at the destination if that parameter is set.

There are many, many ways to actually consume the parameter and create the popup - both via PHP as well JavaScript.

Below is an example of one such possibility, which simply adds a <dialog> element to the footer of the site if the parameter is set.

I recommend against using the example verbatim - it's not terribly optimal and glosses over compatibility issues with the <dialog> element, and generally likely takes more elbow grease to make as pretty as any UI/modal library which your site may already have available to use. It is mostly for illustrative purposes alone.

// Append a trigger parameter to the redirect URL.
wp_redirect(
  add_query_arg(
    'wpse40792_popup',
    'verification_complete'
    $url
  )
);

// Register our new URL parameter so WordPress will parse it.
function wpse407962_add_popup_param( $vars ) {
  $vars[] = 'wpse40792_popup';

  return $vars;
}

add_filter( 'query_vars', 'wpse407962_add_popup_param' );

// Test for the parameter when printing the footer, and add some markup if present.
function wpse407962_popup_dialog() {
  $popup_id = get_query_var( 'wpse40792_popup' );

  if( empty( $popup_id ) )
    return;

  $messages = [
    'verification_complete' => 'Your account has been verified!'
  ];

  ?>
    <dialog id="wpse407962-popup" open>
      <div>
        <p><?php echo __( $messages[ $popup_id ], 'wpse407962' ); ?>
      </div>
      <div>
        <button>OK</button>
      </div>
    </dialog>

    <script>
      window.addEventListener( 'DOMContentLoaded', () => {
        const dialog = document.getElementById( 'wpse407962-popup' );

        dialog.showModal();
      } );
    </script>
  <?php
}

add_action( 'wp_footer', 'wpse407962_popup_dialog' );

Another possibility would be to keep a popup initialization routine in globally enqueued JavaScript and triggering it JS-side by checking the URL. Or PHP-side, by checking the query var and conditionally calling wp_localize_script() to set up a JS global with the translated string.