Adding the ‘Login with Google’ button to any page on your site

The easiest way to add a Login with Google button anywhere on your site is to add the following link anywhere you would like a customer to be able to “Login with Google”:

/wp-login.php?gaautologin=true

For example, in HTML:

<a href="/wp-login.php?gaautologin=true">Login with Google</a>

This would have to leave the current page in order to go through the Google login flow. However, depending on how your site is set up, this may not land on the page you expect after Google has authenticated. To control the page it returns to after authentication, try adding a redirect_to parameter as follows in this example:

/wp-login.php?gaautologin=true&redirect_to=http://mysite.com/comebackhere/

(the redirect_to should really be URL-encoded, but it will often work if you can’t do this)

Hiding the ‘Login with Google’ button from the wp-login.php page

You may have only installed Google Apps Login in order to use an extension plugin such as Google Drive Embedder, but not actually want your users to see the ‘Login with Google’ button on your login page (nor be able to use its functionality).

There is no native way to turn off the Login functionality, but it should be possible to add some CSS code to your Theme to override the styles and hide the login button etc.

You could add the following CSS to your child theme’s style.css file:

form#loginform p.galogin, form#loginform p.galogin-powered, form#loginform p.galogin-or, form#loginform h3.galogin-or {
    display: none !important;
}

The above is a suggestion based on the default WordPress configuration, but hopefully you can adapt to match your theme if needed – or your web designer can do this for you.

If your theme’s styles aren’t pulling through to the login page, you might need to write some code to inject the CSS directly, perhaps from your Theme’s functions.php file:

function my_login_styles() {
?>
  <style type="text/css">
    form#loginform p.galogin, form#loginform p.galogin-powered, form#loginform p.galogin-or, form#loginform h3.galogin-or {
        display: none !important;
    }
    </style>
<?php
}

add_action('login_enqueue_scripts', 'my_login_styles');

Please remember to keep a backup copy of functions.php since entering the code incorrectly could break your site.