We are continuing on building the MailChimp WordPress plugin. Now that the base of our plugin is set we can continue on creating the settings page and a custom post type Form that will hold our list information.
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 and MailChimp Lists
- MailChimp WordPress Plugin with React: MailChimp Form and Subscription
- MailChimp WordPress Plugin with React: MailChimp Widget
- MailChimp WordPress Plugin with React: AJAX and React
Remember that every code you use from this article can be used in any of your commercial and personal projects.
The Settings Page
Our settings page will hold our api key information and it will be the container for any future settings we could add for our MailChimp WordPress plugin. Create a new file
settings.php inside the
Once created we will have to include it in our
Hooking to Admin
WordPress will create our settings page and show it only in the admin area of our site. Because of that we will have to register our settings page only in the admin area. This is done by using the action hook
admin_init. Let’s create a new method in our
MWP class called
This method will contain some of the main hooks that are used in our MailChimp WordPress plugin. This method will be called right after our main class includes all of the required files. So, let’s extend the
mwp_run function at the bottom of the main plugin’s file:
If you try to run this now in the admin area, it will give you an error that the function
mwp_settings is not set. We will do that now.
We have to add a settings page by using the WordPress function
add_options_page(). Add this code to the file
The parameters we have provided here are:
MWP– Page Title
MWP– Menu Title
manage_options– Capability that a user has to have to see this menu
mwp-settings– Menu slug
mwp_settings_page– Function name to be called when visiting that menu
Now you can see a new menu item MWP under menu Settings.
At the end of that file we have created the function
mwp_settings_page that we will define next. In this function we will create some simple HTML to hold our label and the input to insert the MailChimp API key.
We will also have the logic to save that data. Let’s add the rest of the code for that page:
The first lines are checking if we have submitted the form. This is done by checking if the save button is set in the superglobal
$_POST variable. If it is, then our form is submitted and we can save the MailChimp API key.
We are saving the API key in the option
mwp_mailchimp_api_key and also displaying a success message to the user who has saved the data.
At the end we are also getting the new data from the database using the function
The rest of the code is mostly HTML with some PHP or WordPress functions. The WordPress function used here is the
_e() function used for translating strings.
Now we can use the option
mwp_mailchimp_api_key to get the API key for communicating with the MailChimp API.
The Form Custom Post Type
Our custom post type will be a form. We will use that form in widgets and shortcodes for displaying the form. This will give a modularity and ability to display the form with the MailChimp list attached to it in various parts of our site.
To register our custom post type, we need to create a new file
cpt-form.php in the
inc folder. Include that file under the
settings.php in our
When registering a custom post type, we have to register that function in the action hook
init. We will add that in our previously made method
If we refresh our site, we would end up with another error on both admin and front areas of our site. Open the file
cpt-form.php and add this code to register our custom post type:
Now you can find a new menu item in our admin area by the name: MWP Form.
In this tutorial we have learned how to create a simple settings page for our MailChimp WordPress plugin that will contain every global setting we could need for our plugin to work properly. The custom post type Forms is a modular part of our plugin that we can use for various parts and functionalities of our site. In the next tutorial we will create a simple metabox for our custom post type that will contain a dropdown of lists from MailChimp.