WP-Mix

A fresh mix of code snippets and tutorials

WordPress Trigger and Target Interim Login Screen

Our previous post on WordPress login parameters is very complete. Or so I thought. But I had forgotten about the “Interim Login Screen”. The interim login screen is displayed when you are working in the WP Admin Area and for some reason the session expires and you are logged out.

Screenshot

So we’re all on the same page (so to speak), here is a screenshot of the WordPress Interim Login Screen.

How it works

In the WordPress Admin Area, there is a modal login panel that is displayed if the user is logged out (for whatever reason). Internally, this login prompt is referred to as “Interim”. Under the hood, what’s happening is that the WordPress Heartbeat API continuously polls the current session for any changes. The WordPress handbook explains further how it works:

“When the page loads, the client-side heartbeat code sets up an interval (called the “tick”) to run every 15-60 seconds. When it runs, heartbeat gathers data to send via a jQuery event, then sends this to the server and waits for a response. On the server, an admin-ajax handler takes the passed data, prepares a response, filters the response, then returns the data in JSON format. The client receives this data and fires a final jQuery event to indicate the data has been received.”

Specifically for the interim login prompt, the Heartbeat API checks the response of a periodic/interval authorization check. If it returns true, then WordPress knows that the session is active and no action is taken. Else if it returns false, then the login authorization has expired, and the interim login modal window is displayed.

How to trigger the interim login

Because the interim functionality is managed by events, it is possible to manually trigger the interim login screen by entering the following in the browser console:

jQuery(document).trigger('heartbeat-tick.wp-auth-check', [ {'wp-auth-check': false} ]);

So log in to WordPress Admin Area, then open the browser console and enter that command. Immediately upon doing so, WordPress will think you no longer are authenticated and so display the interim login window. Try it and see, it is very simple and effective.

How to target the interim login

Once you are able to call the interim login on demand, you can work on any development, testing, customization, etc. that may be necessary for your project. For example, if you are modifying the styling of the interim login screen, you can target the on-screen elements with the following CSS selector:

body.interim-login {}

That class exists on the <body> element for the interim login screen. For more selectors, use the code inspector provided by your web browser. Lots of useful hooks to play with :)

Learn more

WordPress Themes In Depth