Need to know how to integrate Google Calendar into your WordPress website? So let's take a look at this tutorial together.

Some of your websites would benefit from having a calendar. This is especially true if you coordinate the activity of a team or a community or if you manage an event website.

So your visitors or your users can see what is new or to be done, maybe by whom but especially when.

In this article I will show you how to integrate a responsive Google Calendar into your WordPress website.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

Go to a Google Calendar

If you already have Google calendars, make them public and skip this step. Otherwise, in your browser, visit Google Calendars and authenticate if necessary. If all goes well you should have the Google calendar interface.

how to integrate a google calendar to your WordPress google-calendar-interface website

To give you an example, we will use public calendars available in Google Calendar. To do this, click on the handle in front of other calendars which is on the left of your screen. In the menu that appears, choose Browse interesting calendars.

In the calendar list, choose one that suits you by clicking the link register which is located opposite. For this article I chose Holidays in France. You should see the one you have selected below other calendars.

Embed your Google Calendar in a page or item

Click on the handle in front of Holiday in France (Or your public calendar) and choose Calendar settings. In the Integrate this calendar section, copy the HTML code contained in the text box and paste it into your WYSIWYG editor that you have entered in text mode beforehand.

Discover by the way our selection of 10 Code Editors for WordPress Developers


Save your article and preview it. The display of the agenda on your website will strongly depend on your WordPress theme. If it's fully responsive, it shouldn't have any display issues.

Try reducing the width of your browser window to see how the calendar looks on smaller screens. If at any point the calendar display breaks, it means you will need to add a small line of CSS to your WordPress theme.

Go further by discovering How to Add a Custom CSS Code to Your WordPress Blog

Don't be alarmed, it's nothing complicated.

Add CSS to make the responsive calendar

To change your WordPress theme, especially if you are not the author, updating it should be done in a Child theme or a WordPress Plugin which allows you to add custom CSS.

In any case, whatever option you have chosen, add this little piece of CSS to your WordPress theme:

iframe {     max-width: 100%; }

Save your changes, reload the page of your article and check that this time the agenda is displayed normally on the small screens.

Embed multiple calendars in a post or page

To get started, subscribe to other public calendars as we did above (Other calendars> Browse interesting calendars), or create your own calendars and make them public.

When you have all the calendars you need, choose one, any one, click on its handle and choose Calendar settings. This time, in the section integrate this agenda, click on the link Customize color, size and other options. You will then be presented with a customization window.

Go further with the basics of customizing a WordPress website

Here you can modify some visual aspects of your agenda. An important thing to do is to give your calendar collection a title, otherwise it will have the title of the current calendar.

integrate Google Calendar

At the top of this window is a text box with a button Update HTML code. Use it to preview your calendar.

We also recommend that you check our 10 WordPress plugins premium perfect for integrating a calendar into your website

Using this button also has the effect of updating the HTML code in the text box. When you are satisfied with your changes, you will copy this code into your article. Save and reload the page.

See also How to put your WordPress website in Maintenance mode

As you have already inserted the CSS code earlier, the diary will behave perfectly on all screens.

As you can see, adding a Google calendar to your website is not very complicated. It's more about copying code from the Google Calendar application and pasting it into a page or an article of course with the editor in text mode.

But failing to occupy a whole page with your calendars you could also add a Google Calendar calendar widgets.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Pages by User Role

Pages by User Role is a WordPress Plugin which allows you to add access control on certain elements of your website (posts, pages, custom post types, etc.)

Pages by User Role for WordPress

This plugin can allow you to delete a page, an article, a custom type of post, and others. in search results and blog directory. This will allow you to hide the page, categories and other menu items when users are not logged in.

You can also define a URL redirection specific for users who do not have the required user role.

Download | Demo | Web hosting

2. Ultimate Affiliate Pro

Let's start with the WordPress Plugin Ultimate Affiliate Pro which is easily one of the WordPress plugins most robust affiliate program since it integrates with WooCommerce, Easy Digital Downloads, PayPal and Stripe plugins.

Ultimate Affiliate Pro WordPress Plugin

There you will find all kinds of useful features such as: a performance bonus and banner management, support for an unlimited number of affiliates and special offers, rankings and commission levels, referrals and shares on social networks, support for multiple payment gateways PayPal, Stripe and many more.

If all that wasn't impressive enough, you should know that it also has a few templates for login page, signup, free account, and connects with top email marketing providers like MailChimp, Constant Contact and many others.

It is one of the best affiliate plugins WooCommerce which you will find on Envato Market.

Download | Demo | Web hosting

3. Material

Material Admin is one of the most advanced and stylish WordPress plugins on the market for customizing the WordPress dashboard.

Material White Label WordPress Admin Theme

This WordPress plugin comes with 100 stylish themes and gives you the ability to create your own theme. You will be able to control the complete appearance of the dashboard menu, the top bar, the buttons, the typography, the forms, the text and background colors, the logo, etc.

Material Admin also has more than 20 widgets de dashboard personalized for your website and displays statistics for visitors.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.


Here! That's it for this tutorial dedicated to integrating a Google calendar to your WordPress website. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.