---
title: "How to Add a Google Login to WordPress with Elementor?"
url: https://theplusaddons.com/docs/add-a-google-login-to-wordpress-with-elementor/
date: 2024-05-16
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "Do you want to add a Google login to your Elementor website? By allowing users to log in with their Google accounts, you not only make the login process seamless..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-a-Google-Login-to-WordPress-with-Elementor_-1024x536.jpg
word_count: 707
---

# How to Add a Google Login to WordPress with Elementor?

## 

- Integrates Google login using the WP Login & Register widget from The Plus Addons for Elementor.
- Requires generating a Google Client ID through the Google Developers Console.
- Enables Google One Tap Login for seamless user authentication on Elementor sites.
- Allows customization of button type, theme, shape, and size in the WP Login & Register widget settings.

Do you want to add a Google login to your Elementor website? By allowing users to log in with their Google accounts, you not only make the login process seamless but also add a layer of security.

With the WP Login & Register widget from The Plus Addons for Elementor, you can easily add a Google login to your Elementor website.

*To check the complete feature overview documentation of The Plus Addons for Elementor WP Login & Register widget, [click here](https://theplusaddons.com/docs/create-a-login-register-form-in-elementor/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

First, you have to generate your **Google Client ID**.

### Generate Google Client ID

1. For this, you have to login to your Google account and go to the [Google Developers Console](https://console.developers.google.com/).

2. If you don’t have any project created then click on **CREATE PROJECT **link.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Create-Project.png)

3. On the next screen add your **Project name** and click the **CREATE** button.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Give-Project-Name.png)

4. Then click on the **OAuth consent screen** on the left sidebar.

![](https://theplusaddons.com/wp-content/uploads/2024/05/OAuth-consent-screen.png)

5. On that page, select the User Type and click the **CREATE** button.

- Internal – Only available to users within your organization.

- External – Available to any user with a Google Account.

![](https://theplusaddons.com/wp-content/uploads/2024/05/OAuth-consent-screen-1.png)

6. On the next page, add your app information. **App name**, **User support email** and **Developer contact information** fields are mandatory rest are optional until you deploy your app.

Then click on the **SAVE AND CONTINUE** button. 

![](https://theplusaddons.com/wp-content/uploads/2024/05/Save-and-Continue.png)

7. On the Scopes page, click the **SAVE AND CONTINUE** button.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Scopes.png)

8. Also on the Test users page, click the **SAVE AND CONTINUE** button.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Test-Users.png)

9. On the Summary page, click the **BACK TO DASHBOARD **button at the bottom.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Summary-page.png)

10. On the next page, click on the **PUBLISH APP** button to publish your app.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Publish-App.png)

11. Once done click on **Credentials** in the left sidebar.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Credentials.png)

10. On the Credentials page, from the top, click on **+ CREATE CREDENTIALS** > **OAuth client ID**.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Create-Credentials.png)

11. Then from the **Application type** dropdown, select **Web application**.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Create-oAuth-Client-ID.png)

12. Once you select the option then, you have to add the following details.

• **Name** - Add your application name.

• **Authorised JavaScript origins** - Click the **ADD URI** button to add your website URL - Example: *http://www.yourwebsite.com*.

• **Authorised redirect URLs** - Click the **ADD URI** button to add your website URL - Example: *http://www.yourwebsite.com*.

Once done, click on the **CREATE** button.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Click-Create.png)

13. On the next page, you’ll get your **Client ID** and **Client Secret,** copy and paste them in a notepad. 

![](https://theplusaddons.com/wp-content/uploads/2024/05/Client-ID.png)

### Add Google Client ID in The Plus Addons for Elementor

Once you have your Google Client ID, go to

- **The Plus Addons → Extra Options → Settings** 

- Scroll down to the **Login with Google** section then click on the Setting Icon and you can see the **Login with Google** popup section**. **

- Then in the Popup section paste your **Google Client ID** and click on **Save**.

![](https://theplusaddons.com/wp-content/uploads/2024/05/login-register-google-client-id-settings.gif)

### Enable Google Login in the WP Login & Register widget

Add the WP Login & Register widget on the page and follow the steps - 

1. Select the appropriate form type (except Forgot Password) from the **Type** dropdown under the **Forms Layout** tab.

2. Then enable the **Google** toggle from the **Social Login/Register** tab.

![](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-google-login.gif)

You can enable the **Google One Tap Login** toggle, to automatically show a popup asking the user to log in via Google.

But if you don’t enable **Google One Tap Login**, you’ll see a few more options.

**Type** - From here, you can choose the button type, Standard or Icon.

**Theme** - From here, you can select different button themes.

**Shape** - From here, you can select different button shapes.

**Text** - From here, you can choose from different button texts for the Standard button.

**Size** - From here, you can select the button size.

By enabling the **Long Title** toggle, you can show 

From the **Alignment,** you can align the button in the form.

Then in the **Redirect URL** field, you can add a page link to redirect users to a specific page after login.

By enabling the **Hide Form** toggle, you can hide the manual form and only keep the Google login button.

This is how easily you can add a Google login option to your Elementor website.