WordPress – Embed Guide

This page gives instructions for embedding CrowdWork widgets on a WordPress website.

Adding your CrowdWork widgets to WordPress is super straightforward - and we've got all the details you need right here. Let's get those show schedules and class listings displaying beautifully on your WordPress site!

βœ… What You'll Need

Before we dive in:

  • Your CrowdWork account (with shows or classes created)

  • Admin access to your WordPress site

  • Your widget embed code from CrowdWork

  • About 5 minutes of your time

The Embed Widget code provided in the CrowdWork Dashboard

πŸ‘Ύ Getting Your Widget Code

First, let's grab your widget code from CrowdWork:

  1. Log in to your CrowdWork Dashboard

  2. Navigate to Theatre > Embeds in the left sidebar

  3. Choose your widget type (Shows or Classes)

  4. Select your preferred view (Calendar or Cards)

  5. Customize with any filters if needed (by tag, start date, etc.)

  6. Copy the code snippet provided in the box

Quick Access: Jump directly to your widget customization page to get started immediately!

πŸš€ Adding Your Widget to WordPress

WordPress offers multiple ways to add your widget. So let's figure out which method will work the best for you.

Method 1: Using a Custom HTML Block (Block Editor)

If you're using the modern WordPress Block Editor (Gutenberg):

Quick Tip: Make sure you have your widget code from the Theatre > Embeds Dashboard ready to paste.

  1. Log in to your WordPress admin dashboard

  2. Navigate to the page where you want to add your widget

  3. Click the + icon to add a new block

  4. Search for and select Custom HTML

  5. Paste your CrowdWork widget code into the HTML block

  6. Click Preview to see how it looks

  7. Update or Publish your page

Method 2: Using the Classic Editor

WordPress Tip: Make sure you have your widget code from the Theatre > Embeds Dashboard ready to paste before starting.

If you're still using the Classic Editor:

  1. Switch to the "Text" tab (instead of "Visual")

  2. Paste your CrowdWork widget code where you want it to appear

  3. Update or Publish your page

Method 3: Using a Page Builder

If you're using a page builder like Elementor, Divi, or Beaver Builder:

  1. Edit your page with your page builder

  2. Find the HTML or Custom Code element

  3. Drag it to your desired location

  4. Paste your CrowdWork widget code

  5. Save your changes

⭐️ Making Your Widget Look Amazing

Your widget will inherit some styling from your WordPress theme, but here are some tips to make it shine:

  • Give it space: Add some padding around your widget for better visual flow

  • Consider width: Calendar widgets typically look best in full-width sections

  • Check mobile: Preview your site on different devices to ensure good responsive behavior

  • Widget placement: Think strategically about where to place your widgets for maximum impact

πŸ”„ Updates Happen Automatically!

Once your widget is embedded, it will automatically stay in sync with your CrowdWork account. Any changes you make to your shows or classes in CrowdWork will instantly appear on your WordPress site without any additional work!

πŸ’‘ Creative Uses for WordPress + CrowdWork

Take your WordPress site to the next level with these ideas:

  • Homepage Feature: Add a card widget to your homepage to showcase upcoming events

  • Dedicated Events Page: Create a full page with a calendar widget for all your shows

  • Class Directory: Build a comprehensive class listing page

  • Performer Spotlights: Add performer-specific widgets to cast bio pages

  • Category-Specific Pages: Create separate pages for different types of shows or classes

❓ Troubleshooting

Quick Fix: Most display issues can be resolved by getting fresh widget code from your Theatre > Embeds Dashboard and re-embedding it.

Widget not displaying correctly?

  • Check if your WordPress theme has any CSS conflicts

  • Try placing the widget in a different section

  • Ensure you've copied the entire code snippet

Widget appears too small?

  • Some WordPress themes may constrain width - try placing in a full-width section

  • Calendar views need more vertical space than card views

Getting an error message?

  • Make sure your WordPress site allows embedded content

  • Check if you have a security plugin blocking scripts

  • Verify that your CrowdWork account is active

🎯 Advanced Customization

Ready for advanced styling? Check out our Widget Styling Guide for custom CSS examples and advanced techniques that work perfectly with WordPress themes.

For users comfortable with CSS, you can further customize your widgets by:

  • Adding custom styling through your theme's CSS editor

  • Using WordPress's built-in Customizer for style adjustments

  • Implementing responsive design tweaks for mobile optimization

Need further assistance? Reach out to our Support Team - we're always happy to help!

Last updated

Was this helpful?