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

Use this guide if you want to add a custom SSO (Single Sign-on) / Sign in with Microsoft button to your website.

Add Sign in with Microsoft button anywhere

Please note This article describes how you can add a fully custom button anywhere to your site using HTML and CSS. Alternatively, you can use a built-in shortcode to render (optionally a customized version of) the out-of-the-box WPO365 Sign in with Microsoft button, as explained in this guide.

Adding a button anywhere on your website to allow your users to sign into your website with their Microsoft / Azure AD account is easy.

Start editing your custom login page where you want to add the button.
Add a new Custom HTML Gutenberg Editor block to the page.
Copy the HTML code below and paste it in the block that you just added.

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

Please Note The first line [wpo365-redirect-script] is a so-called WordPress shortcode and is required starting with WPO365 version 32.0. The shortcode is responsible for loading the necessary JavaScript prerequisites.

At this point, your page should look 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.

[wpo365-redirect-script]
<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.