To easily manage and control your event on WordPress, you can swiftly install and employ the use of Google Events Calendar on your site.
How to install the plugin?
Step 1: The plugin would be made available on WordPress PLugin Tab. so, simply log into your WordPress Admin Dashboard.
Step 2: Move to the plugin tab and search for “Google Events Calendar”.
Step 3: “Install” the plugin
Step 4: “Activate plugin” once the installation is completed.
Step 5: Once done, you would see a new tab labeled “GC Events” in your site’s dashboard.
How to link your Google Calendar to WordPress?
The next step is embedding your calendar into WordPress for effective management of your events.
For this, you would need;
- Google API Key
- Google Calendar ID
Once you have successfully installed and activated the plugin, you should have something like this when you open the tab.
Get the required details, fill them in, and save it.
How to get Google API Key?
Step 1: Proceed to Google Cloud Console site.
Step 2: You need to create or select a project to get the API Keys. Create or select a project on which you want the API Keys to be.
Step 3: For a mobile site, click on the menu button on the left side and select Credentials. For desktop sites, just click Credentials as seen at the left-hand side of the screen.
Step 4: On the credential page, click on Create Credentials > Api Key
Your API Key should be written in the lined box. You can copy it. (Remember to restrict to avoid unauthorized use).
Step 5: Click Close.
Step 6: You can view your API Key from the Credential page under API Keys.
How to obtain your Google Calendar ID?
Step 1: Log in to your Google Calendar account.
Step 2: Locate “My Calendar” on the interface, and click the arrow across it.
Step 3: At this point, there should be an event already created on your calendar. Hover around the drop-down events and click the menu sign.
Step 4: Click on “Settings and Sharing”.
Step 5: You should be on the setting page of the calendar. Click on “Access permission for events”.
Step 6: Click to make visible to the public.
Step 7: Scroll down to “Integrate Calendar”. You should find your calendar ID there.
And done.
Copy and paste the required info into the General Settings of Google Events Calendar on WordPress.
General Settings Page
This is the general settings page of the plugin.
As earlier discussed, fill in the required details for Google API Key and Google Calendar ID.
And afterward, select a preferred Events layout. You can choose between Grid, List, Google Calendar. Any is preferable.
Grid
List
Google Calendar
The Google Calendar could be in a month format or list format.
Check it out!
Event Attributes
Here, you can discretionary select how much information you want to display or hide.
Event Title – You can show or hide it.
The event title is shown in the first and hidden in the second.
Event Description – You can either show or hide it.
The first image has the event description and the second does not have it. It’s all up to you.
Event Start Date – You can choose to show or hide it.
The first image shows the event date and it is hidden in the other.
Event Location – You can choose to show or hide this.
Read More Link – You can choose to show this or hide it on the calendar frontend.
The first image has the “read more link” and it is hidden in the other image.
It’s all up to you.
To change the details of the event on the calendar. All you have to do is log in to your Google Calendar account and edit the details from there.
You should have something like this on your screen.
Save changes.
And that’s it!
Advanced Settings
This settings page has a lot of options set out to create the best experience for users.
- Global Style – You can easily customize the style of your calendar with this advanced option. It makes use of the Custom CSS editor to allow customization of themes.
We have;
- Background color- This can be set to other distinct ranging colors. You get to choose your preferred color and the color change would affect the date section, icons, title, and read more buttons.
- Text color- There are distinct colors made available for users. You should just pick your preferred choice. This would affect the ‘date section text’; and the color of the button.
- Event Date Section: We have Style 1 and Style 2.
Style 1
Style 2 –
It basically changes the look of the date section of your calendar. Choose your preferred layout.
- Events Details/ Description Section: This changes the look of the description section of your calendar. This basically just changes the title tag of the calendar. You could have it in a bigger or smaller font. You have four options; H1, H2, H3, & H4. Choose your preferred option.
- Button Style – Customize your calendar button.
- Button Color- You can change the button of your calendar to any preferred color. There are a host of ranging colors to choose from.
- Button Text Color – Select a preferred color for your calendar button text color. White is the default color but you can change this at will.
- Button Hover color – You can change the background button color on hover.
- Button Hover Text Color – You can change the button text color on hover.
NOTE: The calendar button is the “read more” sign.
- Pagination/Load More: You can set out how many events you want the plugin to load per page.
Zero (0) is the default setting set out. And when it is zero, it shows all events. But when set to a specific number, then the page only loads that number of events per page. For example, if it is set to (1), then the plugin would show just one event per page to the user.
Therefore, choose the most suitable for you.
Don’t forget to save any modifications/changes before exiting the page.