RSVPMaker is ready for WordPress 5.0. That doesn’t mean there is not still considerable room for improvement in how it integrates with the new Gutenberg editing experience, but the main thing you need to know is where to find options that have moved.
RSVPMaker demo in the new WordPress 5.0 editor.
One of the goals of the new editor is to “declutter” the editing screen so that blog authors, in particular, can focus on writing without being distracted. Plugin authors are discouraged from using the old “meta box” model where lots of options where displayed beneath the main content editing area. For that reason, many of the more elaborate RSVPMaker options for setting confirmation messages, registration options, and prices have moved to a separate screen.
Add New screen
When you click Add New for an RSVPMaker event, instead of going straight to the editor, you will see this screen asking you to set the event date and a few other basic options up front. Note that there is also a link in the upper right hand corner that lets you shift from adding a single event to adding a template for a schedule of recurring events.
An RSVPMaker event post, with the calendar widget showing.
Within the editor, you will see a calendar widget in the documents tab of the sidebar that allows you to change the event date and time. This is a little tricky because that calendar can be hidden when you are editing blocks of content. Click on the Documents tab in the sidebar, and you’ll find it under Status and Visibility.
Don’t confuse the event date with the Publish date. If you set the Publish date to a future date, the post will not appear on your website until that date.
Event Options menu item
To set other event parameters, including some like event pricing that aren’t shown on the Add New screen, click the RSVP / Event Options link that appears on the black menu bar when you are logged in and have event editing rights. You will see that when either viewing or editing an RSVPMaker event post.
Event details screen
You can navigate back and forth between the event options screen and the editor for event content.
Create / Update menu item for templates
When you are editing an event template, an additional “Create / Update” option appears on the black administration menu. Click there to add a batch of events based on the template to your site or update previously added events based on your changes to the template.
In addition, RSVPMaker now offers 2 Gutenberg blocks: RSVPMaker Upcoming for adding an events listing and/or calendar and RSVPMaker Embed Event for embedding a single event in a page or post. These are the successors to the shortcodes used in earlier releases (the shortcodes should still work).
Watch the video embedded above for a tour of the updated RSVPMaker editing experience.
The new “Gutenberg” editor for WordPress, available now as a plugin and coming soon as the standard editor in WordPress 5.0, has prompted a number of changes in the RSVPMaker user interface — many of which you will see even if you have not yet started using Gutenberg.
New user interface
One of the goals of the Gutenberg project is to “declutter” the editing screen, making it easier to focus on the content of your blog posts with fewer distractions. Gutenberg discourages the use of “metaboxes,” the user interface panels that appear below the post editing screen, such as the one where you set the date and RSVP options in RSVPMaker.
Yes, the long, complicated form for setting all possible RSVPMaker options including payments for events qualifies as “clutter” in Gutenberg terms, and so it has to go. Although metaboxes are still supported, up to a point, they are an awkward match with the new design.
As a result, that form has mostly migrated onto a separate Event Options screen. In the Classic Editor, you will still see an abbreviated version of the form with date and time options, followed by a link to More Event Options. An Event Options link also appears on the black “admin bar” menu at the top of the screen when you are editing an event or logged in and viewing it on your website.
In Gutenberg, the basic date, time, date/time display, and Collect RSVPs buttons appear in the Document tab of the sidebar. Note that changing any of those options will prompt a page reload. As of today’s release, that is a hack I’ve found necessary to work around certain challenges with Gutenberg and the React Javascript programming framework. I hope to make that go away in a future release.
When you go to Add New event or choose New -> RSVP Event from the admin bar, instead of going straight to the editor screen you’ll first be prompted to enter your title, date, and time of your event. Once you do so, a draft post with those parameters will be loaded into the editor so you can add your event details.
In addition to minimizing the importance of the page reload issue mentioned above, setting the date and time up front avoids an issue I often see with new users who are so focused on the content of their event post that they forget to set the date and time.
I think the bottom line effect is to simplify the event editing experience, particularly for basic event announcement and promotion scenarios where you are not doing anything fancy with payments or custom RSVP forms. When you check the Collect RSVPs checkbox, you’ll activate a registration form that includes the standard options specified on the RSVPMaker settings page.
The RSVP Mailer tool has undergone a similar simplification, where the options for creating scheduled email broadcasts has migrated onto a separate screen. The options for sending a single broadcast are shown when you view your RSVP Mailer post, displayed in the email template. I give you the option of including stylesheets, including stylesheets associated with Gutenberg blocks, in the header of your HTML email so that CSS formatted content will display properly.
Note that certain content such as embedded media may not be compatible with HTML email. I provide specific support for YouTube video, for which I can pull the thumbnail image from Google and embed it with a link to the YouTube address.
Like other WordPress plugin developers, I’ve been monitoring the previews of Gutenberg, the new editing experience currently available as a plugin and coming soon to core as part of WordPress 5.0. This major new release could ship as early as August, and it’s potentially disruptive for plugins that rely on shortcodes, the placeholder codes for dynamic output.
Existing shortcodes should continue to work. However, one of the motivations of the new editor is to eliminate the need for a lot of shortcodes that were used by plugin and theme authors to achieve formatting effects. The need for them should go away now that WordPress has more powerful, JavaScript powered formatting controls built into the editor itself. Most of the shortcodes used in RSVPMaker are more dependent on server-side code and logic, but fortunately there’s a way of handling that under the new architecture, too.
Adding an RSVPMaker Upcoming Events block.
In Gutenberg, a web document is treated as a series of “blocks,” each of which has can have its own formatting controls and properties. A typical blog post would be a series of paragraph blocks with maybe an image block inserted into the middle of the page. There are standard blocks for quotations, two column layouts, and tables, making it possible to do more things in the visual editor that might have required a plugin or some HTML coding in the past.
Blocks can also replace the functions previously performed by shortcodes, including functions that require server-side execution like retrieving an RSVPMaker event listing. Accordingly, RSVPMaker now makes two custom blocks available to WordPress installations that have the Gutenberg plugin active … and which ought to work with WordPress 5.0 when it arrives. These block controls replace the buttons I had created for the “old” WordPress editor for inserting event listings and single events.
To add a new block, you click the + sign in the editor. You can then browse through the available blocks or search by keyword, for example “rsvp” or “rsvpmaker” will bring up the RSVPMaker blocks. The two blocks available so far are “RSVPMaker Upcoming Events” and “RSVPMaker Embed Event.”
RSVPMaker Upcoming Events is what you would use on your main events page. You can also use it to list a given category of events by setting the Event Types field. Clicking the button in the block chooser inserts a placeholder widget with an embedded form you can use to specify whether you want the event listing displayed with or without the calendar grid and how many events per page should be displayed, etc.
RSVPMaker Embed Event lets you insert a single event in a blog post or landing page. For example, you might write a blog post promoting an upcoming event and embed the event registration page in that post, in addition to making it available on your website’s event calendar. Again, there are a number of options you can set, from embedding the entire event and registration form to just embedding the RSVP Now! button.
Getting this working was a challenge, but I think it’s a better experience. It’s also new enough that there may be bugs. I did run into issues with errors occurring on the administrative dashboard when WordPress with Gutenberg enabled seemed to want to execute functions that would only normally be triggered by filters that execute on the front end of the website. (Does Gutenberg execute the “the_content” filter for some reason?) If you run into other issues that I missed, let me know.
By default, plugins like RSVPMaker that employ custom post types will continue to use the “classic” WordPress editor declares its support for Gutenberg editor. So far, I see no reason why you can’t take advantage of the greater formatting controls in Gutenberg when composing the body of an event post. However, for now that’s a setting you can enable at the bottom of the RSVPMaker settings page.
RSVPMaker now allows individuals to download a copy of their personal data or request that it be erased, in keeping with the provisions of GDPR.
The European Union’s General Data Protection Regulation (GDPR) is part of a broader trend toward giving individuals more control over how their data is secured and managed. WordPress 4.9.6 includes utilities for exporting and erasing user data on demand.
Sample personal data export, including RSVPMaker registration info.
RSVPMaker piggybacks on those features, so that in addition to user data or comments associated with an email address, a data export can include event registration data. All registration data associated with that email address can also be deleted on demand.
In both cases, data will be retrieved or deleted based on a search for the person’s email address and all associated records. The website will send an automated email asking the user to confirm that request.
You will find the Export Personal Data and Erase Personal Data screens under the Tools menu of the administrator’s dashboard.
Adding a Privacy Policy
If you are running an independent WordPress site, you will see prompts suggesting you add a privacy policy to your website as soon as you update to version 4.9.6 or later. WordPress will suggest some default wording. You may also wish to consult my version from rsvpmaker.com for wording specific to the RSVPMaker.
Adding a Privacy Policy Consent Checkbox
GDPR’s requirement for informed, active consent is commonly interpreted as requiring an additional checkbox (not pre-selected by default) with which the user agrees to your privacy policy. The RSVPMaker settings screen allows you to specify that the checkbox should be displayed on all forms, with a message you can customize.
Error message when consent checkbox is not checked.
Since RSPMaker’s registration function is meaningless without data collection, the submission form submissions will fail if the box is not checked.
You might think that it would be obvious that the purpose of this form is data collection, but the idea is people should know the specifics of how you will store, protect, and use the data they share.
Use of Email Addresses
RSVPMaker includes built-in features to support sending confirmation, reminder, and follow up messages to individuals who register for your events. Registration information is retained indefinitely, but an administrator can delete it in response to a request using the tools provided by WordPress. However, site owners should be cautious about adding email addresses collected this way to a permanent email list.
Under GDPR, other regulations, and generally accepted best practices, consent is required to add an email address to a marketing email list.
If you use the integration with MailChimp, it’s possible to include an “Add me to your email list” checkbox on the registration form and let MailChimp take care of the double opt-in process. An email address will not actually be added to the email list until the owner of that email address confirms. That is, they will be sent a notification and must click to confirm before they are added to your list. If you are not using that integration, you should obtain consent some other way.
If you use the events template feature of RSVPMaker to create multiple events including the same boilerplate details that repeat every time, now you can also create automated reminder messages for each of those events more easily.
When you create a series of events based on a template, each event gets a copy of the basic content (where and when you meet, who to contact with questions) and most of the associated metadata (like whether RSVPs are being collected, whether there is a fee, what event type the post is associated with). However, the reminder message setup isn’t duplicated by default — and you might not necessarily want the reminder message to be the same each time. Just like you do not want to automatically overwrite the content of posts that might have been updated independently of the template.
On the other hand, you may want the reminder message to be the same (or basically the same) most of the time. Improving how this is handled is one of those features I needed for my own purposes. Since I run an Online Toastmasters club (Online Presenters) that meets every week, and every one of those meetings needs an automated reminder message to the people who signed up to attend as a guest. The reminder includes details like the online meeting link and basic instructions for how to sign in. Adding those reminders one meeting at a time was a drag.
Now, when you update a reminder message for any event associated with a template, you will see an option to apply that update to all the other events associated with that template. This is similar to the process for updating events based on a template, where you can click “Check all” but still make exceptions for special events that require a slightly different message.
Checking reminders to be updated.
Note that the subject line includes a series of date formatting codes, which default to the same ones used in your site’s “long date” format from the RSVPMaker settings page. You may want to tweak it, for example if you do not think it’s necessary for the year to be displayed.
The result looks like this
Success!
For basics on how the reminders function works, see this post.
RSVPMaker users have periodically requested that I add a standard way of recording event locations. If you were organizing a series of events at a specific location, you could create an event template, but RSVPMaker didn’t have a way of managing locations independently of events. Now it does.
One reason I hesitated was I didn’t want to provide a template that would lock you into a specific presentation, without taking into account individual preferences for which mapping service to use or how events should be presented to your audience.
My solution is to provide a default format but let you edit it however you want, using the WordPress editor. Details like whether you want the location to appear at the top of the post, the bottom of the post, or in the middle are left up to you. I’m shooting for a little more consistency, but no foolish consistencies.
Add a location
Click the Location button in the event editor, and you will get a form that lets you add a new location. Give it a name and put in the address details. You can manually add a map link or let the software generate a Google Maps link (be sure to test it afterward to make sure it guides people to the right address).
When you click Add, the formatted address will be inserted into your event post. It will also be saved as a special kind of RSVPMaker post. The next time you want to add that address, you will be able to pick it from the dropdown list and click Choose.
Get a saved location
You can change or enhance the content of one of these saved locations using the WordPress editor. For example, you might want to add a location photo to point out a hard-to-find entrance.
Locations are listed under RSVP Events when you have it set to Show All (rather than sorted to show only future events). The Edit button shown in the dialog above will also guide you to the correct post.
Here’s an example of retrieving that sample location to add it to an event post.
Inserting a saved location
If you want to provide any special styling for the display of locations, there are several class tags you can take advantage of:
1
2
3
<span class="rsvplocation"><span class="locname">The Pride Center at Equality Park</span>
Here is an example of how you can style your RSVPMaker listings for different types of events, using class tags in the HTML that correspond to the event type you set in the WordPress editor. RSVPMaker’s event types work like categories for your blog. I prepared this example in response to a question:
The question was whether the color coding could be associated with an RSVPMaker event template.
The answer is yes — if you assign a category to the template, it will be applied to all the events you generate based on that template. Here’s an example of a color-coded calendar and event listing. I’m not offering this as an example of good design necessarily, just an example of what’s possible.
The event headlines shown in the calendar are coded like this
1
<div><aclass="calendar_item Color_Me_Blue colors_test team_blue"href="https://rsvpmaker.com/rsvpmaker/color-me-blue-2018-01-31/"title="Color Me Blue">Color Me Blue<br/> 7:00PM</a></div>
While the body of an event post as listed on the page begins with this coding on the div
This means we have two class tags we can target .team_blue vs .team_red (on the a tag) and .rsvpmaker-type-team-blue vs .rsvpmaker-type-team-red (on the enclosing div or the article tag on a single post view).
In addition to styling the div or article tag with class .rsvpmaker-type-team-blue we can target the headline, paragraph and div tags etc. inside of it as in this code for the example above.
If you do not want to hack your theme’s style.css or the stylesheet used by RSVPMaker, you can add a few quick CSS customizations of this sort using the Additional CSS tab of the Customizer.
Note: One inconsistency is that the RSVPMaker class tags for calendar items have terms separated by underscores, whereas the rsvpmaker-type tags on posts have terms separated by hyphens and all the terms are rendered in lower case. The class tags on calendar items are not necessarily lower case. So the event type entered as “Special Event” in the editor comes out as Special_Event on the calendar but rsvpmaker-type-special-event as the class wrapped around the event post. (I could change it to make it more consistent, but I won’t because I don’t want to break the website of anyone who is using these tags as-is.)
Outdated websites are the worst. Particularly when it’s obvious. When you view the home page and it’s advertising an “upcoming” event that happened a week or a month ago. Or urging you to take advantage of a limited time offer for which the deadline is already past.
Is that really the worst thing a website could be? Nah, I suppose it could be ugly or disorganized or unprofessional in a lot of different ways. But it’s one of the things I see regularly on websites that are otherwise very polished. The big event, or the date of the big promotion, has come and gone, but no one has gone back to refresh the website. If it goes on for a few days, it’s forgivable: we all have lots of other things to do. Pretty quickly, though, it starts to look like a sign of neglect.
Here’s the thing: computers can tell time. Content management systems can be configured to let outdated content expire or fade into the background. Just by using a blog and posting to it regularly, you can display your latest content more prominently than older content. For people to be able to find your original announcement of an event in the blog archives isn’t a bad thing, as long as there is more recent content (photos of happy people in the event recap) piled on top.
RSVPMaker event listings address this in a different way, allowing you to display a calendar of events in order of event dates as opposed to in order of posting date (blog style). Site visitors can navigate back through the calendar to find old event posts, but the upcoming stuff is always displayed more prominently.
When you want to embed a featured event on the home page, you can set that up using the rsvpmaker_one shortcode and specify that it should expire after the date is past. I also provide an rsvpmaker_timed shortcode that you can wrap around any block of content with start and/or end times specified for when it should be displayed. (Both are not new but have been improved in recent releases).
The rsvpmaker_one shortcode
The rsvpmaker_one shortcode is particularly intended as a way of displaying an event on the home page or a landing page. Use it to display a specific event, or the next scheduled event, or the next event in a specific category (like the next webinar). You can display the full event, with either the RSVP Now! button or the registration form included, or a show compact version. You can also extract elements like the date, the button, or the form to be used in a custom layout. In the context of this post, the important thing is that it can be set to expire (disappear off the page) when the event date is past.
There is a button on the button bar (the clock icon) to help you get the parameters right.
Show the next event in the webinar category (if none is scheduled, don’t show anything). Instead of displaying the whole form, show the RSVP Now! button.
You can also add a style attribute where you specify CSS for a div to be wrapped around the featured event. Example: style=”border: thin dotted #222; padding: 10px;” for a dotted border.
The rsvpmaker_timed shortcode
The rsvpmaker_timed shortcode is a quick-and-dirty way of specifying a start and/or end date for displaying a chunk of content. I’m sure there are other plugins or themes that provide something like this as a feature, but consider this a little something extra you get “for free” with RSVPMaker.
The output is similar to what you would get from the example shown above (the one with the closing [/rsvpmaker_timed] tag), except that we’re pulling the content from another post. The style attribute is also available with this one, if you would like to apply a border or background color to the featured chunk of content.
If you don’t specify time of day, midnight is assumed (a December 26 end time means the post will stop displaying 1 second after midnight that morning). To make the start and end times unambiguous, you may want to put them in SQL format.
I currently don’t provide an editor button for finding the post or page ID, but you can grab it easily enough from the address bar in the WordPress editor.
Finding the post ID
I would typically suggest creating this chunk of content as a blog post. If you don’t want to make it public in the regular navigation flow of the site, you can save it as a draft and still use the WordPress editing tools to format and update that chunk of content independent of the page you are embedding it in.
If you want to use a page or any other post type, you need to add a post_type attribute.
Note that if you use a caching plugin, content may not disappear immediately after the end time you specified but only when the cache is purged or refreshed.
Those are my latest entries in the war against outdated web content.
RSVPMaker now supports two payment methods, PayPal and Stripe (via integration with the WP Simple Pay Lite for Stripe plugin), but I recently got a request from someone wanting to add an additional custom payment gateway. Now you can by using the hook ‘rsvpmaker_cash_or_custom’.
I’ve always tried to keep RSVPMaker developer-friendly for those who want to extend it. If you come up with something cool that ought to be part of the standard distribution, I hope you will consider contributing it to the project.
The new Default Payment Gateway heading on the settings page now includes 3 options: PayPal, Stripe, and Cash or Custom. The Cash or Custom setting can also be used by anyone who wants to display pricing on the website even if they will tell people to pay by cash or some other means, rather than paying online.
In the case where you are implementing a custom payment gateway, you would write a routine something like this.
Function for testing the 'rsvpmaker_cash_or_custom' hook
echo'<h1>Variables Passed to My Custom Function</h1>';
echo'<h3>Charge</h3>';
echo'<p>'.$charge."</p>\n";
echo'<h3>Invoice ID #</h3>';
echo'<p>'.$invoice_id."</p>\n";
echo"<p><em>Tracking # for payments</em></p>";
echo'<h3>RSVP ID #</h3>';
echo"<p><em>Unique ID for main database record for registration</em></p>";
echo'<p>'.$rsvp_id."</p>\n";
echo'<h3>Details</h3>';
echo"<p><em>Details about the transaction</em></p>";
echo'<pre>'.var_export($details,true)."</pre>\n";
echo'<h3>Profile</h3>';
echo"<p><em>Details about the person</em></p>";
echo'<pre>'.var_export($profile,true)."</pre>\n";
echo'<h3>Post</h3>';
echo'<pre>'.var_export($post,true)."</pre>\n";
}
Normally, what you would do in this space is output the payment button or other user interface code for the payment gateway functionality you are adding. This sample function just dumps all the data you get to work with related to the pricing and the information the user submitted about themselves, such as the email address for a confirmation message.
Want to add a custom payment method?
You would then take responsibility for handling the user’s submission. Ideally, you want to capture confirmation of the completed transaction and log the payment as complete in the RSVP report. Here is the function call.
‘blockchain’ is the label for my custom payment method
$amount is the amount paid in this transaction
$rsvp_id is the ID for the event registration
$event is the post id ($post->ID)
$transaction_id is an optional transaction identifier, intended for an ID # you got back from the payment service
Here is what you get to work with (the output of the test function shown above, with an example user entry).
Charge
300
Invoice ID #
rsvp126102
Tracking # for payments
RSVP ID #
Unique ID for main database record for registration
Improvements for RSVPMaker often arrive when I see the need for them in my own projects, and recently I found myself creating a landing page for a series of workshops at Online Presenters. This is a Toastmasters club I founded, which focuses on helping members develop skills for webinars and online meetings, presentations, and trainings of all sorts.
Online Presenters Landing Page
Because the workshop series is intended as a recruiting tool, I wanted our promotions (including some paid Facebook ads) to direct visitors to a page with a clear call to action — RSVP Now! — with no distractions that might tempt them to click away to another page or blog post. That meant the regular page sidebar and the menu at the top of the page had to go. Continue reading “Creating an Events Registration Landing Page with RSVPMaker”
