18: Override modules
Overriding Beaver Builder modules can be beneficial when you need to modify the module's functionality beyond what is available through its settings or options. This approach can be applied to all Beaver Builder modules.
This article assumes you're using a child theme.
Getting Startedβ
To begin overriding Beaver Builder modules, you must have access to your website's files. This can be achieved by using a file manager plugin or an FTP/SFTP client. Once you have access, follow these steps:
Create a folder named
fl-builder
inside the directory of your child theme:/wp-content/themes/THEME_NAME/
Inside the
fl-builder
folder, create another folder namedmodules
.Copy the entire folder of the module that you want to override from
/wp-content/plugins/bb-plugin/modules
to your theme'sfl-builder/modules
folder located at/wp-content/themes/THEME_NAME/fl-builder/modules
.
For the module override to work correctly, make sure to copy the entire module folder, including all of its files, instead of just the specific files you want to customize.
After copying the folder, you can customize the module's code to your liking, but ensure that the module's folder name, main PHP file name, and main class name remain the same as the original module to be recognized by Beaver Builder.
If youβre not seeing your changes, try clearing the Beaver Builder cache.
Exampleβ
Although overridden modules can work with any theme, it's recommended to use a child theme to safeguard them from theme updates. In the example below, you can see the folder and file structure that would result from duplicating the Audio, Button, Menu, and Post modules into a BB Theme Child.
/bb-theme-child
βββ /fl-builder
βΒ Β βββ /modules
βΒ Β βββ /audio
βΒ Β βββ /button
βΒ Β βββ /menu
βΒ Β βββ /post-grid
βββ functions.php
βββ style.css
Outdated Modulesβ
Overridden modules remain unaffected by Beaver Builder updates, which may introduce new features and bug fixes to modules. If you want to ensure that your overridden modules stay current, you need to update the overridden module files on your own.
To compare the changes made in the Beaver Builder update, you can examine the default module files located in the Beaver Builder modules directory (/wp-content/plugins/bb-plugin/modules
).