Building WordPress widgets with Vue.JS

Why use Vue.JS with WordPress plugins and widgets

Working with VueJS is extremely easy, we can quickly write simple and structured code without too much size overhead(only 30kb size). Very easy to read, maintain and their documentation is KING! What easier way to show the advantages of using VueJS than  building some real life example.

Now lets build and example WordPress widget using Vue.JS

The widget I’ll be building today is a Newsletter subscription widget which will use AJAX to subscribe the user to your MailChimp list.

  1. Create the widget HTML markup
  2. Load the needed JS and CSS files
  3. A word on nonces in AJAX
  4. Create the widget itself and do the VueJS markup
  5. Register the AJAX action that will process the request

Create the widget HTML markup

I think this is the easiest part in the whole article, although I haven’t tested the markup in different themes, and I’m not sure how it will perform. The HTML is as simple as a form with a name and an email field.

The CSS is also not so sophisticated:

Load the needed JS and CSS files

That includes planning which JS libraries we’ll need and also plan the dependencies order so we can assign the order of loading.
Functions we’ll use:

That is how styles and scripts are included in all WordPress plugins and widgets, you hook yourself to the ‘wp_enqueue_scripts’ action and load your files in the following way:

We’re using SweetAlert2 to display a modal telling the user, he/she successfully subscribed to our newsletter.

A word on nonces in AJAX

Nonces are a unique key, your site creates to verify actions. This is very useful in AJAX calls, as you want to be sure that calls originate from your website, and thus remote exploits and malicious use will result in “403 Forbidden error”. In order to pass the nonce to the Javascript file I use the function “wp_localize_script“. From the above script:

From that point forward you have a global variable “ajax_object” and can access the parameters you’re passing like this:

In order to verify your nonce in your AJAX controller you need the function: “check_ajax_referer

Create the widget itself and do the VueJS markup and code

In this part we’ll need extended knowledge on how to develop WordPress widgets, thankfully that can easily be obtained by the Codex. I’ll work myself up the following widget skeleton, I’ve gathered from the Codex page I linked.

In the “public function widget( $args, $instance )” we’ll add the HTML markup of the widget we made earlier, in the “public function form( $instance )” we’ll add the settings of the widget, which in this case are MailChimp API Key and ListID, and in “public function update( $new_instance, $old_instance )” I’ll handle the saving of the settings. The final code will look something similar to:

Now if we register our widget in our functions.php or plugin file like this:

We should see it in the widget list looking similar to the following image, the settings save, however our widget does not do anything for now. In order to make our plugin actually do something we’ll need to get our hands dirty with some VueJS code and a little more PHP.

The widget VueJS markup is as follows:

And the JS is as follows:

What this code effectively does is:

  • If the user has subscribed the widget remains hidden
  • If the widget just subscribed a “Subscribed check” appears in place of the widget
  • Otherwise the form for the subscription is shown.
  • When the user clicks subscribe, the subscribe method is called. When user subscribes the form is hidden and the “Subscribed check” is shown instead. window.localStorage saves an entry, telling our scripts on next load that the user already subscribed to the Newsletter.

Things are starting to look pretty decent, however the AJAX is still missing and thus the form doesn’t do anything yet.

Register the AJAX action that will process the request

Now, the most important part follows. To process the posted data, and to subscribe the user in the Newsletter. For this part we will once again have to read the WordPress documents and more precisely the part about AJAX in plugins.

I’m passing the data for “syncMailchimp” as an anonymous class because I want to implement the “MailchimpData” interface and make the code a little more future proof. If we do some changes in the future the interface will make sure we deliver the needed functions. But why not define a class but use the anonymous one you ask. Well because I only use it once in the whole code, and that is the bookcase usage for anonymous classes.

Although the whole process seems like a lot of work, VueJS actually saved me hours of coding!

You can download the code for this how-to in

and it is currently undergoing review process to publish it in the WordPress repository.
Update: The plugin is now published in the WordPress repository and you can download it here.

About Pavel Petrov 2 Articles |  18 How-tos
Pavel is a senior developer for the last 7 years, with extended interest in Linux administration, WordPress and Symfony.

Be the first to comment

Leave a Reply

Your email address will not be published.


*