Create a Custom Beaver Builder Module: Developer Course

Course
11 Lessons

In this course we will create a custom Beaver Builder module together! The module we are creating is a before and after image comparison slider. Writing custom Beaver Builder modules is an intermediate to Advanced Task For developers who are versed in writing code for WordPress. But this course is aimed at being fun and friendly even to emerging developers, so welcome to all!

Buy now

Welcome!

Overview of Assets and File Structure

In this lesson module we will:

Take a look at the jQuery plugin that we're adding to our custom module
Demo a completed version of the custom Beaver Builder module we are building
Go over how to setup the file structure for your custom Beaver Builder module

File Structure and Course Assets

custom-module-example-twentytwenty.zip

FileStructure.pdf

Plugin File

Custom modules interface with WordPress using a plugin file. In this lesson we will create a plugin for our custom module.

Create Your Plugin File

Module File

In this lesson we will create our module file.

Create Your Module File

frontend.php

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

Add Code to Your frontend.php File

frontend.js.php

Now we'll add the jQuery snippet needed to make all this work. This is the last step we'll take before testing our custom module!

Add Code to Your frontend.js.php File

Test Drive Your Custom Module

Test Your Custom Module

blue.png

orange.png