The last tutorial was about creating a settings page and a custom post type. In this tutorial we will extend our plugin by creating a metabox for our custom post type, add an option to refresh MailChimp lists and also to choose a MailChimp list for our form.
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: MailChimp Form and Form Submission
- MailChimp WordPress Plugin with React: MailChimp Widget
- MailChimp WordPress Plugin with React: AJAX and React
We will first create helper functions to handle calls with the MailChimp API. After that, we will extend our settings page and the last part of this tutorial will be creating the metabox to choose a MailChimp list.
Functions for MailChimp Lists
Before we start coding, let’s create a file where those function will reside. Create a new file
Let’s include that file within our main class
Now that our file is included, add the first function:
We are first using the operator
use to refer to a class defined inside a namespace.
Namespaces are used to encapsulate some of the code. By doing that, we are safe from declaring the same function names or classes. If you view our file
inc/MailChimp/MailChimp.php, you can see that the class
MailChimp is defined under a namespace
In the function
mwp_get_mailchimp_lists(), we are trying to get our lists from a transient. If we don’t have any, we are then getting the API key from our setting
Once we retrieve all the lists with the MailChimp API, we are building our array with the list ID and the list name. At the end of the function, we are returning the lists.
Refreshing the MailChimp List
If we are creating new lists, we also want them to be available to us inside the WordPress admin area. When that happens, we need to have a way to refresh the MailChimp lists. Inside our new file
functions-mailchimp.php add this:
The first thing we have to do is deleting the transient. That way, when we call the function
mwp_get_mailchimp_lists(), it will return a newly creating array of lists. By using the
catch we can easily display a success message or an error message.
We will display that message inside our settings page.
To refresh the MailChimp lists, we need a refresh option in our settings page. Add a new button to our form in the function
mwp_settings_page() for the settings page:
When we click on that button, we will submit a new parameter inside the global
$_POST variable. Add this code before the form:
$_POST has the
mwp_reset_lists, then we will call the function
mwp_refresh_mailchimp_lists() to refresh the lists. The returned
$result will contain the message and also the type of the message. This information will be used to set a different color to the label.
Creating the Form Metabox
In this last part of the tutorial, we will create a simple metabox. This metabox will contain a simple dropdown from which we can select a list to use. Create a folder
admin inside the folder
inc. Inside the folder
admin, create a new file
This file will contain a class that will create the metabox. Let’s start defining it:
In this first part, in the
constructor method we are hooking the method init_metabox(). This method will be called when the action
load-post-new.php is called.
Inside the method
init_metabox(), we are hooking the method
add_metabox to the action
add_meta_boxes. This action is used for creating metaboxes. Another method
save_metabox() is hooked in the action
This method will save the values from the metabox fields.
Adding the Metabox
To create a metabox, we have to add it using the method
add_metabox(). Insert this code after the method
add_metabox is now using the WordPress function with the same name to add the metabox. We are providing this parameters:
- form-metabox – the ID of the metabox
- Information – translatable title of the metabox
- render_metabox – method that will be called to render the metabox fields
- mwp_form – custom post type to which we add the metabox
- advanced – position of the metabox
- default – priority of the metabox
The edit or insert page of a form (our custom post type) will now create a new metabox. When creating that metabox, WordPress will call the method
Inside that method, we are creating a simple nonce field for security reasons. After that we are retrieved a saved MailChimp list ID. We are also getting all our MailChimp lists from the function
Once we have all our data available, we are creating a table with a
select element. We are iterating through each of our list and creating an option for it with it’s ID as value and it’s name as text.
By using the function
selected(), we will output the
selected="selected" on the saved list (if any).
Saving the Metabox
As we have learned before, the values from the metabox fields are saved in the method
save_metabox(). Add this code at the end of our class
This method first checks if the nonce is valid. After that, there are some additional checks such as if we the current user can edit our form, if WordPress is performing an autosave or if this form is actually a revision.
If everything passed correctly, then we are checking if the field with the name
mwp_mailchimp_list_id is submitted. If it is, we are saving that value.
Displaying the Metabox
metabox-form.php is now complete, but we still need to include it in our main plugin class. Let’s add it:
We are using the check
is_admin to include that file only when we are in the admin area. This will still not be working as supposed. We have to instantiate the class
For purposes such as this, we will define a new method
create() inside our main class
MWP. Add this code inside that class:
This only code inside is used for instantiating our metabox class when we are inside the admin area. We also have to call that method. Our function
mwp_run() will call this method:
Now you can open your admin area and try to create a new MWP Form.
In this tutorial we have learned how to create a simple metabox. Furthermore, we have also seen how to use the namespaces and the MailChimp API. In the next tutorial, we will create a class that will create the form on the front end and we will also create functions to handle form submission.
Are you understanding everything here? If you have any difficulties understanding a part of this tutorial, feel free to comment below.