The whole idea behind RSVPMaker is to allow you to take advantage of the familiar WordPress user interface for content creation and editing, while adding the event dates and registration form options that allow you to display even posts on a calendar and/or chronological listing of events, collect RSVPs (or registrations) and charge for events when appropriate.
New Event
The latest versions of the software have gotten away from trying to cram all the options onto one screen — which I hope is an improvement — but it means you need to understand the relationships between the different screens available to you.
These include:
The Settings screen for RSVPMaker, which is where you can set defaults for most event options, plus settings related to email notifications, email broadcasts (Mailchimp integration) and payment processing (integration with PayPal and Stripe).
The Event Setup screen, displayed whenever you choose Add New for RSVP Events — prompts you to specify the date and time, plus some other key settings (RSVPs on or off?) before filling in the event description details. The Event Setup screen is shown above.
The event template variation of that same screen, used to define events that occur on some regular schedule (such as every Friday or first and second Monday) along with the defaults for events in that series (RSVPs on? etc.).
The WordPress editor — works the same as for any other post, but with a few RSVPMaker-specific controls in the sidebar and more available through the “admin bar” (the black bar that appears at the top of the screen when you are logged in as an author or editor).
The confirmation and reminder messages, which you also work with in the WordPress editor. Look for the admin bar menu items that allow you to navigate back to the parent event post.
The RSVP Form, where each registration field is modeled as a special block in Gutenberg. You can add or modify fields, including text entry, textarea, select, and radio button fields, and the optional guest data block.
Some of these options may not appear if you are not using Gutenberg, the new editor introduced with WordPress 5.
Here’s a visual tour:
Draft event
When you save your options on the Event Setup screen, RSVPMaker creates a draft post with the headline, event date, and other basic options set. You can now add whatever body copy you want your event post to have.
RSVP / Event Options link (and submenu)
More event options are presented on a separate RSVP / Event Options screen. When you are viewing a post in the editor or on the website (when logged in), you will see RSVP / Event Options as a link on the admin bar with several submenu items.
Edit Event link (and submenu)
When you are on the options screen, you will see Edit Event as a link on the admin bar with several submenu items related to customizing confirmation / reminder messages or customizing the form.
Default documents show link to RSVPMaker Settings.
You can set the default documents for Confirmation Message and RSVP Form from the RSVPMaker Settings screen. New events you post will use these default documents unless you create custom ones for your event.
You can also create templates for specific types of events, with a Confirmation Message and RSVP Form that may be different from your overall default but will be copied to all events based on the template. (More about event templates below).
Recommendations: Customize the confirmation message to include details people will need to know to attend your event, such as directions to the venue and a number to call with questions.
Change the RSVP Form if the default options don’t make sense for your event (for example, when registering attendees at a webinar, the guest fields probably aren’t necessary) and to gather additional information, such as the name of the person who referred the attendee to your organization.
Custom documents show a link back to the Parent Event.
When you create a custom Confirmation Message or custom RSVP Form for a specific event (or template), you will see options to allow you to navigate back to the parent event (in either viewing or editing mode) on the admin bar.
Customizing registration form fields.
When you edit the form, each form field is represented as a content block with properties including Label, Required, and Include on Guest Form displayed in the sidebar on the right hand side of the editor. (More about the form editor).
Link to create a template rather than an individual event.
To create a template instead of an individual event, look for the New Template link on the Event Setup screen. You can also go to the Event Templates screen and click Add New at the top of that page.
Setting a schedule, rather than individual dates, for a template
On the template version of the screen, you set a schedule rather than specifying a specific date. Unless you merely choose to say that the schedule “Varies” (meaning you’ll specify the date each time), the schedule will be something like “Every Friday” or “First Monday” or “Second and Fourth Tuesday.”
Create / update link displayed after saving a template.
After you enter your template content and save it, you will be prompted to “create / update events” based on the template. The template itself isn’t meant to appear publicly on your website and won’t be included on the calendar.
Think of the cookie versus the cookie cutter. The template is a cookie cutter, which you can use to stamp out many cookies and then decorate them individually. But you don’t eat the cookie cutter.
Templates typically include “boilerplate” details that are the same for all your events, or almost all of them.
Checkboxes to add multiple events based on a template.
The create / update routine allows you to create one or more events based on your template. Both the body copy for the event and the associated settings (RSVPs on/off, confirmation message, etc.) will be copied.
You can create many events according to your schedule and then add details to them as each event date draws closer. For example, you may publish a whole series of events for a club or professional organization, then add the names of speakers when you want to promote a specific event.
Updating previously created events, based on a template.
When you update your template, you have the option of updating all the events based on the template. An example would be if your standard meeting location changes, or you now want people to call a different number if they have questions.
RSVPMaker tries to warn you if any of those events have been modified independently. For example, perhaps we’ve added speaker or activity details to the April 12 event shown above. We might want to uncheck that one and make any modifications to it manually.
Viewing your events on the calendar.
If all goes well, the result is an interactive calendar that allows you to promote and organize your events more effectively.
If you install RSVPMaker version 6.0+ and are running WordPress 5.0 or later, you will have the option of activating a new RSVP registration form that you can customize using Gutenberg, the new WordPress visual editor. One of the reasons I like Gutenberg is that it makes it easier to define visual components for content creation that happen to lend themselves well to many of my projects.
The new form builder makes it much easier to customize what fields are included, what the labels on those fields are, and the order in which they are presented, both for the person filling out the form and any guests included in their party.
As before, the default form asks for:
First Name, Last Name, and Email
A single phone number, with a drop down list for specifying whether it is a mobile, home, or work number
A section for adding the names of guests
A note field where the person registering can add a comment
You can delete any of these fields and add others. You can determine which fields are required and which ones should also show up in the guest section (if you’ve included the guest section).
Here’s an example of the default form for Online Presenters Toastmasters, a public speaking and professional development club that meets online and focuses on the skills you need to present online. There’s no guest section (that’s more appropriate for offline events like luncheons) but we gather some other information about our guests.
Online Presenters RSVP form
The only field that is absolutely required is email. You can change the label on that one, but a validated email address is required or the form submission will not be processed. Previously, first and last name were also mandatory — and they are still required by default — but you can now specify that they are not required, or not include one or both of those fields on your form. I’ve had people ask for the option of creating simpler forms where they may ask for just the first name or just a nickname, or just an email address and nothing else. Again, that might be appropriate for certain informal online events or for attracting a privacy-conscious crowd.
To see the available form components, type rsvpfield in the block chooser popup or enter /rsvpfield as a slash command on a blank line.
RSVPMaker form builder blocks
Like all content blocks, these form builder blocks have options specific to their content type. Typically, those options will be displayed in the sidebar on the right hand side of the page (if you don’t see it, click the gear symbol and select the Block tab).
Text field options:
Label
Required (yes/no)
Include on guest form (yes/no)
Textarea options:
Label
Required (yes/no)
Include on guest form (yes/no)
Radio Buttons / Select (Drop-Down Field)
Label
Include on guest form (yes/no)
Choices, separated by a comma
Mailchimp Checkbox
Label (defaults to “Add me to your email list”)
Checked by default (yes/no)
Guests
Limit (if any) to the number of guests per party
You can embed other form fields in this section if there is information to be gathered about the guests only. Example: An event for parents and children, where “Grade Level” is an additional field for the children on the guest list.
The Guests widget, with an additional field embedded for a question to be asked about guests, which will not appear on the main form.
By themselves, these blocks are not functional if included outside of one of the special documents created specifically define a form. They are not intended for use within the body of an event post or any other document. I have some ideas about providing a wrapper that would allow you to embed them in other contexts, but for now if you are looking at a document with a headline other than “RSVP Form” you don’t want to be including these blocks.
Overall, I think this is a huge improvement over the system of shortcodes and the primitive form builder provided in earlier versions.
Form upgrade prompt (excuse the typo)
The new form will be used by default on new installs of RSVPMaker on WordPress 5 or greater. Existing RSVPMaker users will see a prompt to upgrade your form on the dashboard. Clicking the Upgrade link will install a new default RSVP Form:Default document, which you can then customize. This default will also be applied to any future events you have on your calendar. Sorry, any customizations you made previously will not be preserved, but I think you’ll find you can re-create them fairly quickly.
A Note on Navigation
Your RSVP form, confirmation message, and any reminder messages you’ve defined are stored as special RSVPMaker documents that aren’t meant to show up on the website. The default RSVP Form and confirmation message can be accessed from the Settings page for RSVPMaker. When you’re viewing one of these default documents, you will see a link at the top of the page to help you navigate back to RSVPMaker Settings.
The default form.
You can use the same default form for all your events, or you can customize the form for specific events. If you create a custom form (or confirmation message), you will see navigation at the top of the screen to allow you to get back to editing the “Parent Event” or visiting the associated screens for setting options and confirmation messages.
This presentation is built around the frustrations and payoffs of updating RSVPMaker and the WordPress for Toastmasters extension to RSVPMaker, as well as starting to create new functionality around Gutenberg, such as the My Marginalia plugin I created to help a client with the “show notes” she posts with recorded videos. Download PPT.
Whether you’re creating a plugin for the repository of a hack for your own website, Gutenberg may be able to help you make it better.
(For anyone not grokking the terminology, Gutenberg refers to the new editor that comes standard with WordPress 5+ and the more JavaScript-centric programming model that comes with it).
Here’s something I found confusing at first. Does this look like legal JavaScript to you?
JSX example from Create Guten Block
In fact, this is NOT legal JavaScript in the sense of being code that your browser would understand. This is the JSX template language, which originated as part of the React JavaScript framework created by Facebook. The idea is to allow you to specify a user interface in an HTML-like syntax that can also include functional components such as <RichText> to specify that an editable rich text field should be displayed at that spot within your application. For example, this is equivalent to instantiating a JavaScript class that will render the RichText component:
setAttributes({ content })}
/>
As part of the development process, we run this source code through a “compilation” step. You don’t compile your JavaScript down to a binary executable, but you feed it through a series of preprocessing steps that translate it into code that is intended to be understandable by all modern browsers and also optimizes / minifies it to download and run faster.
In the process, code like <div>my content here</div> turns into something like:
wp.element.createElement("div","my content here")
Using the Create Guten Block utility, you can create the skeleton of an application and then begin customizing it to meet your needs. You define your editor user interface within the block of code for the “edit” function and the code to be saved to the post in the “save” function.
You can use JSX in both the edit and save functions. Specifically, you use it within the return clause, after you have applied whatever processing might be required to decide what should be output in the editor.
The saved content that will be recorded to the WordPress database looks like this:
Source code for an image, as saved by the Gutenberg editor.
In most cases, what you are saving is legal HTML code wrapped in comments that define instructions to the editor for how this content should be displayed the next time it is edited. Within the opening HTML content, you will often see variables expressed in JSON format within the {curly brackets}.
Gutenberg blocks can also be used like shortcodes, in which case those JSON-encoded attributes will be passed to a PHP function that uses server-side logic to determine what should be output to the user. On the other hand, one reason for adopting Gutenberg is that it allows less server side processing, particularly when your goal is simply to format content in a custom way. You can do that with your save function and regular HTML/CSS.
Demo Code
Here’s simple example showing Gutenberg edit and save functions, plus an “inspector” component for the sidebar.
All this does is create a block in the editor and a save mechanism on the front end, with a custom headline and a line of text you can change using the sidebar component.
We can give it formatting that will be applied both in the editor and on the front end with a style.scss file like this:
.wp-block-wcmia-demo {
border: medium solid red;
padding: 5px;
}
Practical examples:
A custom format you define for product descriptions, executive bios, recipes or other content employed frequently in the context of your specific uses for WordPress. For example, I created a Floating Callout plugin for a callout / sidebar format used as an accent within a post or page. I had essentially been doing the same thing for years with snippets of custom HTML / CSS — but the plugin makes it easier.
A block of content that will exhibit custom behavior when viewed on your site, in combination with either front end JavaScript or server-side processing in PHP (more on that below).
Fussy Code
One important thing to understand is that the “save” function doesn’t merely save content to the HTML content of the post, as it will be stored in the WordPress database. When you retrieve the content, Gutenberg expects it to be organized the same way. If not, you will see an error.
Here’s an example that popped up while I was writing this post.
The unexpected or invalid code warning.
This apparently happened because I was having trouble with the display of my JavaScript code examples, which I recorded here using the Gutenberg component for displaying code. Ironically, Gutenberg seemed to be confused by the JSX examples. All the < symbols in HTML or component tags were being displayed as entity codes (<).
To get the code to display properly, I had to do a search-and-replace in Windows Notepad. That worked in terms of front-end display, except that Gutenberg would no longer allow me to edit those blocks as blocks in the editor.
Wrapping a Block Around Other Blocks
When you define Edit and Save functions using the InnerBlocks component, you can define a block that wraps around other content blocks (paragraphs, images, etc.). The code below is from My Marginalia, which applies special fomatting to the wrapped content. The Floating Callout plugin I mentioned does the same thing.
There’s also a “Limited Time” block in RSVPMaker that uses an InnerBlocks component in combination with server-side rendering to suppress the display of content that is past its expiration date.
Displaying a notification in the WordPress admin following an event like a post being saved used to be fairly easy in PHP.
add_action('admin_notices', 'rsvpmaker_template_notice');
function rsvpmaker_template_notice () {
global $post;
if(isset($_POST['rsvpmaker_template_data'])) //detect some trigger
echo '
It took me months of research to figure out how to do essentially the same thing in Gutenberg because those PHP-generated notifications aren’t shown on the editor screen when Gutenberg is active. The following code is based on a tip from a collaborator on Github and my own study of internal WordPress code to figure out how it detects such events (the example I found was related to saving the content of metaboxes on post save).
Blocks versus Shortcodes
Here are some shortcode examples, one where the output is based on the attributes added to the shortcode and another that wraps around a piece of content (the [caption] shortcode used in the Classic Editor to format image captions and allow them to be treated as a unit with the accompanying image).
The PHP code to process your shortcode can then be something like this:
',$size,$content);
return $content;
}
function my_shortcode_wrapper($atts = array(), $content = '') {
//apply some extra formatting or logic to $content
return $content;
}
You can register a Gutenberg block to get run through a server-side routine in much the same way:
Although I like many aspects of Gutenberg, I wasn’t prepared to refactor every bit of PHP into JavaScript. In particularly, I had a lot of functionality built into metaboxes displayed beneath the classic editor, and metaboxes are discouraged in the Gutenberg framework. Mine included some JQuery interactivity that seemed to clash with the Gutenberg code.
The coping mechanism I devised for RSVPMaker was to make a few basic options like setting the date and turning RSVP registrations on or off available within the sidebar to the editor. The more elaborate functionality like setting event pricing and customizing the registration form moved to a separate screen.
Here’s how you can do that, in pseudocode simplified from the actual code used in RSVPMaker.
add_action( 'admin_bar_menu', 'my_rsvpmaker', 99 );
function my_toolbar($wp_admin_bar) {
global $post;
if(isset($post->post_type) && ($post->post_type == 'rsvpmaker') )
{
//a new menu
$args = array(
'id' => 'rsvpmaker_options',
'title' => 'RSVP / Event Options',
'href' => admin_url('edit.php?post_type=rsvpmaker&page=rsvpmaker_details&post_id='.$post->ID),
'meta' => array( 'class' => 'edit-rsvpmaker-options')
);
$wp_admin_bar->add_node( $args );
//a subnew menu, parent set to id of item above
$args = array(
'parent' => 'rsvpmaker_options',
'id' => 'my_form',
'title' => 'My Form Page',
'href' => admin_url('edit.php?post_type=rsvpmaker&page=my_form_page&post_id='.$post->ID),
'meta' => array( 'class' => 'my_form')
);
$wp_admin_bar->add_node( $args );
}
}
add_action('admin_menu', 'rsvpmaker_admin_menu');
function rsvpmaker_admin_menu() {
//submenu menu under post type
add_submenu_page('edit.php?post_type=rsvpmaker', __("Event Options",'rsvpmaker'), __("Event Options",'rsvpmaker'), 'edit_rsvpmakers', "my_form_page", "my_form_page" );
//standalone menu
add_menu_page(__("Event Options",'rsvpmaker'), __("Event Options",'rsvpmaker'), 'edit_rsvpmakers', "my_form_page", "my_form_page" );
}
function my_form_page() {
$post_id = (isset($_REQUEST['post_id'])) ? (int) $_REQUEST['post_id'] : false;
if($post_id)
{
if(isset($_POST['my_variable']))
{
update_post_meta($post_id,$_POST['my_variable']);
echo '
This shows hooking into the action for display of the admin bar, getting access to the $wp_admin_bar object, and calling add_node methods that add our custom menu and submenu.
We register a custom admin page and define a function for displaying it. If the user clicks through from the admin bar (while viewing a post on the website or in the editor), that link will have the post id added to the URL query.
If the post ID is set, we display a form with options specific to that post (an RSVPMaker event in this case). Otherwise, we retrieve a list of posts and give the user a form they can fill out to display the options for the post they are interested in.
Check back on Sunday or Monday for updates to this post.
One of the differences between “traditional” WordPress plugin development and creating software that works with the new Gutenberg editor is the scarcity of adequate, understandable documentation.
I speak as a WordPress developer who is largely self-taught, by which I mean I’ve learned by reading books, tutorials and the official WordPress documentation for developers. For virtually anything I wanted to learn how to do, there has almost always been a reasonably clear function definition if not a tutorial or a StackOverflow question and answer that was in the ballpark. Over the years, I have become reasonably proficient in PHP and MySQL and WordPress utility functions, actions and filters. Within those bounds, I like to think I’ve occasionally had an original idea or two.
The Gutenberg framework is in a much different place, in terms of documentation and code examples. There are some good tutorials out there on how to create Gutenberg blocks (units of content that can have their own editor properties). Thank God for create-guten-block, which makes many aspects of setting up your development environment easier if you’re just learning.
There is a Gutenberg Handbook, but a lot of it seems to be written for people who already understand React (the Facebook open source framework from Facebook that Gutenberg is based on). I can do a few things with JQuery but until recently didn’t realize how behind-the-times I was, at least from the viewpoint of enthusiasts for “modern JavaScript.” Telling me that the WordPress state management system is similar to Redux (yet another JavaScript framework often used with React) doesn’t help me.
If I wanted to display a custom notification to be displayed anywhere else on the administrator’s dashboard, there would be dozens of tutorials that would tell me exactly how to do that with a few lines of PHP. But those PHP-generated notifications aren’t displayed on the editor screen when Gutenberg is active. Aside from any technological reasons for this, it’s part of an intentional decluttering of the editor screens.
That means if you want to display a notification on the Gutenberg-powered editor screen, you have to do it with Gutenberg APIs. It has taken me literally months to figure out how to do that. All my Googling for answers came to naught. Finally, I came across a discussion on on the Github issues discussion board for Gutenberg where someone else was asking approximately the same question.
In response, one developer gave a pretty detailed example of how to generate a notification (thank you, Daniel Bachhuber). The only missing piece was some way of making the notification display in response to an event, like a post being saved. Mr. Bachhuber told me I would have to do more research because he didn’t know that, either.
In my use case, certain posts of the type rsvpmaker are used as templates for specific events. The RSVPMaker plugin needs to display a notice prompting the user who has updated a template to click through to another screen if they want to create or update events based on that template. This feature has essentially been broken in RSVPMaker when used in combination with Gutenberg.
To get the rest of the way to an answer, I had to go spelunking through other people’s source code. The routine shown below is loosely based on code Gutenberg uses internally to save metabox content on post save. I wrapped the code modeled on that example around my createNotification command, and finally I had something that worked.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In this example, the url for the admin page where generate event posts based on a template is localized under the rsvpmaker_json variable. On the PHP side, we test that the post is of type rsvpmaker before outputting that variable. In the JavaScript code, we test that the url is set to something other than an empty string.
We then subscribe to Gutenberg events. Every time a triggering event in the editor happens, the subscribe function fires.
We use functions like wp.data.select( ‘core/editor’ ).isSavingPost() to determine what sort of event that is. This checks whether the post is in the process of being saved (and verifies that it’s not an autosave). If yes, then the notice is displayed.
Updated: Originally, I had an issue with the same notification being added repeatedly if the user made additional changes and updating the post again. After attending Zac Gordon’s talk at WordCamp Miami, I realized I could explore the currently registered notifications from the console using
wp.data.select('core/editor').getNotices()
Console detective work.
I saw that my notices were being assigned a random id. Once I added id:’rsvptemplateupdate’ to the createNotice command, the problem with notifications being added repeatedly went away. Apparently, I just had to give the notifications system a clue of how to check whether it had already been added.
I’m still getting all this figured out.
Custom notification -when the user saves an RSVPMaker template, we prompt them to create or update events based on that template.
If you are evaluating RSVPMaker for use on one of your own projects, our new demo sandbox site makes it easier to check out all the features you would use as an event author or site editor. Only a few admin functions are off limits, allowing you to test setting up events, changing parameters such as event pricing, and embedding an event listing or single event in a blog post or web page.
Log in here (no password required):
Creating and editing an event.Editing a calendar listing.
In response to a user request (underwritten with a donation to the cause), RSVPMaker now allows you to establish coupon codes for discount pricing for an event.
Setting coupon codes.
Specific pricing, such as an “Early Bird” registration offer can also have an expiration date (that’s not new).
Another feature, probably long overdue, is that you can have RSVPMaker send a “Payment Required” reminder when someone registers for your event but doesn’t pay. In e-commerce terms, this is essentially an “abandoned shopping cart” problem that needs solving if you want people to pay for an event in advance and do not want them showing up thinking they are registered when they failed to complete the registration with a payment.
This is still optional. Some groups I’ve worked with, such as professional networking organization, want people to register in advance but are fine with taking a check at the door. They offer online payment as an option, not a requirement. On the other hand, if you’re registering people for an online class, you know you have to get that payment online (no “at the door” for you).
To turn on payment reminders, go to the RSVPMaker settings screen, Payments tab.
If you want to change the notification headline or body copy from the defaults, you can do that from the Notification Templates screen under RSVP Mailer. I provide codes for including elements such as the email subject line, which are documented at the bottom of that screen.
Payment Notification template
This is also where you can customize the notification sent to the event owner and the confirmation message sent to the person registering for an event.
Limited Time Content (Updated)
The Limited Time Content wrapper block for Gutenberg has also been updated to allow the option of setting expired content to be automatically deleted. This is a container into which you can place paragraphs, images, and other content (InnerBlocks in Gutenberg terminology). You can then set a start time, an end time, or both.
The Limited Time Content block contents will be hidden if the current time is before the start time or after the end time. The idea is to allow you to display an event promotion — or any other content that only makes sense to display for a limited time, such as a limited-time price for goods or services — without worrying that it will still be showing up weeks later because you forgot to take it down.
By default, you will have to go back into the editor and remove expired content after the end date/time has passed. However, as of release 5.8.5, you can have RSVPMaker automatically delete that block of expired content.
Note: It took me several tries to find a regular expression search and replace pattern that would delete the target block and leave all other content alone. If you’re not inclined to trust the software to do this for you, you can stick with the manual method. If you use the automated method, you may want to make sure you have WordPress configured to track revisions so you can retrieve the deleted content if necessary.
A new “Limited Time Content” wrapper block for the WordPress 5+ / Gutenberg editor allows RSVPMaker to control the display of whatever blocks of content you place inside. You can set it to not display the content before the specified start date and time (for example, the start of a sale) or after the end date and time (the end of the sale).
A promotion with an expiration date.
You can provide a start date, an end date, or both.
One of my motivations for creating RSVPMaker in the first place it that I think it looks bad for a website to be advertising an event that has gone past as if it were still in the future. The same is true for a an announcement that is long past its expiration date.
The Limited Time Content block can be added to any blog page or post. You could use it inside an RSVPMaker event post as well (for example, to call attention to early bird event pricing that should no longer be advertised after a certain date).
This wrapper component can be equally useful for staging content on your website that should not be advertised prior to a certain date or time. Examples might include the launch of a product or of a political campaign.
Because it’s set up using Gutenberg’s InnerBlocks, you can place paragraphs, headings, images, and other blocks of content inside the Limited Time wrapper. A shaded border makes it easier to see what content is inside, versus outside, the Limited Time area. Click on the border to set the start time and / or end time.
Note that caching plugins could interfere with this component starting or ending the display of a block of content at precisely the start or end time you’ve specified — the logic of what content to display or not display only gets executed on a dynamic page load. Even if it works perfectly, you’ll want to go back and remove blocks of content that have expired, rather than leaving them in the body of a post indefinitely.
Still, this should save time on the chore of adding and removing content intended to be displayed on you your site for only a limited time.
Update: As of release 5.8.5, you can set RSVPMaker to automatically delete a block of content that has expired (passed the end date that you set). See related post.
RSVPMaker now includes its own support for online payments via the Stripe service, including a new Gutenberg block for defining payment buttons to be embedded in a page or post. This means you can use the same online payments mechanism for event payments and other sorts of payments, such as donations, consulting fees, or membership dues.
In the context of an event you’re charging for, the payment button appears in the confirmation message for the registration with the price calculated based on what you entered on the RSVP Event Options screen. It’s also possible to configure the software to send an automated email reminder to anyone who registered but didn’t immediately pay, allowing them to complete the transaction.
Event Payments with Stripe
This stand-alone payment buttons were created partly to support the WordPress for Toastmasters project, which uses RSVPMaker for event scheduling, and includes a “dues schedule” option for fees that are prorated depending on the month when someone joins. The example shown above is from Online Presenters Toastmasters, where online dues payments are particularly important since the club has no physical meeting space.
Previously, RSVPMaker offered an integration with the WP Simple Pay for Stripe plugin, which is still supported (and may make sense if you use it for other purposes). However, if you use RSVPMaker’s built-in support for Stripe, you should deactivate WP Simple Pay to prevent conflicts.
Here is an outline of how it works.
After creating an account with Stripe, you will need to obtain two key codes from that service and enter them in RSVPMaker. To use RSVPMaker’s stripe integration outside of an event, look for the Stripe Charge block in the WordPress editor. Enter the payment parameters into the Stripe Charge block.The block is rendered on the front end of the website as a “Pay with Card” button.
In addition to recording a single payment, the Stripe payment button can be configured to record a subscription payment, meaning the user will be billed again after a set period. The supported intervals so far are monthly, yearly, and every six months.
This functionality is all brand new, so if it doesn’t work correctly, let me know.
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.
