---
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
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?

## Key Takeaways

- WP Login & Register widget from The Plus Addons for Elementor allows adding a Google login to an Elementor website.
- Users must generate a Google Client ID through the Google Developers Console to enable Google login.
- The Google One Tap Login toggle can be enabled to automatically prompt users to log in via Google.
- The Plus Addons for Elementor requires installation and activation to access the WP Login & Register widget features.

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.

## Frequently Asked Questions

**Q: What if I can't generate a Google Client ID?**
A: If you encounter issues generating a Google Client ID, ensure you are logged into your Google account and have created a project in the Google Developers Console. If you haven't created a project, click the CREATE PROJECT link, add your project name, and proceed. Missing project creation is a common oversight that can prevent you from obtaining the Client ID.

**Q: Can I add a Google login to any WordPress site?**
A: You can only add a Google login to WordPress sites using The Plus Addons for Elementor. This plugin provides the WP Login & Register widget, which is necessary for integrating Google login functionality. Make sure The Plus Addons for Elementor is installed and activated to access this feature.

**Q: What settings work best for enabling Google Login?**
A: When enabling Google Login in the WP Login & Register widget, it's best to enable the Google toggle from the Social Login/Register tab. Additionally, consider enabling the Google One Tap Login toggle for a smoother user experience, as it prompts users to log in via Google automatically. This can significantly enhance user engagement.

**Q: What happens if I forget to add authorized redirect URLs?**
A: If you forget to add authorized redirect URLs when creating your Google Client ID, users will experience login errors when attempting to authenticate via Google. It's crucial to include your website URL as an authorized redirect URL to ensure a seamless login process. This detail is essential for the integration to function correctly.

**Q: Is there a way to customize the Google login button?**
A: You can customize the Google login button in the WP Login & Register widget by selecting options for button type, theme, shape, and size. This flexibility allows you to match the button style with your website's design. Customization helps maintain visual consistency and can improve user experience.

**Q: What should I do if the Google login option isn't showing up?**
A: If the Google login option isn't showing up, check that you have correctly entered your Google Client ID in The Plus Addons settings. Additionally, verify that the Google toggle is enabled in the Social Login/Register tab of the WP Login & Register widget. Both steps are necessary for the Google login feature to appear.