WPBakery – how to create your own widget adding modal view?

• include ‘render/modal.php’;

If we already have a theme containing a Bootstrap framework, we move on to modify our widget. Normally we start by naming our widget and determining its basic properties. Underneath is an empty skeleton of our widget.

As a standard, we’ve implemented several basic steps in the skeleton to create a widget for our plugin:

• Drawing a path ABSPATH,
• Master class name WPBakeryShortCode,
• Initiation of vc_map() specifying the name of our widget, category, its description, image identifying widget and the widget parameter table.

To display our modal we will need several parameters in the params. We would like our modal to identify itself with a fixed sized div containing the image and title of our modal instead of a button, as implemented in the bootstrap examples. Additionally, after hovering the mouse cursor over this div the image changes to image 2. To achieve this we need to add params appropriate fields to our array:

Additionally, we need to take care of the params about our modal content. To do this, we need to add a textarea_html parameter to the array, which allows us to add content modal using the WordPress – WYSIWYG built-in editor. Our entire vc_map() including all parameters:

We already have all the parameters needed to realize the view for our modal. Now we move on to the implementation of our view.

Using extract() we need to retrieve the parameters to be passed in the view.

Now with the $btn_image, $btn_image_hover, $modal_title and $content we can create a view. The variable $content is default for the textarea_html parameter and can only occur once.

First we create a view for our div, which will be trigger modal. We pass the data-toggle and data-target parameters. In the data-target we must provide the div’s ID containing our modal. Each div must have a unique id so that each modal-button refers to a unique modal. To do this, we pass a variable $btn_image, which contains the image ID for the modal-button. In our case, this naming will work because each of our modal-button’s will contain a different image, but if we want to use the same images, we should look for a different solution.

To display an image of our modal-button we need a unique class for each trigger, because we want the image to change when you hover the divisor. To do this we add a variable $btn-image containing the ID of the image. Using css style we will change the background of a given modal-button.

Styl css dla zmiany obrazu modal-button:

Now we can move on to displaying our modal content.

We use a ready-made modal Bootstrap solution. We only change the ID attribute for our modal, so that each modal in the view has a unique ID – that is, similarly to the modal-button we add to the ID $btn-image. In a modal-body div we display the $$content containing our modal content.

Ready! This is how we created a widget that generates modals and their triggers. The whole code of our widget:

The window adding the widget looks like this:

After adding the appropriate css styles we achieved the views we wanted to get for the modal display.

Summary

Adding a widget to WPBakery, creating modal view requires knowledge of Bootstrap framework and adding it to WordPress theme. This is not the only way to create such a widget. We can create a modal view without a framework by ourselves, using Javascript and CSS only, but in our case we used a ready-made Bootstrap solution, because we had this framework in our theme and as you can see it saved us additional work when creating the view.