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 functions-mailchimp.php.
Let’s include that file within our main class MWP:
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 DrewM\MailChimp.
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 mwp_mailchimp_api_key.
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 try and catch we can easily display a success message or an error message.
We will display that message inside our settings page.
MailChimp Settings
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:
If the $_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 metabox-form.php.
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.php or 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 save_post.
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 init_metabox():
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 render_metabox.
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 mwp_get_mailchimp_lists.
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 MWP_Form_Metabox:
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
Our file 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 MWP_Form_Metabox.
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.
Conclusion
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.
Become a Sponsor
Share this: