Creating a Google Calendar & Embedding it in WordPress

by

Step 1: Set Up a Google Account

  1. Go to Google Accounts:
    https://accounts.google.com/signup
  2. Fill in your details (name, email, password, etc.)
  3. Verify your account via email or phone.
  4. Once done, log in to your new Google account.

Step 2: Create a Google Calendar

  1. Visit Google Calendar:
    https://calendar.google.com
  2. On the left sidebar, click the “+” next to “Other calendars”.
  3. Select “Create new calendar”.
  4. Give your calendar a name (e.g., Team Meetings Calendar), description, and set up the time zone.
  5. Click “Create calendar”.

Step 3: Add a Recurring Meeting

  1. Click the “Create” button (usually top-left or bottom-right).
  2. Add event details:
    • Title (e.g. “Weekly Team Meeting”)
    • Select the start date/time and end date/time.
  3. Set recurrence:
    • Under “Does not repeat”, select your desired option (e.g. “Weekly on Tuesday”).
    • Customize as needed: pick days, frequency, or end date.
  4. Add guests or location if desired.
  5. Click “Save”.

Step 4: Find the Calendar Embed HTML (iframe)

  1. On the left sidebar, find your new calendar under “My calendars”.
  2. Hover over the calendar name, click on the three dots (“Options”) next to it.
  3. Click “Settings and sharing”.
  4. Scroll down to “Integrate calendar”.
  5. Find the “Embed code” box that you will  use to copy and paste.
    • The iframe embed will look like:
      <iframe src=”https://calendar.google.com/calendar/embed?src=yourcalendarid&ctz=yourtimezone” style=”border: 0″ width=”800″ height=”600″ frameborder=”0″ scrolling=”no”></iframe>
    • You can customize the width and height if needed.

Step 5: Make the Calendar Public (for embeds)

  1. While in “Settings and sharing”, scroll up to “Access permissions for events”.
  2. Check “Make available to public”.
  3. Confirm any warning prompts.
    • This ensures people can view the calendar without logging in.

Step 6: Add the Embed HTML to a WordPress Page

Option 1: With WordPress Block Editor (Gutenberg)

  1. Log in to your WordPress dashboard.
  2. Go to “Pages” > “Add New” (or edit an existing page).
  3. Click the “+” button to add a new block.
  4. Search for “Custom HTML”.
    • Add a “Custom HTML” block.
  5. Paste the Google Calendar iframe code(that you found in step 4.5) into the block.
  6. Click “Preview” to see how it looks.
  7. Click “Publish” or “Update” to make the page live.

Option 2: With Classic Editor

  1. Open the page or post you want to edit.
  2. Switch to the “Text” tab (not Visual).
  3. Paste the iframe embed code where you want it.
  4. Save or publish the page.

Additional Tips:

  • You can customize the calendar colors, view mode (week/month), and other settings in Google Calendar’s “Settings and sharing”.
  • If the iframe doesn’t display properly, check your WordPress theme and settings; some themes restrict iframes. Consider using a plugin like “Advanced Custom Fields” or “Shortcodes Ultimate” for embedding iframes.
  • If you want to restrict calendar visibility, adjust sharing settings appropriately.

That’s it—your Google Calendar is now created, set up with recurring meetings, and embedded seamlessly into your WordPress site!