Custom Element Avada Builder
—
### **Step 1: Set Up Your Custom Element**
1. **Access the Child Theme:**
– Navigate to your WordPress installation's directory.
– Go to `wp-content/themes/` and ensure you have a child theme set up for Avada. If not, create one to ensure your changes are not overwritten during theme updates.
2. **Create the Custom Element PHP File:**
– Inside your child theme, create a new folder called `fusion-builder/` if it doesn’t already exist.
– Inside the `fusion-builder/` folder, create a new PHP file for your custom element, e.g., `fusion-custom-element.php`.
—
### **Step 2: Define the Custom Element**
Add the following basic code structure to your custom PHP file:
<?php
if (class_exists('Fusion_Element')) {
class FusionSC_CustomElement extends Fusion_Element {
/**
* Constructor
*/
public function __construct() {
parent::__construct();
add_filter('fusion_builder_shortcodes', [$this, 'add_shortcode']);
}
/**
* Add the custom shortcode
*/
public function add_shortcode($shortcodes) {
$shortcodes['fusion_custom_element'] = [
'name' => esc_attr__('Custom Element', 'fusion-builder'),
'description' => esc_attr__('A custom element for Avada Builder', 'fusion-builder'),
'shortcode' => 'fusion_custom_element',
'icon' => 'fusiona-star',
'preview' => FUSION_BUILDER_PLUGIN_DIR . 'assets/images/previews/fusion-code.png',
'params' => $this->get_params(),
'is_container' => false,
];
return $shortcodes;
}
/**
* Define element parameters
*/
private function get_params() {
return [
[
'type' => 'textfield',
'heading' => esc_attr__('Text Content', 'fusion-builder'),
'description' => esc_attr__('Add the text content for this element.', 'fusion-builder'),
'param_name' => 'content',
'value' => esc_attr__('Default Text', 'fusion-builder'),
],
[
'type' => 'colorpickeralpha',
'heading' => esc_attr__('Background Color', 'fusion-builder'),
'description' => esc_attr__('Set a background color.', 'fusion-builder'),
'param_name' => 'bg_color',
'value' => '#ffffff',
],
];
}
/**
* Render the element
*/
public function render($atts, $content = null) {
$atts = shortcode_atts(
[
'content' => '',
'bg_color' => '#ffffff',
],
$atts,
'fusion_custom_element'
);
return '<div style="background-color:' . esc_attr($atts['bg_color']) . ';">' . esc_html($atts['content']) . '</div>';
}
}
new FusionSC_CustomElement();
}—
### **Step 3: Load the Custom Element**
To load the new custom element, add the following code to your child theme’s `functions.php` file:
if (function_exists('fusion_builder_map')) {
require_once get_stylesheet_directory() . '/fusion-builder/fusion-custom-element.php';
}—
### **Step 4: Add Custom Styling (Optional)**
If your element requires additional CSS, you can add it to your child theme's `style.css` file:
.fusion-custom-element {
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}—
### **Step 5: Test the Custom Element**
1. Clear your cache to ensure changes are loaded.
2. Go to the Avada Builder and look for your custom element under the "Elements" panel.
3. Drag and drop your custom element into the page and test its functionality.
—
Let me know if you need help tweaking this!
—
### **Step 1: Prepare Owl Carousel Assets**
Ensure that the Owl Carousel CSS and JavaScript files are included in your theme:
1. **Download Owl Carousel**
Download the Owl Carousel library from [Owl Carousel GitHub](https://owlcarousel2.github.io/OwlCarousel2/).
2. **Include Assets in Your Child Theme**
Add the Owl Carousel CSS and JS files to your child theme:
– Place the CSS file in `child-theme/assets/css/owl.carousel.min.css`.
– Place the JS file in `child-theme/assets/js/owl.carousel.min.js`.
3. **Enqueue the Assets**
Add this code to your `functions.php` file to include Owl Carousel:
function enqueue_owl_carousel_assets() {
wp_enqueue_style('owl-carousel', get_stylesheet_directory_uri() . '/assets/css/owl.carousel.min.css', [], '2.3.4');
wp_enqueue_script('owl-carousel', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.min.js', ['jquery'], '2.3.4', true);
}
add_action('wp_enqueue_scripts', 'enqueue_owl_carousel_assets');—
### **Step 2: Create the Custom Element**
In your child theme, create a file called `fusion-owl-carousel.php` in the `fusion-builder/` folder. Add the following code to define your custom Owl Carousel element:
<?php
if (class_exists('Fusion_Element')) {
class FusionSC_OwlCarousel extends Fusion_Element {
public function __construct() {
parent::__construct();
add_filter('fusion_builder_shortcodes', [$this, 'add_shortcode']);
}
/**
* Add the custom shortcode
*/
public function add_shortcode($shortcodes) {
$shortcodes['fusion_owl_carousel'] = [
'name' => esc_attr__('Owl Carousel', 'fusion-builder'),
'description' => esc_attr__('Add an Owl Carousel to the page', 'fusion-builder'),
'shortcode' => 'fusion_owl_carousel',
'icon' => 'fusiona-slider',
'preview' => '',
'params' => $this->get_params(),
'is_container' => true, // Allows adding child elements inside the carousel.
];
return $shortcodes;
}
/**
* Define element parameters
*/
private function get_params() {
return [
[
'type' => 'textfield',
'heading' => esc_attr__('Number of Items', 'fusion-builder'),
'description' => esc_attr__('Set the number of items visible in the carousel.', 'fusion-builder'),
'param_name' => 'items',
'value' => '3',
],
[
'type' => 'switch',
'heading' => esc_attr__('Autoplay', 'fusion-builder'),
'description' => esc_attr__('Enable autoplay for the carousel.', 'fusion-builder'),
'param_name' => 'autoplay',
'default' => 'yes',
],
[
'type' => 'textfield',
'heading' => esc_attr__('Autoplay Speed', 'fusion-builder'),
'description' => esc_attr__('Set the autoplay speed in milliseconds.', 'fusion-builder'),
'param_name' => 'autoplay_speed',
'value' => '3000',
'dependency' => [
[
'element' => 'autoplay',
'value' => 'yes',
'operator' => '==',
],
],
],
[
'type' => 'textfield',
'heading' => esc_attr__('Custom Class', 'fusion-builder'),
'description' => esc_attr__('Add a custom CSS class for additional styling.', 'fusion-builder'),
'param_name' => 'class',
'value' => '',
],
];
}
/**
* Render the element
*/
public function render($atts, $content = null) {
$atts = shortcode_atts(
[
'items' => '3',
'autoplay' => 'yes',
'autoplay_speed' => '3000',
'class' => '',
],
$atts,
'fusion_owl_carousel'
);
ob_start();
?>
<div class="owl-carousel <?php echo esc_attr($atts['class']); ?>"
data-items="<?php echo esc_attr($atts['items']); ?>"
data-autoplay="<?php echo esc_attr($atts['autoplay'] === 'yes' ? 'true' : 'false'); ?>"
data-autoplay-speed="<?php echo esc_attr($atts['autoplay_speed']); ?>">
<?php echo do_shortcode($content); ?>
</div>
<script>
jQuery(document).ready(function($) {
$('.owl-carousel').each(function() {
var $this = $(this);
$this.owlCarousel({
items: parseInt($this.data('items')),
autoplay: $this.data('autoplay') === 'true',
autoplayTimeout: parseInt($this.data('autoplay-speed')),
loop: true,
margin: 10,
nav: true,
});
});
});
</script>
<?php
return ob_get_clean();
}
}
new FusionSC_OwlCarousel();
}—
### **Step 3: Add the Element to Avada Builder**
In your `functions.php` file, load the custom element:
if (function_exists('fusion_builder_map')) {
require_once get_stylesheet_directory() . '/fusion-builder/fusion-owl-carousel.php';
}—
### **Step 4: Add Content to the Carousel**
When you use the Owl Carousel element in Avada Builder:
– Drag the "Owl Carousel" element into your layout.
– Add content inside it (e.g., image, text, etc.) using Fusion Builder child elements.
—
### **Step 5: Add CSS (Optional)**
Add custom styles to your child theme’s `style.css`:
.owl-carousel .owl-item {
text-align: center;
padding: 10px;
}
.owl-carousel .owl-nav button {
background: #333;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
}
.owl-carousel .owl-nav button:hover {
background: #555;
}—
Now your custom Owl Carousel element is ready! It will appear in the Avada Builder and support content dynamically added in the builder. Let me know if you face any issues!
—
### **Step 1: Update the Element Parameters**
Update the parameters of the `fusion_owl_carousel` element to include a child element for uploading images. Replace the `get_params()` function in the code with the following:
private function get_params() {
return [
[
'type' => 'textfield',
'heading' => esc_attr__('Number of Items', 'fusion-builder'),
'description' => esc_attr__('Set the number of items visible in the carousel.', 'fusion-builder'),
'param_name' => 'items',
'value' => '3',
],
[
'type' => 'switch',
'heading' => esc_attr__('Autoplay', 'fusion-builder'),
'description' => esc_attr__('Enable autoplay for the carousel.', 'fusion-builder'),
'param_name' => 'autoplay',
'default' => 'yes',
],
[
'type' => 'textfield',
'heading' => esc_attr__('Autoplay Speed', 'fusion-builder'),
'description' => esc_attr__('Set the autoplay speed in milliseconds.', 'fusion-builder'),
'param_name' => 'autoplay_speed',
'value' => '3000',
'dependency' => [
[
'element' => 'autoplay',
'value' => 'yes',
'operator' => '==',
],
],
],
[
'type' => 'textfield',
'heading' => esc_attr__('Custom Class', 'fusion-builder'),
'description' => esc_attr__('Add a custom CSS class for additional styling.', 'fusion-builder'),
'param_name' => 'class',
'value' => '',
],
[
'type' => 'upload',
'heading' => esc_attr__('Add Images', 'fusion-builder'),
'description' => esc_attr__('Upload images to display in the carousel.', 'fusion-builder'),
'param_name' => 'images',
'multiple' => true, // Allow multiple image uploads.
],
];
}—
### **Step 2: Update the Render Method**
Update the `render()` method to include the uploaded images in the carousel:
public function render($atts, $content = null) {
$atts = shortcode_atts(
[
'items' => '3',
'autoplay' => 'yes',
'autoplay_speed' => '3000',
'class' => '',
'images' => '',
],
$atts,
'fusion_owl_carousel'
);
$images = explode(',', $atts['images']); // Convert the comma-separated image URLs to an array.
ob_start();
?>
<div class="owl-carousel <?php echo esc_attr($atts['class']); ?>"
data-items="<?php echo esc_attr($atts['items']); ?>"
data-autoplay="<?php echo esc_attr($atts['autoplay'] === 'yes' ? 'true' : 'false'); ?>"
data-autoplay-speed="<?php echo esc_attr($atts['autoplay_speed']); ?>">
<?php if (!empty($images)) : ?>
<?php foreach ($images as $image_url) : ?>
<div class="carousel-item">
<img src="<?php echo esc_url($image_url); ?>" alt="Carousel Image">
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<script>
jQuery(document).ready(function($) {
$('.owl-carousel').each(function() {
var $this = $(this);
$this.owlCarousel({
items: parseInt($this.data('items')),
autoplay: $this.data('autoplay') === 'true',
autoplayTimeout: parseInt($this.data('autoplay-speed')),
loop: true,
margin: 10,
nav: true,
});
});
});
</script>
<?php
return ob_get_clean();
}—
### **Step 3: CSS for Carousel Items**
Add some CSS to style the carousel items. Place this in your child theme’s `style.css`:
.owl-carousel .carousel-item {
text-align: center;
}
.owl-carousel .carousel-item img {
width: 100%;
height: auto;
border-radius: 10px;
}—
### **Step 4: Test in Avada Builder**
1. Add the "Owl Carousel" element to a page in the Avada Builder.
2. Upload images using the "Add Images" option in the element settings.
3. Save the page and preview it. The images should display in the Owl Carousel.
—
This code will allow you to upload multiple images to your custom Owl Carousel element in Avada Builder. Each uploaded image will appear as a carousel item. Let me know if you need further adjustments!
—
### **Step 1: Add Image Upload Parameter**
Update the `get_params()` method to include an option for uploading multiple images. Here’s the updated method:
private function get_params() {
return [
[
'type' => 'textfield',
'heading' => esc_attr__('Number of Items', 'fusion-builder'),
'description' => esc_attr__('Set the number of items visible in the carousel.', 'fusion-builder'),
'param_name' => 'items',
'value' => '3',
],
[
'type' => 'switch',
'heading' => esc_attr__('Autoplay', 'fusion-builder'),
'description' => esc_attr__('Enable autoplay for the carousel.', 'fusion-builder'),
'param_name' => 'autoplay',
'default' => 'yes',
],
[
'type' => 'textfield',
'heading' => esc_attr__('Autoplay Speed', 'fusion-builder'),
'description' => esc_attr__('Set the autoplay speed in milliseconds.', 'fusion-builder'),
'param_name' => 'autoplay_speed',
'value' => '3000',
'dependency' => [
[
'element' => 'autoplay',
'value' => 'yes',
'operator' => '==',
],
],
],
[
'type' => 'upload',
'heading' => esc_attr__('Upload Images', 'fusion-builder'),
'description' => esc_attr__('Add images to display in the carousel.', 'fusion-builder'),
'param_name' => 'images',
'multiple' => true, // Allow multiple image uploads.
],
[
'type' => 'textfield',
'heading' => esc_attr__('Custom Class', 'fusion-builder'),
'description' => esc_attr__('Add a custom CSS class for additional styling.', 'fusion-builder'),
'param_name' => 'class',
'value' => '',
],
];
}—
### **Step 2: Render the Uploaded Images**
Update the `render()` method to handle and display the uploaded images. Modify the method as follows:
public function render($atts, $content = null) {
$atts = shortcode_atts(
[
'items' => '3',
'autoplay' => 'yes',
'autoplay_speed' => '3000',
'images' => '',
'class' => '',
],
$atts,
'fusion_owl_carousel'
);
// Convert uploaded images (comma-separated URLs) into an array.
$images = explode(',', $atts['images']);
ob_start();
?>
<div class="owl-carousel <?php echo esc_attr($atts['class']); ?>"
data-items="<?php echo esc_attr($atts['items']); ?>"
data-autoplay="<?php echo esc_attr($atts['autoplay'] === 'yes' ? 'true' : 'false'); ?>"
data-autoplay-speed="<?php echo esc_attr($atts['autoplay_speed']); ?>">
<?php if (!empty($images)) : ?>
<?php foreach ($images as $image) : ?>
<div class="carousel-item">
<img src="<?php echo esc_url($image); ?>" alt="Carousel Image">
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<script>
jQuery(document).ready(function($) {
$('.owl-carousel').each(function() {
var $this = $(this);
$this.owlCarousel({
items: parseInt($this.data('items')),
autoplay: $this.data('autoplay') === 'true',
autoplayTimeout: parseInt($this.data('autoplay-speed')),
loop: true,
margin: 10,
nav: true,
});
});
});
</script>
<?php
return ob_get_clean();
}—
### **Step 3: Add CSS for Styling**
Add some CSS to style the carousel items. You can place this in your theme’s stylesheet or within the Fusion Builder’s custom CSS section:
.owl-carousel .carousel-item {
text-align: center;
padding: 10px;
}
.owl-carousel .carousel-item img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}—
### **Step 4: Test in Avada**
1. Add the "Owl Carousel" element to a page using the Fusion Builder.
2. Use the "Upload Images" field to select and upload multiple images.
3. Save the page and preview it. The images should display in the Owl Carousel.
—
This updated code will allow users to upload images directly via the Fusion Builder interface and display them as carousel items. Let me know if you encounter any issues or need additional functionality!
—
### **Full Code for `FusionOwlCarousel.php`**
<?php
if (class_exists('Fusion_Element')) {
class FusionOwlCarousel extends Fusion_Element {
public function __construct() {
parent::__construct();
add_shortcode('fusion_owl_carousel', [$this, 'render']);
}
public function add_shortcode() {
fusion_builder_map(
[
'name' => esc_attr__('Owl Carousel', 'fusion-builder'),
'shortcode' => 'fusion_owl_carousel',
'icon' => 'fusiona-carousel',
'params' => $this->get_params(),
'allow_generator' => true,
]
);
}
private function get_params() {
return [
[
'type' => 'textfield',
'heading' => esc_attr__('Number of Items', 'fusion-builder'),
'description' => esc_attr__('Set the number of items visible in the carousel.', 'fusion-builder'),
'param_name' => 'items',
'value' => '3',
],
[
'type' => 'switch',
'heading' => esc_attr__('Autoplay', 'fusion-builder'),
'description' => esc_attr__('Enable autoplay for the carousel.', 'fusion-builder'),
'param_name' => 'autoplay',
'default' => 'yes',
],
[
'type' => 'textfield',
'heading' => esc_attr__('Autoplay Speed', 'fusion-builder'),
'description' => esc_attr__('Set the autoplay speed in milliseconds.', 'fusion-builder'),
'param_name' => 'autoplay_speed',
'value' => '3000',
'dependency' => [
[
'element' => 'autoplay',
'value' => 'yes',
'operator' => '==',
],
],
],
[
'type' => 'upload',
'heading' => esc_attr__('Upload Images', 'fusion-builder'),
'description' => esc_attr__('Add images to display in the carousel.', 'fusion-builder'),
'param_name' => 'images',
'multiple' => true, // Allow multiple image uploads.
],
[
'type' => 'textfield',
'heading' => esc_attr__('Custom Class', 'fusion-builder'),
'description' => esc_attr__('Add a custom CSS class for additional styling.', 'fusion-builder'),
'param_name' => 'class',
'value' => '',
],
];
}
public function render($atts, $content = null) {
$atts = shortcode_atts(
[
'items' => '3',
'autoplay' => 'yes',
'autoplay_speed' => '3000',
'images' => '',
'class' => '',
],
$atts,
'fusion_owl_carousel'
);
// Convert uploaded images (comma-separated URLs) into an array.
$images = explode(',', $atts['images']);
ob_start();
?>
<div class="owl-carousel <?php echo esc_attr($atts['class']); ?>"
data-items="<?php echo esc_attr($atts['items']); ?>"
data-autoplay="<?php echo esc_attr($atts['autoplay'] === 'yes' ? 'true' : 'false'); ?>"
data-autoplay-speed="<?php echo esc_attr($atts['autoplay_speed']); ?>">
<?php if (!empty($images)) : ?>
<?php foreach ($images as $image) : ?>
<div class="carousel-item">
<img src="<?php echo esc_url($image); ?>" alt="Carousel Image">
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<script>
jQuery(document).ready(function($) {
$('.owl-carousel').each(function() {
var $this = $(this);
$this.owlCarousel({
items: parseInt($this.data('items')),
autoplay: $this.data('autoplay') === 'true',
autoplayTimeout: parseInt($this.data('autoplay-speed')),
loop: true,
margin: 10,
nav: true,
});
});
});
</script>
<?php
return ob_get_clean();
}
public function get_element_css() {
return [
'fusion-owl-carousel' => [
'hover' => [],
],
];
}
}
// Register the element.
new FusionOwlCarousel();
}—
### **CSS for Styling the Carousel**
Add the following CSS in your child theme’s `style.css` or Fusion Builder custom CSS section:
.owl-carousel .carousel-item {
text-align: center;
padding: 10px;
}
.owl-carousel .carousel-item img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}—
### **Steps to Implement**
1. Save the above PHP code as `FusionOwlCarousel.php` in your child theme under the `fusion-builder` folder.
– For example: `wp-content/themes/your-child-theme/fusion-builder/elements/FusionOwlCarousel.php`
2. Make sure **Owl Carousel** scripts and styles are enqueued in your theme. Add this code to your child theme's `functions.php` if needed:
function enqueue_owl_carousel_assets() {
wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', ['jquery'], '2.3.4', true);
wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css', [], '2.3.4');
wp_enqueue_style('owl-carousel-theme', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css', [], '2.3.4');
}
add_action('wp_enqueue_scripts', 'enqueue_owl_carousel_assets');3. In the Avada Fusion Builder editor, add the "Owl Carousel" element.
4. Upload your images using the "Upload Images" option.
5. Customize the other settings like the number of items, autoplay, and speed.
6. Save and preview the page.
—
Now, your custom Owl Carousel element will display uploaded images dynamically! Let me know if you need any further assistance.
—
### **1. Verify File Placement**
Ensure the file `FusionOwlCarousel.php` is saved in the correct location:
– **Path:** `wp-content/themes/your-child-theme/fusion-builder/elements/FusionOwlCarousel.php`
– The `fusion-builder/elements` directory structure must exist under your child theme. If it doesn't, create it.
—
### **2. Enable Fusion Builder Custom Elements**
In some cases, Fusion Builder may not recognize custom elements automatically. To ensure it does:
– Go to **Avada > Theme Options > Builder Options**.
– Look for a setting like **Enable Custom Elements** or something similar and turn it on.
– Save changes.
—
### **3. Clear Cache**
If you have caching plugins (e.g., WP Super Cache, W3 Total Cache), or if you use server-side caching:
– Clear all caches.
– If you are using Cloudflare, purge the cache from the Cloudflare dashboard.
Also, clear your browser cache or check the site in incognito mode.
—
### **4. Register the Element in Fusion Builder**
Fusion Builder sometimes needs custom elements to be explicitly registered. Check that the class is being properly registered in your `FusionOwlCarousel` class. Ensure the `add_shortcode()` function is being called.
—
### **5. Debugging Custom Elements**
Add the following debug lines to your theme’s `functions.php` to see if the element is being loaded:
add_action('fusion_builder_before_init', function() {
error_log('Fusion Builder is initializing.');
});
add_action('wp_loaded', function() {
error_log('Custom elements are loaded.');
});Check the `debug.log` file in `wp-content` to confirm if the Fusion Builder initialization or custom element loading is failing.
To enable debugging:
1. Add the following to `wp-config.php`:
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);2. Check the logs in `wp-content/debug.log`.
—
### **6. Fusion Builder Dependencies**
Ensure that Fusion Builder is active and functional on your WordPress site. If it isn’t:
– Go to **Plugins > Installed Plugins**.
– Activate Fusion Builder.
—
### **7. Enqueue Scripts and Styles**
If you’ve added Owl Carousel dependencies but haven’t enqueued them properly, your element might not render. Check the enqueue function:
function enqueue_owl_carousel_assets() {
wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', ['jquery'], '2.3.4', true);
wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css', [], '2.3.4');
wp_enqueue_style('owl-carousel-theme', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css', [], '2.3.4');
}
add_action('wp_enqueue_scripts', 'enqueue_owl_carousel_assets');Ensure these scripts are being loaded by checking your browser’s **Developer Tools > Network Tab**.
—
### **8. Test the Shortcode**
Test if the shortcode works directly. Add this to any WordPress post or page:
[fusion_owl_carousel items="3" autoplay="yes" autoplay_speed="3000" images="image1.jpg,image2.jpg,image3.jpg"]Replace `image1.jpg`, `image2.jpg`, and `image3.jpg` with real URLs of your images.
If the shortcode works but the element doesn’t appear in Fusion Builder, the issue lies in the element registration.
—
### **9. Re-register the Element on Fusion Builder Init**
Try adding this hook to your `FusionOwlCarousel` constructor:
public function __construct() {
parent::__construct();
add_action('fusion_builder_before_init', [$this, 'add_shortcode']);
}This ensures the element is properly registered when Fusion Builder initializes.
—
### **10. Check for PHP Errors**
A syntax or runtime error in `FusionOwlCarousel.php` may prevent the element from loading. Check for errors:
– Enable WP_DEBUG (see step 5).
– Look for issues in `debug.log`.
—
### **Final Testing**
After applying the fixes above:
1. Refresh the Fusion Builder interface.
2. Check the **“Elements”** section for your custom Owl Carousel element.
3. Drag the element into a Fusion Builder column and configure its options.
If you still face issues, share any error logs or debug messages you find, and I’ll assist further!
—
### **Updated Code for Fusion Builder Custom Element**
Replace your existing `FusionOwlCarousel` class with the following updated code:
<?php
if (class_exists('Fusion_Element')) {
class FusionOwlCarousel extends Fusion_Element {
public function __construct() {
parent::__construct();
add_shortcode('fusion_owl_carousel', [$this, 'render']);
}
public function add_options() {
return [
'items' => [
'type' => 'textfield',
'heading' => esc_attr__('Number of Items', 'fusion-builder'),
'description' => esc_attr__('Set the number of items to display in the carousel.', 'fusion-builder'),
'param_name' => 'items',
'default' => '3',
],
'autoplay' => [
'type' => 'radio_button_set',
'heading' => esc_attr__('Autoplay', 'fusion-builder'),
'description' => esc_attr__('Enable or disable autoplay for the carousel.', 'fusion-builder'),
'param_name' => 'autoplay',
'value' => [
'yes' => esc_attr__('Yes', 'fusion-builder'),
'no' => esc_attr__('No', 'fusion-builder'),
],
'default' => 'yes',
],
'autoplay_speed' => [
'type' => 'textfield',
'heading' => esc_attr__('Autoplay Speed (ms)', 'fusion-builder'),
'description' => esc_attr__('Set the autoplay speed in milliseconds.', 'fusion-builder'),
'param_name' => 'autoplay_speed',
'default' => '3000',
],
'images' => [
'type' => 'upload_multiple',
'heading' => esc_attr__('Upload Images', 'fusion-builder'),
'description' => esc_attr__('Upload multiple images for the carousel.', 'fusion-builder'),
'param_name' => 'images',
],
];
}
public function render($atts, $content = null) {
$defaults = fusion_builder_default_attributes('fusion_owl_carousel', [
'items' => '3',
'autoplay' => 'yes',
'autoplay_speed' => '3000',
'images' => '',
]);
$args = shortcode_atts($defaults, $atts);
$images = explode(',', $args['images']);
$autoplay = ($args['autoplay'] === 'yes') ? 'true' : 'false';
ob_start();
?>
<div class="owl-carousel owl-theme" data-items="<?php echo esc_attr($args['items']); ?>" data-autoplay="<?php echo esc_attr($autoplay); ?>" data-autoplay-speed="<?php echo esc_attr($args['autoplay_speed']); ?>">
<?php foreach ($images as $image) : ?>
<div class="item">
<img src="<?php echo esc_url($image); ?>" alt="Carousel Image">
</div>
<?php endforeach; ?>
</div>
<?php
return ob_get_clean();
}
public function add_styles() {
wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', ['jquery'], '2.3.4', true);
wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css', [], '2.3.4');
wp_enqueue_style('owl-carousel-theme', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css', [], '2.3.4');
}
}
new FusionOwlCarousel();
}—
### **Key Changes**
1. **Upload Multiple Images Option:**
– Added the `images` parameter with the `upload_multiple` field type.
– Users can upload multiple images in the Fusion Builder UI.
2. **Render Function:**
– Images are extracted from the `images` parameter using `explode()`.
– Each image is displayed within a “ tag.
3. **Enqueue Scripts and Styles:**
– The necessary Owl Carousel scripts and styles are enqueued.
—
### **Steps to Use**
1. **Upload the Code:**
Save this updated `FusionOwlCarousel.php` file in your theme’s `fusion-builder/elements` folder.
2. **Enable Multiple Image Upload:**
– Go to a page or post in Fusion Builder.
– Drag the **Owl Carousel** element into the page.
– Use the **Upload Images** option to select multiple images.
3. **Preview the Carousel:**
– Save and preview the page.
– The Owl Carousel should display the uploaded images.
—
### **Output HTML**
The rendered HTML will look like this:
<div class="owl-carousel owl-theme" data-items="3" data-autoplay="true" data-autoplay-speed="3000">
<div class="item">
<img src="https://example.com/image1.jpg" alt="Carousel Image">
</div>
<div class="item">
<img src="https://example.com/image2.jpg" alt="Carousel Image">
</div>
<div class="item">
<img src="https://example.com/image3.jpg" alt="Carousel Image">
</div>
</div>—
### **Troubleshooting**
– **Carousel Not Sliding?**
Ensure the Owl Carousel JavaScript is loaded properly. Check your browser console for errors.
– **Custom Styles Not Working?**
Add your CSS to the child theme’s `style.css` for custom carousel designs.
Let me know if you need further assistance!