Building a WordPress Plugin with Vue and Kanye Rest

#wordpress #vue #fetch #wordpressplugin

This tutorial walks you through the process of creating a WordPress plugin with Vue.js library that fetches and displays random Kanye West quotes every five seconds.

We are going to use https://api.kanye.rest/ endpoint to grab random Kanye West quotes. Get more information on this service here.

You can grab the complete Github repo here.

1. Creating a WordPress Plugin

Inside your WordPress installation folder, navigate to wp-content/plugins, and create a sub-folder called kanyequotes :

Inside wp-content/plugins/kanyequotes folder, create a kanyequotes.php file and add the following content:

<?php
/*
Plugin Name: Kanye Quotes
Description: Random Kanye West quotes
Version: 1.0
*/

In the above snippet, we simply provided a plugin name, description and version.

This is, how it looks like in the admin interface:

2. Creating and registering a Shortcode

Shortcodes are used to add content to posts and pages. To create a shortcode, add the following code in kanyequotes.php file:

function handle_shortcode()
{
    return "<div id='mount'></div>";
}

The handle_shortcode function returns a dom element whith an id called : mount. This is where our quotes will be output.

To register our shortcode, we are going to use the built-in WordPress function named add_shortcode:

add_shortcode('kanyeQuotes', 'handle_shortcode');

This function takes the shortcode name as first parameter and the handler function that processes that shortcode logic as second parameter.

The complete code for creating and registering a shortcode looks like:

function handle_shortcode()
{
    return "<div id='mount'></div>";
}
add_shortcode('kanyeQuotes', 'handle_shortcode');

3. Integrating Vue.js in a WordPress

To add Vue.js library in WordPress, add the following code in kanyequotes.php file:

function enqueue_scripts()
{
    global $post;
    if (has_shortcode($post->post_content, "kanyeQuotes")) {
        wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/vue@2.6.11', [], '2.6.11');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

Next, create kany-quotes.js file at the same level of kanyquotes.php. Inside this file we are going to write our vue app. But before, let's get it loaded with wordpress:

wp_enqueue_script('kanye-quotes', plugin_dir_url(__FILE__) . 'kanye-quotes.js', [], '1.0', true);

The complete kanyequotes.php looks likes:

<?php
/*
Plugin Name: Kanye Quotes
Description: Random Kanye West quotes
Version: 1.0
 */

function handle_shortcode()
{
    return "<div id='mount'></div>";
}
add_shortcode('kanyeQuotes', 'handle_shortcode');

function enqueue_scripts()
{
    global $post;
    if (has_shortcode($post->post_content, "kanyeQuotes")) {
        wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/vue@2.6.11', [], '2.6.11');
        wp_enqueue_script('kanye-quotes', plugin_dir_url(__FILE__) . 'kanye-quotes.js', [], '1.0', true);

    }
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

The add_action function tell WordPress to load the scripts we defined in enqueue_scripts function when the wp_enqueue_scripts event occurs.

Now, inside, our kanye-quotes.js let's:

create a vue component

new Vue({

});

indicate to our vue component which part of our web page to handle

new Vue({
  el: "#mount",

});

set up data rendering

new Vue({
  el: "#mount",
  template: `<div>
        <h1>Kanye Quotes</h1>
        <div>
            {{quote.quote}}
        </div>
      </div>
 `,
  data() {
    return {
      quote: {}
    };
  },

});

set up a fetchQuote method, that will fetches kanye west quotes every five seconds:

new Vue({
  el: "#mount",
  template: `<div>
        <h1>Kanye Quotes</h1>
        <div>
            {{quote.quote}}
        </div>
      </div>
 `,
  data() {
    return {
      quote: {}
    };
  },


  methods: {
    fetchQuote() {
      var url = "https://api.kanye.rest/";
      fetch(url)
        .then(response => {
          return response.json();
        })
        .then(data => {
          this.quote = data;
        });
    }
  }
});

call fetchQuote inside mounted lifecycle

new Vue({
  el: "#mount",
  template: `<div>
        <h1>Kanye Quotes</h1>
        <div>
            {{quote.quote}}
        </div>
      </div>
 `,
  data() {
    return {
      quote: {}
    };
  },

  methods: {
    fetchQuote() {
      var url = "https://api.kanye.rest/";
      fetch(url)
        .then(response => {
          return response.json();
        })
        .then(data => {
          this.quote = data;
        });
    }
  },

  mounted() {
    this.fetchQuote();
    setInterval(() => this.fetchQuote(), 5000);
  }
});