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.
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.
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.)
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.
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.
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.
- How to Reorder WordPress Posts
- How to find the link to the WordPress login page
- How to find files to edit from a WordPress theme
- How to present and share PDFs on WordPress?
- How to Create WordPress Pages with a Hierarchy and Templates
Conclusion
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.
...
