To create this plugin, you'll need access to your WordPress filesystem. Create a new folder and give it a unique name using lowercase letters and dashes, such as custom-builder-modules. Inside that folder, create a new PHP file with the same name as the folder e. In this file, paste the following code:. Replace the fields at the top with your own information. When you're finished, head to your WordPress dashboard, navigate to Plugins , and activate the new plugin:.
Now you can build your custom module so you can add it to the plugin you created. Create a new subfolder inside your plugin folder custom-builder-modules and give it a unique name. For this example, we'll use my-module. Create a new PHP file inside the folder with the same name my-module. Open this file for editing and paste in the following code:. This code assigns your module to a class, which you'll need to register with Beaver Builder in Step 3.
The class name in the code should follow the name of your module. By convention, class names concatenate words by capitalizing each word. Next, include the module in the plugin you created by pasting the following code into your plugin file custom-builder-modules.
With your module registered, the next step is to define the settings you want to appear for the module in the Beaver Builder page builder. The basic code looks like this:. The array is where you'll define the tabs, sections, and settings that appear in the settings pane for the module within Beaver Builder. There are a lot of settings available to you, such as alignment toggles left, right, center , borders, color pickers, text entry fields for custom CSS and JavaScript, and more.
What settings you include depends on your vision for your module and how it'll be used. To see all the settings available plus code examples, check out the full setting fields reference in the Beaver Builder Custom Module Developer Guide. Keep in mind that even if you're building this custom module with a specific use in mind, you can incorporate it in future pages and other projects as well.
More settings will give you more flexibility down the line. The last required step is to create a front-end HTML file for your custom module. This code renders the module on the live web pages where you've incorporated it.
Then add a file to it called frontend. You can learn more about the variables for the HTML file in our official documentation. The specifics of this step depend on what type of element you're creating a module for. You'll need to rely on your own coding knowledge to complete this task. At this point, your module has everything it needs to function.
However, you might want to give it some style by adding CSS. Custom CSS for your module can be applied by adding a new folder and file to the directory containing your module's other code.
This code adjusts the background color of your module. Simply use HTML color codes to fine-tune the look of the element. Once your module is styled the way you want, you're all set. You should now be able to access it from the Beaver Builder editing screen and use it on any page you want. Developers have created some amazing custom modules for Beaver Builder. To give you some examples of what you can do, we'll showcase three of our favorites. First is a custom image comparison slider that lets you drag a sliding bar to compare two images:.
This could be very useful when showing photos of the same subject taken on different cameras, for example. It also works well for before and after shots. You can find the full process for creating this module in our knowledge base. This beautiful image gallery is perfect for showcasing designs, posters, and other media and would be ideal for a portfolio page:.
Sometimes viewers don't need to see the PDF file contents before they download, you'd rather just provide a download button or link. Use the following procedure. Upload the PDF file by dragging it into the Media window. Or click Add new and select the file for upload. Click the file you added to open the Attachment details sidebar and copy the URL displayed there. If you want to display the contents of a PDF in a viewport on your web page, you'll have to use a plugin.
Use one that lets you insert a shortcode into your layout. Make sure you're happy with the plugin's responsive capabilities so the PDFs can be viewed on small devices.
0コメント