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 Resources
![[ BBQ Pro: Advanced WordPress Firewall ]](/wp/wp-content/uploads/go/250x250-bbq-pro.jpg)
![[ Wizard’s Collection: SQL Recipes for WordPress ]](/wp/wp-content/uploads/go/250x250-wizards-sql.png)
![[ Digging Into WordPress ]](/wp/wp-content/uploads/go/250x250-digging-into-wordpress.jpg)
![[ Blackhole Pro: Trap and Block Bad Bots ]](/wp/wp-content/uploads/go/250x250-blackhole-pro.jpg)
![[ USP Pro - User Submitted Posts ]](/wp/wp-content/uploads/go/250x250-usp-pro.jpg)
![[ .htaccess made easy ]](/wp/wp-content/uploads/go/250x250-htaccess-made-easy.jpg)