Category: Announcement

When you activate a full-site editing block theme (or activate RSVPMaker on a site that uses one of those themes), the plugin will now create a template for the rsvpmaker post_type based on that theme’s single post template. The major tweaks are to remove the blocks that display the post date (which can be confusing when emphasized more prominently than the event date) and post author.

You can then make further changes to the template, using the Full Site Editing feature, according to however you would like event posts to be displayed.

How it Works

With a full-site editing theme, WordPress checks for the existence of a database entry corresponding to a customized version of the template for the index, archive, page, or post to be displayed. If none is found, it defaults to loading the HTML file distributed with the theme. For example, if there is no ‘single’ template in the database for a single blog post, it will load ‘single.html’ from the template directory in the theme folder.

For an RSVPMaker event post, it will check for ‘single-rsvpmaker’ in the database or ‘single-rsvpmaker.html’ in the theme.

This means I can create a template specific to RSVPMaker posts as a database entry even though the theme doesn’t include a single-rsvpmaker.html. For most themes, the template used for single blog posts is probably close to how an event should be displayed, but maybe not exactly. A lot of themes will display the date a post was published prominently, when the date of the event is what you would really like to emphasize. So my altered version for events removes the standard date block.

This automated alteration of the single template works well on Twenty Twenty-Two, where the date and author blocks are normally placed at the bottom of each post, right before the blocks for category and taxonomy tag display.

With other themes, you might wind up with an obvious blank spot on the page where the post date was supposed to go. But thanks to the magic of Full Site Editing, you should be able to fix problems like that fairly easily. In other words, if there’s a wrapper block that normally contains the date block, you can remove that whole section.

Details for Developers

Here is how I dynamically create a template for a custom post type.

The code below is a simplified excerpt of what I’m using in the plugin. I use get_block_templates() to retrieve an array of template objects, including both those recorded in the database and those distributed with a theme. Assuming it finds a ‘single’ template, it filters out the date and author blocks and creates a new entry in the posts table with post_type set to ‘wp_template’ and ‘single-rsvpmaker’ in the post name field. The slug for the theme is added to the taxonomy for that post.

If you switch between full site editing themes, you may wind up with several versions of this in the post table but only the one for the current theme will be displayed in the editor.

When you create a new event, by default it’s assumed to be in whatever timezone you have set as the default for your website. However, you can change the timezone to a different one (specified by city). In the example below, the site defaults to U.S. Eastern time, but I can change that by specifying Los Angeles time.

The checkboxes on that new event screen specify that the timezone should be displayed and that the option to convert to the user’s local timezone should be offered. That causes the Show in My Timezone button to be displayed, as shown below. Click on the button to see the translated time (based on the local timezone reported by your computer).

Try it using the U.S. Pacific time and London time demos.

Changing the Timezone on an Existing Event

If you didn’t set the timezone initially, you can change it on the RSVP / Event Options screen. (As of this writing, you can’t change it from the sidebar within the editor.)

The default RSVP event registration form that comes with RSVPMaker was designed for in-person events, with space for registrants to provide a phone number and add the names of guests. When you are instead registering people for online events (the most common case in 2020), collecting a phone number may not be appropriate, and guest registration is probably irrelevant.

The latest RSVPMaker release makes it easier to switch between alternate RSVP Forms. I’ve provided one for webinars, which you can modify as needed, and you can create more.

When working with an event or event template, you can either switch to using one of the alternate forms (shared between all events that use it) or create a copy that you can customize.

This is similar to how you can either edit the default RSVP Form or create a customized copy of it.

There’s now an option to choose either the default form or one of the alternatives when you create a new event or event template.

You can edit the available forms, or create new ones, on the RSVP Forms tab of the RSVPMaker Settings screen.

You can modify the webinar form I’ve provided, which by default asks for first name, last name, and email, with a prompt to allow you to add the registrant to your email list (which can be automatic if you’re using RSVPMaker’s MailChimp integration).

Or you can create a new reusable form from scratch.

At the bottom of the RSVP Forms tab, you’ll see a listing of custom forms previously created for specific events. To make any of these forms reusable, you assign it a name that should be displayed on the menu.

RSVPMaker users can also manage forms by associating them with an event template for a given type of event, which can also include customized confirmation messages and settings shared across events based on that template. However, allowing RSVP Forms to be managed independently should help with scenarios where you want to collect a similar set of data for multiple types of events.

RSVPMaker now offers a countdown timer block. You can embed it in an event, and it will show the countdown to the start time for that event. Or add it to a post or page (for example, a blog post highlighting how quickly the event is approaching) and specify which event you’re targeting.

You can see an example of how it works when embedded in an event below.

Styling the Countdown Timer

RSVPMaker provides some basic styling for the countdown timer, which you can modify to fit your preferences using, for example, the WordPress Customize tool. Here’s an example.

CSS classes you can target include:

• countdowndigits: the digits included in the display
• countdowndigits-line: the whole line of content
• countdowndays, countdownhours, countdownminutes, countdownseconds: the components of the time
• countdownspacer: wraps around the colon between hour, minutes, and seconds
• countdowndayslabel: the label “days” that appears between the days and hours

You can also specify what should be displayed after the countdown has expired (the scheduled start time of the event is past). The choices are a “stopped clock” like 00:00:00, the stopped clock plus a message, or just the message you provide. If you don’t want anything displayed, select “none.”

If a message is displayed, it will be a paragraph with the class “countdown_expiration_message” as a target for any CSS.

This is a demo of how to do event marketing in RSVPMaker for WordPress, showing an updated user interface for setting event dates and times.

https://youtu.be/NmwN1T9s44E

The drop-down lists for year, month, day, and time are gone, replaced with simple text entry blanks. You can type in “January 1, 2021 7 PM” or “6 March 2021 8:30 am” or any other clear date and time. If you prefer, use the numeric format “2021-02-28 09:30:00.” That’s what actually gets recorded to the database.

If you enter the date as text, you will see the numeric equivalent and vice versa.

This change is based on usability research I’ve been reading that argues against excessive use of drop-downs. I personally found it to be inefficient when creating multiple events.

A simpler user interface lets you focus on event marketing, like copy and images that tell people why they should attend.

I’ve added the ability to change dates and times using the Quick Edit feature of WordPress post listings.

In addition, a new multi-event setup screen is handy for things like creating RSVPMaker event posts representing all the sessions and activities in a conference program.

The demo covers the use of the RSVPMaker Schedule block, which was intended for applications like conference schedules. Used in combination with the Show in my timezone button, it allows people to convert times to their own local timezone — particularly handy for online events. See the sample conference schedule example from the demo.

When you hold a seminar or conference online, you make it available to the world — and even if you were compelled to take it online by COVID-19, you ought to take advantage of that fact. That means attracting people from many timezones, not just the timezone the organizers happen to be located in. Yet even many professional events, fail to make this easy — expecting people to be able to do the mental math to calculate the difference from EST to PST to GMT and beyond.

With RSVPMaker’s Show in my timezone button, the computer can do the math for them. Recent enhancements allow you to use it in a broader variety of situations.

The example here is from VTM CON on Dec. 5, 2020, a conference for speakers and leaders I’m helping publicize. I was a founder of Online Presenters Toastmasters, one of the sponsors, which has been using the Show in my timezone button on its event notices for years, but in this case we wanted to show the entire schedule of events for the conference in a table. The times for EST, PST, and UTC were entered by hand, but we wanted to make the listing equally accessible to people in other timezones.

You can see it live and register for the event. If you attend, be sure to say hello.

For the VTM CON example, I’ve added the CSS class tz-table2 to the an HTML table created with the WordPress block editor. This tells my script the data to be converted is in the second column of the table. The available classes are tz-table1, tz-table2, and tz-table3 for the first second and third columns of a table.

You can also apply tz-convert to a table or another container block such as a paragraph, heading, div, or span element. When tz-convert is applied to a table, the script searches for any content formatted like a time (either 1:00 PM or 13:00). The data to be converted should be the only content in the table cell or other container targeted.

In the WordPress editor, you can add a class to any block of content by selecting Advanced in the sidebar panel for that block type.

Using tz-convert for my table would be fine if it only contained times in EST, but in my example it would also mess with the times given for PST and UTC. Using tz-table2 avoids that issue.

For those interested in the technical details, I’ve provided an HTML / JavaScript example at the end of this post that could be used outside of WordPress or RSVPMaker.

Timezone Conversion for the RSVPMaker Schedule Block

The timezone conversion feature also works with the RSVPMaker Schedule listing, which was introduced several versions ago as an alternative to the RSVPMaker Upcoming schedule listing.

Here, the idea is that each session of the conference has been modeled as its own RSVPMaker event. The RSVPMaker Schedule block includes options that allow you to limit the listing by start and end date and by the RSVPMaker Event Type (similar to a category for a blog post).

Rather than showing the full date and time at the start of each post, RSVPMaker shows the date just once for each event falling on that date, followed by the start time, the event title, and the content of the event. Within each event post, you can use the more tag to specify content that should only be displayed if the user clicks Read More — making the schedule easier for the viewer to scan quickly.

The tz-convert tag is automatically added to the times in an RSVPMaker Schedule display, so that’s a detail you don’t have to worry about. Just toggle on Display “Show in my timezone” in the block settings to activate this feature.

If you’re a user of the software, but not a programmer, you can stop reading now. The next section is just for other coders.

HTML/JavaScript Code Example

Here is a working example of my timezone table example with some of the complexities specific to my plugin stripped away. JavaScript knows the viewer’s timezone as long as that person’s computer clock is set correctly, so there is no need to ask for it.

The script takes advantage of the fact that JavaScript can also parse a datetime string that includes a timezone into a universal timestamp, representing it in memory as in integer. When you then as the script to display the time, it shows it relative to the user’s own timezone.

Most of the necessary information, such as the original datetime and timezone, is included as attributes on the Show in my timezone button. The rest of the script uses JQuery selectors to target the HTML classes I’ve designated for data that can be converted.

https://gist.github.com/davidfcarr/849c64f3ddd14d002775ef75dbd8dc08

The code sample is not identical to the code used in RSVPMaker, which includes PHP to pull dates, times, and other data from the the WordPress database. Complete code is on Github at https://github.com/davidfcarr/rsvpmaker

Updated: August 20, 2020

RSVPMaker is back online in the WordPress repository, following a fix to one potentially serious security issues and the implementation of other updates required by the wordpress.org plugins review team. Please update ASAP if you are running a version earlier than 7.8.5.

https://wordpress.org/plugins/rsvpmaker/

---

RSVPMaker has been temporarily removed from the wordpress.org repository because of a SQL Injection vulnerability in some old code. I have provided a patch, which the powers that be are reviewing. Meanwhile, I’ve made it available here [link removed].

I apologize for this potentially serious error.

Updates should be available through the plugin repository again soon.

If you’re running WordPress 5.5, it’s now possible to update a plugin using a ZIP file. The system will tell you there is already an existing plugin directory for RSVPMaker then prompt you to confirm that you want to update to the uploaded version.

RSVPMaker uses the black admin bar that appears at the top of the page when you are logged in to provide links to related documents and settings screens.

Because the WordPress full screen (distraction free) editor prevents the display of that menu, it’s now disabled by default when you are editing RSVPMaker posts. This navigation is important to allow you to navigate from an event post for a specific date to the event template it was based on. Recent releases have made it easier to see whether the registration form and the confirmation message are specific to the event you are looking at, as opposed to being the default version from your settings, or a version inherited from the event template.

The New option you click on for a new p0st or page lets you create an individual RSVP Event, a New Event Template, or Create/Update events based on a template you’ve defined.

Here are some of those variations.

These options appear under the Edit RSVP Event menu when you are viewing an event on the public site. When you are in the edit, working with event content, these links appear with RSVP / Event Options as the top level menu item.

When you are editing a message or form related to an event, the menu changes again to provide links back to Edit Event and View Event, along with the submenu options.

Finally, here are the new improved options under the New menu. Create / Update links will be provided for any templates you have defined.

If you run a website for a community of people who would like to be able to post events occasionally — but not often enough that you need to provide them with an author or contributor password — you can allow them to submit events for review by your website’s team of editors.

An example is shown below. This form can be added to any post or page using the RSVPMaker Event Submission editor block or the [rsvpmaker_submission] shortcode. For security reasons, event descriptions are limited to bold, italic, and link formatting. Any other HTML or script code is filtered out.

When a website visitor completes the form, an email notification is sent to the list of people you specify (either in your default settings or the block settings). RSVPMaker event posts are saved as drafts but not published until a website editor approves them.

Optionally, you can prompt users to include a timezone in addition to date and time. This is important for online events and events across many geographies, but not necessary for a website advertising local community events.

You can try the user experience here.

Login

Password

Event Title:

Date

Time to

Timezone New York Chicago Denver Los Angeles Abidjan Accra Addis Ababa Algiers Asmara Bamako Bangui Banjul Bissau Blantyre Brazzaville Bujumbura Cairo Casablanca Ceuta Conakry Dakar Dar es Salaam Djibouti Douala El Aaiun Freetown Gaborone Harare Johannesburg Juba Kampala Khartoum Kigali Kinshasa Lagos Libreville Lome Luanda Lubumbashi Lusaka Malabo Maputo Maseru Mbabane Mogadishu Monrovia Nairobi Ndjamena Niamey Nouakchott Ouagadougou Porto-Novo Sao Tome Tripoli Tunis Windhoek Adak Anchorage Anguilla Antigua Araguaina Argentina – Buenos Aires Argentina – Catamarca Argentina – Cordoba Argentina – Jujuy Argentina – La Rioja Argentina – Mendoza Argentina – Rio Gallegos Argentina – Salta Argentina – San Juan Argentina – San Luis Argentina – Tucuman Argentina – Ushuaia Aruba Asuncion Atikokan Bahia Bahia Banderas Barbados Belem Belize Blanc-Sablon Boa Vista Bogota Boise Cambridge Bay Campo Grande Cancun Caracas Cayenne Cayman Chicago Chihuahua Costa Rica Creston Cuiaba Curacao Danmarkshavn Dawson Dawson Creek Denver Detroit Dominica Edmonton Eirunepe El Salvador Fortaleza Fort Nelson Glace Bay Goose Bay Grand Turk Grenada Guadeloupe Guatemala Guayaquil Guyana Halifax Havana Hermosillo Indiana – Indianapolis Indiana – Knox Indiana – Marengo Indiana – Petersburg Indiana – Tell City Indiana – Vevay Indiana – Vincennes Indiana – Winamac Inuvik Iqaluit Jamaica Juneau Kentucky – Louisville Kentucky – Monticello Kralendijk La Paz Lima Los Angeles Lower Princes Maceio Managua Manaus Marigot Martinique Matamoros Mazatlan Menominee Merida Metlakatla Mexico City Miquelon Moncton Monterrey Montevideo Montserrat Nassau New York Nipigon Nome Noronha North Dakota – Beulah North Dakota – Center North Dakota – New Salem Nuuk Ojinaga Panama Pangnirtung Paramaribo Phoenix Port-au-Prince Port of Spain Porto Velho Puerto Rico Punta Arenas Rainy River Rankin Inlet Recife Regina Resolute Rio Branco Santarem Santiago Santo Domingo Sao Paulo Scoresbysund Sitka St Barthelemy St Johns St Kitts St Lucia St Thomas St Vincent Swift Current Tegucigalpa Thule Thunder Bay Tijuana Toronto Tortola Vancouver Whitehorse Winnipeg Yakutat Yellowknife Casey Davis DumontDUrville Macquarie Mawson McMurdo Palmer Rothera Syowa Troll Vostok Longyearbyen Aden Almaty Amman Anadyr Aqtau Aqtobe Ashgabat Atyrau Baghdad Bahrain Baku Bangkok Barnaul Beirut Bishkek Brunei Chita Choibalsan Colombo Damascus Dhaka Dili Dubai Dushanbe Famagusta Gaza Hebron Ho Chi Minh Hong Kong Hovd Irkutsk Jakarta Jayapura Jerusalem Kabul Kamchatka Karachi Kathmandu Khandyga Kolkata Krasnoyarsk Kuala Lumpur Kuching Kuwait Macau Magadan Makassar Manila Muscat Nicosia Novokuznetsk Novosibirsk Omsk Oral Phnom Penh Pontianak Pyongyang Qatar Qostanay Qyzylorda Riyadh Sakhalin Samarkand Seoul Shanghai Singapore Srednekolymsk Taipei Tashkent Tbilisi Tehran Thimphu Tokyo Tomsk Ulaanbaatar Urumqi Ust-Nera Vientiane Vladivostok Yakutsk Yangon Yekaterinburg Yerevan Azores Bermuda Canary Cape Verde Faroe Madeira Reykjavik South Georgia Stanley St Helena Adelaide Brisbane Broken Hill Darwin Eucla Hobart Lindeman Lord Howe Melbourne Perth Sydney Amsterdam Andorra Astrakhan Athens Belgrade Berlin Bratislava Brussels Bucharest Budapest Busingen Chisinau Copenhagen Dublin Gibraltar Guernsey Helsinki Isle of Man Istanbul Jersey Kaliningrad Kiev Kirov Lisbon Ljubljana London Luxembourg Madrid Malta Mariehamn Minsk Monaco Moscow Oslo Paris Podgorica Prague Riga Rome Samara San Marino Sarajevo Saratov Simferopol Skopje Sofia Stockholm Tallinn Tirane Ulyanovsk Uzhgorod Vaduz Vatican Vienna Vilnius Volgograd Warsaw Zagreb Zaporozhye Zurich Antananarivo Chagos Christmas Cocos Comoro Kerguelen Mahe Maldives Mauritius Mayotte Reunion Apia Auckland Bougainville Chatham Chuuk Easter Efate Fakaofo Fiji Funafuti Galapagos Gambier Guadalcanal Guam Honolulu Kanton Kiritimati Kosrae Kwajalein Majuro Marquesas Midway Nauru Niue Norfolk Noumea Pago Pago Palau Pitcairn Pohnpei Port Moresby Rarotonga Saipan Tahiti Tarawa Tongatapu Wake Wallis UTC UTC-12 UTC-11:30 UTC-11 UTC-10:30 UTC-10 UTC-9:30 UTC-9 UTC-8:30 UTC-8 UTC-7:30 UTC-7 UTC-6:30 UTC-6 UTC-5:30 UTC-5 UTC-4:30 UTC-4 UTC-3:30 UTC-3 UTC-2:30 UTC-2 UTC-1:30 UTC-1 UTC-0:30 UTC+0 UTC+0:30 UTC+1 UTC+1:30 UTC+2 UTC+2:30 UTC+3 UTC+3:30 UTC+4 UTC+4:30 UTC+5 UTC+5:30 UTC+5:45 UTC+6 UTC+6:30 UTC+7 UTC+7:30 UTC+8 UTC+8:30 UTC+8:45 UTC+9 UTC+9:30 UTC+10 UTC+10:30 UTC+11 UTC+11:30 UTC+12 UTC+12:45 UTC+13 UTC+13:45 UTC+14
Choose a city in the same timezone as you.

Your Name

Email

If you want your contact information to be published as part of the event listing, also include it in the description below.

Event Details

Submit

Here is what the block looks like in the editor.

My experience from running community websites is that I’d rather give people a password if they are posting events regularly, partly because I want them to be able to make updates when event details change.

On the other hand, plenty of people who might have something good to share are reluctant to accept the burden of having to remember another password — and I can’t blame them. This is a way of encouraging more participation and building a more complete calendar for whatever community you serve.

Update: Release 7.7.5 adds support for Google reCAPTCHA to combat form spam. The reCAPTCHA credentials must be entered on the RSVPMaker Settings screen.