Add "Sign in with Microsoft" button to a WordPress login form

Use this guide if you want to add a Sign in with Microsoft button to your (default or custom) WordPress login form. Doing so would give your users the choice of signing into your website either with their WordPress account or with their Microsoft (work, school or personal) account when you are have the WordPress + Office 365 plugin installed.

Add Sign in with Microsoft button anywhere

Adding a button anywhere on your website to allow your users to sign into your website with their Microsoft / Azure AD account is easy. Simply add the following HTML snippet ...

<div id="wpo365OpenIdRedirect">
	<button onclick="window.wpo365.pintraRedirect.toMsOnline()">
		Sign in with Microsoft
	</button>
</div>

... with the help of a Custom HTML (Gutenberg) editor block as shown below.

If you want users who click the link to be redirected to a specific post or page, for example to https://your-website/your-post/, after they successfully signed in with Microsoft then you can update the snippet as shown below.

<div id="wpo365OpenIdRedirect">
	<button onclick="window.wpo365.pintraRedirect.toMsOnline('', 'https://your-website/your-post/')">Sign in with Microsoft</button>
</div>

Adding the button to the login Form

To add the button to the login file, you should edit your (child) theme's functions.php file and add an action that hooks into the login_form hook and a function that will be executed whenever the hook fires.

The following example helps you to create a button similar to the one created by the WPO365 | LOGIN plugin itself.

Configuring Dual login (optionally)

Finally, perform the following steps to enable Dual login but hide the default Dual login message. Without Dual login, users will be sent directly to Microsoft and would not have the choice to sign into your website with their WordPress account.

• Navigate to WP Admin > WPO365 > Login / Logout and check Dual login V2 as well as Hide SSO Link.