TUTORIAL

Creating your own plugin that adds a widget to the WPBakery plugin

In this tutorial you will learn how to create a plugin that allows you to add a widget anywhere on the site using the WPBakery page builder. This is a very useful functionality that this page builder does not have. It allows you to insert any code via Page Builder, allowing you to expand our site in any way you need. An example of using it can be adding a widget displaying Custom Post Type entries e.g. Projects in a certain way, such as grid.

How do you create your own plugin that works with WP Baker to create widgets?

Własny widok Custom Post Type stworzony za pomocą WP Bakery

What do we need?

    1. Active version of the WPBakery Page Builder – WordPress Page Builder Plugin – this is a paid plugin, allowing you to create views of pages using drag & drop. It is a tool to facilitate the creation of websites in WordPress, which greatly speeds up work on projects.
    2. Awareness of PHP and code creation in an object-oriented approach – our plugin will be created in an object-oriented approach using PHP and without knowledge in these subjects it will be difficult to understand the code created in this tutorial. I recommend reading the following tutorials: Object-oriented PHP for beginners and First steps in creating WordPress plugins
    3. Patience and focus while creating the plugin 🙂

Let’s start!

The first step will be to create a folder of our plugin, which we will call: REDO JSComposer Additional. The plugin should be placed in the folder where all our plugins are located, i.e. you should find the folder: Plugins, and in it create our folder where the plugin will be located. The folder name cannot contain upper and lower case letters, spaces and special characters, so we call the folder redo-jscomposer-additional respectively.

Now we have to create the structure of our plugin, which will look like this:

Struktura pluginu REDO

In our main folder of the plugin, we create folders:

  • images – the folder where we will store our icons used in the plugin,
  • widgets – a folder containing widgets to be displayed using the plugin,

and the files:

  • index.php – file defining the plugin (plugin name, author, etc.) and initiating our main file main.php,
  • main.php – main file of our plugin.

First let’s go to index.php edition.

The first step is to protect the code from direct access to files with ABSPATH, which is a constant defined in WordPress, securing access to .php files.

Then we put a description of our plugin in the comment block:

  • Plugin Name – here you should give the name of our plugin, which will later be visible in plugins in the WordPress panel,
  • Description – description of our plugin,
  • Author– author’s name,
  • Author URI– URL redirecting to author’s site,
  • Version– plugin version,
  • License– specify a license to make the plugin available to all users in WordPress plugins.

All fields are optional, except Plugin Name, which is a mandatory field.

Then using require_once() we add the path to the main plugin file.