Create a custom module to compare images with a slider

In this tutorial, you'll create a module plugin for Page Builder that lets you add a third-party jQuery plugin called TwentyTwenty to your layouts.

The TwentyTwenty jQuery plugin by ZURB compares two images with a sliding bar, as shown in the following animation. This is useful for comparing two images with the same dimensions.

You can see a working example and all the code contained in this tutorial at https://github.com/Pross/custom-module-example-twentytwenty.

1

Create the plugin

Create the folders, files, and code for WordPress to recognize the plugin correctly, display the information on the WordPress plugins admin screen, and load the module correctly.

  1. Navigate to your WordPress plugins folder, typically wp-content/plugins/, and create a new subfolder named custom-module-example-twentytwenty.
  2. Create a file in that subfolder called fl-module-twentytwenty.php.
  3. Add the following code to create the name, description, and version information that WordPress uses on the plugins admin screen.

  1. Add the code for the main plugin class, which will load the module file:

2

Create the module folders and files

  1. In the custom-module-example-twentytwenty folder, create a subfolder called modules.
  2. Inside that folder, create another folder called twentytwenty.
    This will be the folder for the Page Builder module's code and assets.
  3. Now create a new file in your twentytwenty module folder called twentytwenty.php.
    This will be the module file.
3

Register the module

Add the following code to twentytwenty.php.
This code extends the FLBuilderModule class to register the module as a BeaverBuilder module.

4

Add module assets

Put three jQuery plugin files into the right folders and add code for the module assets.

  1. Download the TwentyTwenty zip file from https://zurb.com/playground/twentytwenty.
  2. Unzip the file.
  3. In the modules/twentytwenty folder create two new folders named css and js.
  4. Upload twentytwenty.css into the css folder.
  5. Upload jquery.twentytwenty.js and jquery.event.move.js into the js folder.
  6. Open the module file again and add the following code into the __construct function.
    This code enqueues the assets properly when the module is on the page.
5

Add module options

The module will have two options, one for each photo. The following code uses the FLBuilder::register_module method to register the two options.

Add the following code to the bottom of twentytwenty.php.

6

Create frontend.php to render the module

For any Page Builder module to render, it needs a frontend.php file.

  1. Create a new folder called includes inside the modules/twentwenty folder.
  2. Create a new file frontend.php in the includes folder.
  3. Add the following code.
    This will be the HTML output by the module when it is inserted into a layout.

As you can see this code simply creates a <div> with the two classes fl-twenty-twenty and twentytwenty-container and includes the two images using the settings we previously registered.

The TwentyTwenty jQuery plugin will do the rest.

7

Create frontend.js.php to tie it together

Now add the jQuery snippet needed to make all this work.

  1. Create a file named frontend.js.php in the includes folder.
  2. Add the following code.
8

Test your new module

  1. In the WordPress admin panel, click Plugins and find your new plugin listed. As determined by the code you added in Task 1, the plugin name is Beaver Builder TwentyTwenty Module.
  2. Activate the plugin.
  3. Open a page for editing in Page Builder and click the Plus button to open the Content panel.
  4. Search for TwentyTwenty or scroll to the last section labeled Example modules and try using your new module in a layout
    If you can't see the images, clear your caches.