Skip to main content

Getting Started with the CitySpark WordPress Plugin

How to install the WordPress Plugin, Embedding, and configuring for HTML5 if needed.

Written by Jenny Limb
Updated over a year ago

Welcome! This guide introduces the CitySpark WordPress plugin, a simple tool designed to help you easily embed portals, widgets, and event calendars onto any WordPress website. Whether you're working with a clean slate or integrating into an existing site, this article walks you through installation, setup, and configuration.

🧩 Installing the CitySpark Plugin

  1. Log into your WordPress Admin Dashboard

  2. Go to: Plugins > Add New

  3. Search for: CitySpark

  4. Find: CitySpark Events and Embeds

  5. Click: Install Now

  6. Then: Activate

Once activated, the plugin will add new blocks to your WordPress editor and provide access to plugin-specific settings.

📅 Embedding the CitySpark Calendar

To add the event calendar to a page:

  1. Create or edit a page (e.g., /calendar)

  2. In the WordPress block editor:

    • Click the + icon to add a block

    • Search for CitySpark

    • Select the Portal block

  3. You’ll see a placeholder.

    • Paste your Script ID (usually available on your admin page)

    • This will load the live preview of the portal/calendar

💡 Note: The editor preview may look squished. Don’t worry—it will render full-width on the published page.

4. Publish the page

  • Visit your page to confirm the calendar is visible and functional

⚙️ Configuring for HTML5 Routing (Optional but Recommended)

By default, the plugin supports the hashbang URL format (#!). If your site uses HTML5 routing, there’s an additional step to ensure deep links work correctly.

Why this matters:

If a user clicks a link to a specific event (a deep link), the page may not load correctly when refreshed or shared—unless routing is set up properly.

Fixing Deep Linking:

  1. In the WordPress admin, go to:
    ​Settings > CitySpark Event Calendar

  2. Under Placement Rules, do the following:

    • Add your placement URL (e.g., /calendar)

    • Set the Type to: Portal

    • Enter your Script ID

    • Click: Add Rule

This ensures that if someone visits a direct event link or refreshes the page, the calendar and event details will load correctly.

✅ Summary

To embed a CitySpark calendar on your WordPress site:

  • Install and activate the plugin

  • Add the portal block to any page

  • Paste your Script ID

  • Configure settings for deep linking (optional for HTML5 routing)

And that’s it! You're live 🎉

For any additional help or inquiries, please contact our customer support team at support@cityspark.com.

Related Articles
Getting Started with the CitySpark Calendar
Did this answer your question?