MailChimp is great solution if you are starting with a newsletter and don’t have a budget for it. You can have up to 2000 subscribers for free. In this tutorial we will start a series where we will create a MailChimp WordPress plugin using React so that people can easily subscribe on our site.
In this tutorial we will only introduce us with the project and prepare some base files for our plugin.
I have already written about React when creating widgets and forms, so that may be a good starting point for you if you have never worked with React:
- How to Create a WordPress Widget with ReactJS and REST API
- How to create a WordPress Login Form with React
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
What will we build with our MailChimp WordPress plugin?
We will build a custom post type MailChimp Form where we will create as much as forms as you want. In those form we will choose a list from the MailChimp and also insert a redirect URL. The redirect URL will redirect our subscriber.
We will also redirect visitors that have already subscribed even though we will not subscribe them one more time.
This series of tutorials will also show you how to create a simple MailChimp Widget where you will be able to choose to which form to use. Another thing we will build is a simple MailChimp shortcode. This shortcode will display a MailChimp form, so that you can even catch people emails inside your content.
MailChimp WordPress plugin will also have an option to display a MailChimp form at the bottom of your content. We will build and code everything so that it works without JavaScript (React).
The last piece will writing some JavaScript with React to handle form submissions without refreshing the page.
At the end of this series, you will actually have a great plugin for converting visitors into subscribers.
To follow this tutorial series, you should have this already done:
- WordPress installed (recommended locally)
- Editor to write code
MailChimp WordPress Plugin
So, let’s start getting everything ready for our plugin. Inside your WordPress installation folder, go to wp-content/plugins and create a new folder wp-mailchimp-plugin. I think there is no such plugin name or slug inside the WordPress Plugin repository, so we should be safe from getting some updates from another plugin.
Inside that folder create a file with the same name wp-mailchimp-plugin.php. Add this to that file:
You can now go to the WordPress admin dashboard and activate this plugin on the Plugins page.
MailChimp API
We will also need to use a MailChimp library to work with the MailChimp API to subscribe new emails. A really simple one that I have tried and used comes from Drew McLellan who developed the MailChimp API library.
Download that repository and copy the files that are inside the folder src. Go to your plugin’s folder and create a new folder inc. This folder will be used for various files that we will include inside our main file wp-mailchimp-plugin.php.
Now create a new folder MailChimp inside the inc folder. Paste those files there. We will work only with the file MailChimp.php but for maybe some future extensions, you can have the other two files there. You never know if you will extend it for your own usage.
Defining Constants
Constants in a plugin can be really useful to use. In our example, we will have two constants:
MWP_PATH– it will contain the path to our plugin folder so that we can easily include other files from our pluginMWP_URL– it will contain the URL path to our plugin folder so that we can easily enqueue scripts or styles
Add this to our main plugin:
MailChimp WordPress Plugin Class
We will create a class for our plugin that will be the main object which will start once every other plugin has been loaded. We will shorten the class name and call it MWP.
The class MWP will use the Singleton pattern so that we may get that main object throughout the whole WordPress page life cycle. That way we can define a variable in the beginning, before the page even starts loading and change its value somewhere else, for example: in the footer.
Add this class to our main plugin file:
Aside from the Singleton pattern, we have a method includes. This method will include all the required files we will use in our plugin.
We also have another attribute $errors that will hold errors from our forms.
Starting the plugin
To start our main class, we have to instantiate it. This will be done in a separate function. Add this chunk of code at the bottom:
In the function mwp() we are instantiating our main class and returning it. When this function is used, only one instance of our main class will be used and returned. This is the benefit of the Singleton pattern.
The function mwp_run() is the function that will be the first to instantiate our MWP class. This function will also call all the methods that have to be run before the page begins to load.
Since we want it to run after all plugins have been included and loaded (the activated ones), we are using the action plugins_loaded. Our hooked function mwp_run() will then be called after every plugin has been loaded.
Conclusion
We are done with this tutorial. Now we have a good starting point where we already prepared our MailChimp API and our main plugin class MWP. In the next part of this series we will go a little bit further and define a settings page and create our custom post type.
If you have any questions, feel free to add them in the comments below! Also, if you have ever worked with the MailChimp API or another newsletter provider, you can write about your experience in the comments below.
Become a Sponsor
Share this: