In the last tutorial we have created everything we need to render our MailChimp form and also to subscribe our users. In this tutorial we will create a simple MailChimp widget. This widget will render our form in any sidebar we place it.
This tutorial is part of a series MailChimp WordPress Plugin with React:
- MailChimp WordPress Plugin with React: Introduction
- MailChimp WordPress Plugin with React: Settings & Custom Post Type
- MailChimp WordPress Plugin with React: Metabox & MailChimp Lists
- MailChimp WordPress Plugin with React: The Form and Form Submission
- MailChimp WordPress Plugin with React: MailChimp Widget
- MailChimp WordPress Plugin with React: AJAX and React
Before we create our widget, we will need a helper function to list all the available forms. Why? We need it so that we can create a simple dropdown when configuring our widget and setting a single form to be used in it.
That way we can have many MailChimp widgets with different forms and thus subscribe users to different lists (with different welcoming emails).
The Helper Function
We will name our helper function
mwp_get_all_forms. Open our file
inc/funcitons-form.php and add this:
In this function we are using the
get_posts function to retrieve all the forms that are published.
Let’s now create our widget to display the MailChimp forms. Create a new file
class-mwp-widget.php in the
inc folder. Put this code first:
Here we defined just a constructor method that will create this widget in the WordPress dashboard with the informations provided. This method is also used when rendering the widget on the front side of our site. Let’s now create a form for our MailChimp widget that will be rendered and used in dashboard.
MailChimp Widget Fields
$instance holds all the data for the widget we are currently viewing. Since there can be MailChimp Widgets as many as we want, each of them holds unique data for their instance. This is an array with all the data.
We are using the function
mwp_get_all_forms() to get all the forms. The selected form ID is stored in
$instance. If there is no form ID, the variable
$form_id will be empty since the widget was just placed in the dashboard and there is no data yet.
After all variables are set, we are creating the fields for every variable we are using. When creating the dropdown of all our forms, we are iterating through all the forms and also use the function
selected to create the attribute
selected="selected" on the selected option.
Saving the fields
All those fields have to be saved in the database so that we can then also use them on the front side.
In the method
update() we have two variables
$old_instance. The variable
$new_instance is holding the new data that was entered before hitting save.
In this method we can make some checks between old and new but for this tutorial that is not needed. At the end, we are returning an array
$instance with all the new (or old) data.
Rendering the MailChimp Widget
The last part of our widget is to render it. This is done in the method
We are repeating the process of setting variables from
$instance array. If variable
$form_id does not contain any ID, the widget will not render. Otherwise, we are rendering all the data and also the form by using a function
mwp_render_form(). We created this function in the last tutorial.
Including the MailChimp Widget
Since now we have done everything for our MailChimp widget, we have to include this file in our main plugin class. This is done in the method
Registering the MailChimp Widget
Registering widgets in WordPress is consisted of two parts. The widget is registered by using the function
register_widget. This function needs to be called in an action hook
Let’s add that hook in the method
We are hooking a method
register_widgets that is defined inside our main plugin class:
In this tutorial we have now learned how to create a WordPress Widget. We have used the default Widget skeleton for creating any WordPress widget. By using our defined functions for working with forms, we can easily display the form on the front side and also list forms in the WordPress dashboard.
Go now and render those forms! 🙂Become a Sponsor