WordPress Plugin Development with Vue.js (2021)

A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress.

In this course, we are going to initialize our Wordpress instance. Then we will create a Vue.js application next to our Wordpress environment in order to create our first Vue.js plugin.

Why We Make Plugins?

If there’s one cardinal rule in WordPress development, it’s this: Don’t touch WordPress core. This means that you don’t edit core WordPress files to add functionality to your site. This is because WordPress overwrites core files with each update. Any functionality you want to add or modify should be done using plugins.

WordPress plugins can be as simple or as complicated as you need them to be, depending on what you want to do. The simplest plugin is a single PHP file. The Hello Dolly plugin is an example of such a plugin. The plugin PHP file just needs a Plugin Header, a couple of PHP functions, and some hooks to attach your functions to.

This course is about getting basis of creating a WordPress plugin.

Inside a WordPress plugin, you can add any script that you want. This is how we are going to import Vue.js!

Using Vue.js with WordPress allows developers to create modern web apps on top of the most popular CMS in the world. In fact, with the addition of the REST API, WordPress has become a complete application platform for building web apps with a PHP/WP back-end and a JavaScript front-end. That means, you take benefits from the modern front-end developments tools, frameworks and libraries like Angular, React and Vue.js to create powerful WordPress themes and plugins.

This course requires a few prerequisites. To complete it, you need to have pass previous courses and:

• PHP installed on your development machine,

• WordPress installed and configured,

• Basic knowledge of PHP,

• Working experience of WordPress,

• Basic knowledge of JavaScript,

This course aims to teach you how to add style to your plugin with Bootstrap or to add styles to your Vue application. There are many way to do this:

• import directly Bootstrap as a CDN,

• import Bootstrap with Vue-Bootstrap npm package,

• download Bootstrap & add it to your project

In here, we are in a plugin. So, the best way is to import dynamically Bootstrap as a CDN. Do not worry: your style will be scoped to your plugin and will not affect your entire application.

Through our Vue app, we are going to develop our first component. This component is going to be our WeatherPlugin that later is going to be our plugin. With Bootstrap, we are going faster. So I am using here Bootstrap classes to make an Alert box.

Then, we are going to call OpenWeatherMap api to make an example. I am going to show you the whole process to get an API key, to call the API then to treat our API response.

This is one of the most exciting part of this course: copying our Vue app on our plugin. Now Wordpress has got our Vue plugin and it's running good :)

If you subscribed to this course, it's maybe because you want to create a plugin that will interact with your WP database. It's very important to know how a mysql database is working before. Moreover, it matters to understand how WP is dealing with it's database.

I am also going to show you how to use your Wordpress as a REST API.

Let's talk now on how to publish your plugin on Wordpress.org. There is a long list of elements to fulfil and a specific architecture to follow.

A quick explanation of the format of this couse and why I decided to do it this way.

A last message and thank you very much !