Wordpress Plugin Development with React.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.

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.

React has to be imported in WordPress.

We have two solutions: integrate React directly inside our folder or fetch it by a CDN. In this lesson, I suggest you to integrate it via CDN.

A CDN (Content Delivery Network) is a highly-distributed platform of servers that helps minimize delays in loading web page content by reducing the physical distance between the server and the user. This helps users around the world view the same high-quality content without slow loading times.

To display our plugin, we need templates. In this course, I am showing you how to create a HTML template and link it to your main file index.php.

This HTML part is necessary to display our React plugin later. Moreover, React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. This template will be the root of this functioning environment.

In this tutorial, you’ll learn to create custom components in React. Components are independent pieces of functionality that you can reuse in your application, and are the building blocks of all React applications. Often, they can be simple JavaScript functions and classes, but you use them as if they were customized HTML elements. Buttons, menus, and any other front-end page content can all be created as components. Components can also contain state information and display markdown.

We are going to create our first React component for our plugin.

Our Cookie plugin needs to be design. In this part of the course, I am going to present you some frameworks that you can use to design your components.

This lesson is maybe the most important lesson of the whole course.

We link globally every functionalities of our plugin. We create functions in our React component that will be linked to our final template and interact between them.