Embed Google Calendar into WordPress
If you’re like me, you’ve found WordPress to be a great CMS, but it’s lack of calendar functions and lack of calendar
plug-ins has been…disheartening. You may have also found that trying to embed some HTML into the WordPress editor to be hit of miss. Now you can emded a Google Calendar with little or no HTML foo (aka skills).
Required tools:
- A web browser with tab capabilities (like Firefox).
- A Google Calendar you’d like to share with the world. (You can sign-up here)
- A copy of WordPress where you have permissions to create pages.
Steps:
- Log-in and start to write a page. Syntax may be different depending on your version of the program.
- In a new tab head to your Google Calendar and you will be a down arrow. When you click on it there should be a menu there. Click on “Calendar Settings”. The tab you should be on is “Calendar Settings”. Scroll down and you should see “Embed this calendar”.
- By looking at the HTML code in the box under the “Embed this calendar” seting you’ll see an iframe, which essentially allows a window within a window. When someone heads to your site and sees this calendar they will be looking through your site to Google’s site. Depending on the template you have in WordPress that window may need to shrink or get larger in size. There is quite a bit of data in that HTML box. What you should really look at is the area where you see, width=”800″ height=”600″. Copy the code.
- Next head to your other tab with the WordPress “Write Page” set up. Put what you’d like into the Title of the page. Something like “My Calendar” would be fine.
- Now click on the HTML in the GUI bar or HMTL tab (in newer versions of WordPress). Edit the code, to scale, making sure it fits in your site. You can cut the size in half (400×300), into quarters (200×150) or any deviation of the 800×600 scale. Paste the code into the box and hit “OK” (in older versions).
- Hit “publish” and enjoy.
If you find the calendar is too big or too small based on your template simply go to “Manage – Pages” and edit the HTML so that the Google Calendar fits into your site.