send popup after wp_redirect()

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.

Related Posts: