Custom Blog Post Element

February 3, 2025 · AI Conversations

User

create custom blog post list element in avada fusion builder with settings option to set numbe of post/order by

Assistant

To create a custom blog post list element in Avada Fusion Builder with settings options for the number of posts and ordering, you'll need to follow these general steps:

### Step 1: Create a Custom Element

1. **Create a Plugin or Child Theme**: If you haven't already, create a plugin or use a child theme to avoid losing changes during theme updates.

2. **Register the Custom Element**:
Add the following code to your plugin or child theme's `functions.php` file to register your custom Fusion Builder element.

if ( ! defined( 'ABSPATH' ) ) {
       exit; // Exit if accessed directly.
   }

   function avada_register_custom_blog_post_list() {
       if ( class_exists( 'FusionBuilder' ) ) {
           FusionBuilder::register_element( 'custom_blog_post_list' );
       }
   }
   add_action( 'fusion_builder_before_init', 'avada_register_custom_blog_post_list' );

### Step 2: Define the Custom Element Class

3. **Create the Custom Element Class**:
Create a new PHP file for your custom element, e.g., `class-custom-blog-post-list.php`, and define the custom element class.

class Custom_Blog_Post_List extends Fusion_Element {
       public function __construct() {
           parent::__construct();

           // Element settings
           $this->set_params();
       }

       private function set_params() {
           $this->params = array(
               array(
                   'type' => 'textfield',
                   'label' => __( 'Number of Posts', 'Avada' ),
                   'name' => 'number_posts',
                   'default' => '5',
                   'description' => __( 'Enter the number of posts to display.', 'Avada' ),
               ),
               array(
                   'type' => 'select',
                   'label' => __( 'Order By', 'Avada' ),
                   'name' => 'order_by',
                   'default' => 'date',
                   'options' => array(
                       'date' => __( 'Date', 'Avada' ),
                       'title' => __( 'Title', 'Avada' ),
                       'modified' => __( 'Modified', 'Avada' ),
                       'rand' => __( 'Random', 'Avada' ),
                   ),
                   'description' => __( 'Select how to order the posts.', 'Avada' ),
               ),
           );
       }

       public function render( $atts, $content = null ) {
           // Extract settings
           extract( $atts );

           // Query the posts
           $args = array(
               'posts_per_page' => intval( $number_posts ),
               'orderby' => sanitize_key( $order_by ),
           );
           $query = new WP_Query( $args );

           // Output the post list
           ob_start();
           if ( $query->have_posts() ) {
               echo '<ul class="custom-blog-post-list">';
               while ( $query->have_posts() ) {
                   $query->the_post();
                   echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
               }
               echo '</ul>';
           }
           wp_reset_postdata();

           return ob_get_clean();
       }
   }

### Step 3: Include the Custom Element

4. **Include the Custom Element Class**:
Include the custom element class in your main plugin file or functions.php.

require_once 'class-custom-blog-post-list.php'; // Adjust the path as needed.

### Step 4: Activate and Test

5. **Activate the Plugin or Child Theme**: If you created a new plugin, activate it through the WordPress admin dashboard.

6. **Use the Custom Element in Avada**:
– Open a page or post in the Fusion Builder.
– You should see your custom blog post list element in the elements list.
– Drag and drop the custom element onto your page, set the number of posts and order by settings, and save your changes.

### Additional Notes

– You can further customize the output HTML, CSS, and JavaScript as needed.
– Consider adding more settings or features, such as post categories, pagination, or additional styling options, based on your requirements.

By following these steps, you'll have a custom blog post list element in Avada Fusion Builder with configurable settings for the number of posts and ordering.

User

create this in child theme

Assistant

User is creating a custom blog post list element in Avada Fusion Builder using a child theme.

Assistant

To create a custom blog post list element in the Avada Fusion Builder using a child theme, follow these steps:

### Step 1: Create the Custom Element Class

1. **Create a PHP file for your custom element**: Inside your child theme folder, create a new directory called `inc`, and then create a file named `class-custom-blog-post-list.php`.

2. **Define the Custom Element Class**: Add the following code to the `class-custom-blog-post-list.php` file:

<?php
   if ( ! defined( 'ABSPATH' ) ) {
       exit; // Exit if accessed directly.
   }

   class Custom_Blog_Post_List extends Fusion_Element {
       public function __construct() {
           parent::__construct();

           // Element settings
           $this->set_params();
       }

       private function set_params() {
           $this->params = array(
               array(
                   'type' => 'textfield',
                   'label' => __( 'Number of Posts', 'Avada' ),
                   'name' => 'number_posts',
                   'default' => '5',
                   'description' => __( 'Enter the number of posts to display.', 'Avada' ),
               ),
               array(
                   'type' => 'select',
                   'label' => __( 'Order By', 'Avada' ),
                   'name' => 'order_by',
                   'default' => 'date',
                   'options' => array(
                       'date' => __( 'Date', 'Avada' ),
                       'title' => __( 'Title', 'Avada' ),
                       'modified' => __( 'Modified', 'Avada' ),
                       'rand' => __( 'Random', 'Avada' ),
                   ),
                   'description' => __( 'Select how to order the posts.', 'Avada' ),
               ),
           );
       }

       public function render( $atts, $content = null ) {
           // Extract settings
           extract( $atts );

           // Query the posts
           $args = array(
               'posts_per_page' => intval( $number_posts ),
               'orderby' => sanitize_key( $order_by ),
           );
           $query = new WP_Query( $args );

           // Output the post list
           ob_start();
           if ( $query->have_posts() ) {
               echo '<ul class="custom-blog-post-list">';
               while ( $query->have_posts() ) {
                   $query->the_post();
                   echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
               }
               echo '</ul>';
           }
           wp_reset_postdata();

           return ob_get_clean();
       }
   }

### Step 2: Register the Custom Element

3. **Modify your child theme’s `functions.php` file**: Open your child theme’s `functions.php` file and add the following code to register your custom element:

<?php
   if ( ! defined( 'ABSPATH' ) ) {
       exit; // Exit if accessed directly.
   }

   function avada_register_custom_blog_post_list() {
       if ( class_exists( 'FusionBuilder' ) ) {
           require_once get_stylesheet_directory() . '/inc/class-custom-blog-post-list.php'; // Adjust the path if necessary.
           FusionBuilder::register_element( 'Custom_Blog_Post_List' );
       }
   }
   add_action( 'fusion_builder_before_init', 'avada_register_custom_blog_post_list' );

### Step 3: Activate the Child Theme

4. **Activate your Child Theme**: If you haven't already activated your child theme, do so through the WordPress admin dashboard under **Appearance > Themes**.

### Step 4: Use the Custom Element in Fusion Builder

5. **Use the Custom Element**:
– Open a page or post in the Fusion Builder.
– Look for your custom blog post list element in the elements list.
– Drag and drop it onto your page, set the number of posts and order by settings, and save your changes.

### Additional Notes

– You can further customize the output HTML, CSS, and JavaScript to match your site's design.
– Ensure you test the functionality thoroughly to verify it works as expected.

By following these steps, you'll successfully create a custom blog post list element in the Avada Fusion Builder using your child theme.

User

create accordian custom element with option to add text and description

Assistant

To create a custom accordion element in the Avada Fusion Builder with options to add text and description, follow these steps:

### Step 1: Create the Custom Element Class

1. **Create a PHP file for your custom element**: Inside your child theme folder, create a new file named `class-custom-accordion.php` in the `inc` directory.

2. **Define the Custom Element Class**: Add the following code to the `class-custom-accordion.php` file:

<?php
   if ( ! defined( 'ABSPATH' ) ) {
       exit; // Exit if accessed directly.
   }

   class Custom_Accordion extends Fusion_Element {
       public function __construct() {
           parent::__construct();

           // Element settings
           $this->set_params();
       }

       private function set_params() {
           $this->params = array(
               array(
                   'type' => 'repeater',
                   'label' => __( 'Accordion Items', 'Avada' ),
                   'name' => 'accordion_items',
                   'default' => '',
                   'description' => __( 'Add items to the accordion.', 'Avada' ),
                   'inner' => array(
                       array(
                           'type' => 'textfield',
                           'label' => __( 'Title', 'Avada' ),
                           'name' => 'title',
                           'default' => '',
                       ),
                       array(
                           'type' => 'textarea',
                           'label' => __( 'Description', 'Avada' ),
                           'name' => 'description',
                           'default' => '',
                       ),
                   ),
               ),
           );
       }

       public function render( $atts, $content = null ) {
           // Extract settings
           $accordion_items = $atts['accordion_items'];

           // Output the accordion
           ob_start();
           if ( ! empty( $accordion_items ) ) {
               echo '<div class="custom-accordion">';
               foreach ( $accordion_items as $item ) {
                   $title = esc_html( $item['title'] );
                   $description = esc_html( $item['description'] );

                   echo '<div class="accordion-item">';
                   echo '<div class="accordion-header">' . $title . '</div>';
                   echo '<div class="accordion-content" style="display: none;">' . $description . '</div>';
                   echo '</div>';
               }
               echo '</div>';
           }

           return ob_get_clean();
       }
   }

### Step 2: Register the Custom Element

3. **Modify your child theme’s `functions.php` file**: Open your child theme’s `functions.php` file and add the following code to register your custom element:

<?php
   if ( ! defined( 'ABSPATH' ) ) {
       exit; // Exit if accessed directly.
   }

   function avada_register_custom_accordion() {
       if ( class_exists( 'FusionBuilder' ) ) {
           require_once get_stylesheet_directory() . '/inc/class-custom-accordion.php'; // Adjust the path if necessary.
           FusionBuilder::register_element( 'Custom_Accordion' );
       }
   }
   add_action( 'fusion_builder_before_init', 'avada_register_custom_accordion' );

### Step 3: Enqueue Scripts and Styles

4. **Add JavaScript for Accordion Functionality**: You will need to add some JavaScript to handle the accordion toggle. You can enqueue the script in your `functions.php` file:

function avada_enqueue_custom_scripts() {
       wp_enqueue_script( 'custom-accordion-script', get_stylesheet_directory_uri() . '/inc/custom-accordion.js', array( 'jquery' ), null, true );
   }
   add_action( 'wp_enqueue_scripts', 'avada_enqueue_custom_scripts' );

5. **Create the JavaScript File**: In the `inc` directory, create a file named `custom-accordion.js` and add the following code to handle the toggle functionality:

jQuery(document).ready(function($) {
       $('.custom-accordion .accordion-header').on('click', function() {
           var $content = $(this).next('.accordion-content');
           $('.accordion-content').not($content).slideUp(); // Close other open items
           $content.slideToggle(); // Toggle the current item
       });
   });

### Step 4: Activate the Child Theme

6. **Activate your Child Theme**: If you haven't already activated your child theme, do so through the WordPress admin dashboard under **Appearance > Themes**.

### Step 5: Use the Custom Element in Fusion Builder

7. **Use the Custom Element**:
– Open a page or post in the Fusion Builder.
– Look for your custom accordion element in the elements list.
– Drag and drop it onto your page, add items with titles and descriptions, and save your changes.

### Additional Notes

– You can style the accordion items with CSS to match your site's design.
– Test the functionality thoroughly to ensure it works as expected.

By following these steps, you'll successfully create a custom accordion element in the Avada Fusion Builder with options to add text and descriptions for each accordion item.

User

Create custom element for owl caursel with image upload option

Assistant

User is creating a custom Owl Carousel element in Avada Fusion Builder with an image upload option using a child theme.

Assistant

To create a custom Owl Carousel element in Avada Fusion Builder with an image upload option, follow these steps:

—

### **Step 1: Create the Custom Element Class**
1. **Create a PHP file**: Inside your child theme's `inc` directory, create a new file named `class-custom-owl-carousel.php`.

2. **Define the Custom Element Class**: Add the following code:

<?php
   if ( ! defined( 'ABSPATH' ) ) {
       exit; // Exit if accessed directly.
   }

   class Custom_Owl_Carousel extends Fusion_Element {
       public function __construct() {
           parent::__construct();

           // Set element parameters
           $this->set_params();
       }

       private function set_params() {
           $this->params = array(
               array(
                   'type' => 'repeater',
                   'label' => __( 'Carousel Items', 'Avada' ),
                   'name' => 'carousel_items',
                   'description' => __( 'Add images for the carousel.', 'Avada' ),
                   'inner' => array(
                       array(
                           'type' => 'upload',
                           'label' => __( 'Upload Image', 'Avada' ),
                           'name' => 'image',
                           'default' => '',
                           'description' => __( 'Select an image for the carousel.', 'Avada' ),
                       ),
                   ),
               ),
           );
       }

       public function render( $atts, $content = null ) {
           $carousel_items = isset( $atts['carousel_items'] ) ? $atts['carousel_items'] : array();

           if ( empty( $carousel_items ) ) {
               return '';
           }

           // Enqueue Owl Carousel scripts
           wp_enqueue_script( 'owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', array( 'jquery' ), '2.3.4', true );
           wp_enqueue_style( 'owl-carousel-css', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' );
           wp_enqueue_style( 'owl-theme-css', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css' );
           wp_enqueue_script( 'custom-owl-carousel', get_stylesheet_directory_uri() . '/inc/custom-owl-carousel.js', array( 'jquery', 'owl-carousel' ), null, true );

           ob_start();
           ?>
           <div class="custom-owl-carousel owl-carousel">
               <?php foreach ( $carousel_items as $item ) :
                   $image_url = isset( $item['image'] ) ? esc_url( $item['image'] ) : '';
                   if ( ! empty( $image_url ) ) :
               ?>
                   <div class="carousel-item">
                       <img src="<?php echo $image_url; ?>" alt="Carousel Image">
                   </div>
               <?php endif; endforeach; ?>
           </div>
           <?php
           return ob_get_clean();
       }
   }

—

### **Step 2: Register the Custom Element**
Add the following code in your child theme’s `functions.php` file to register the custom element:

function avada_register_custom_owl_carousel() {
    if ( class_exists( 'FusionBuilder' ) ) {
        require_once get_stylesheet_directory() . '/inc/class-custom-owl-carousel.php';
        FusionBuilder::register_element( 'Custom_Owl_Carousel' );
    }
}
add_action( 'fusion_builder_before_init', 'avada_register_custom_owl_carousel' );

—

### **Step 3: Add JavaScript for Owl Carousel**
1. **Create a new JavaScript file**: Inside the `inc` directory, create a file named `custom-owl-carousel.js` and add the following code:

jQuery(document).ready(function($) {
       $('.custom-owl-carousel').owlCarousel({
           loop: true,
           margin: 10,
           nav: true,
           dots: true,
           autoplay: true,
           autoplayTimeout: 3000,
           responsive: {
               0: { items: 1 },
               600: { items: 2 },
               1000: { items: 3 }
           }
       });
   });

—

### **Step 4: Activate the Child Theme**
– Make sure your child theme is active in **Appearance > Themes**.

—

### **Step 5: Use the Custom Element in Fusion Builder**
1. **Edit a page using Fusion Builder**.
2. **Look for the "Custom Owl Carousel" element** in the elements list.
3. **Drag and drop the element** onto your page.
4. **Upload images in the repeater field**.
5. **Save and preview your carousel**.

—

### **Customization**
– Modify `responsive` settings in `custom-owl-carousel.js` to adjust item counts.
– Customize the carousel appearance using CSS in `style.css`:

.custom-owl-carousel .carousel-item img {
       width: 100%;
       height: auto;
       border-radius: 5px;
   }

—

### **Conclusion**
By following these steps, you have successfully created a custom Owl Carousel element in Avada Fusion Builder with an image upload option using a child theme. Let me know if you need any modifications!

User

Also add option to add icon and text in accordian

Assistant

To enhance your **custom accordion element** in Avada Fusion Builder, I'll add options to include an **icon** and **text** alongside the title and description.

—

## **Step 1: Update `class-custom-accordion.php`**
Modify your custom element class to include the **icon** and **text** options.

### **Updated Code**

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

class Custom_Accordion extends Fusion_Element {
    public function __construct() {
        parent::__construct();

        // Element settings
        $this->set_params();
    }

    private function set_params() {
        $this->params = array(
            array(
                'type' => 'repeater',
                'label' => __( 'Accordion Items', 'Avada' ),
                'name' => 'accordion_items',
                'description' => __( 'Add items to the accordion.', 'Avada' ),
                'inner' => array(
                    array(
                        'type' => 'iconpicker',
                        'label' => __( 'Select Icon', 'Avada' ),
                        'name' => 'icon',
                        'default' => '',
                        'description' => __( 'Choose an icon for the accordion header.', 'Avada' ),
                    ),
                    array(
                        'type' => 'textfield',
                        'label' => __( 'Title', 'Avada' ),
                        'name' => 'title',
                        'default' => '',
                    ),
                    array(
                        'type' => 'textfield',
                        'label' => __( 'Additional Text', 'Avada' ),
                        'name' => 'additional_text',
                        'default' => '',
                        'description' => __( 'Add extra text next to the title.', 'Avada' ),
                    ),
                    array(
                        'type' => 'textarea',
                        'label' => __( 'Description', 'Avada' ),
                        'name' => 'description',
                        'default' => '',
                    ),
                ),
            ),
        );
    }

    public function render( $atts, $content = null ) {
        $accordion_items = $atts['accordion_items'];

        ob_start();
        if ( ! empty( $accordion_items ) ) {
            echo '<div class="custom-accordion">';
            foreach ( $accordion_items as $item ) {
                $icon = isset( $item['icon'] ) ? esc_attr( $item['icon'] ) : '';
                $title = isset( $item['title'] ) ? esc_html( $item['title'] ) : '';
                $additional_text = isset( $item['additional_text'] ) ? esc_html( $item['additional_text'] ) : '';
                $description = isset( $item['description'] ) ? esc_html( $item['description'] ) : '';

                echo '<div class="accordion-item">';
                echo '<div class="accordion-header">';
                if ( ! empty( $icon ) ) {
                    echo '<i class="' . esc_attr( $icon ) . '"></i> ';
                }
                echo '<span class="accordion-title">' . $title . '</span>';
                if ( ! empty( $additional_text ) ) {
                    echo ' <span class="accordion-text">' . $additional_text . '</span>';
                }
                echo '</div>';
                echo '<div class="accordion-content" style="display: none;">' . $description . '</div>';
                echo '</div>';
            }
            echo '</div>';
        }

        return ob_get_clean();
    }
}

—

## **Step 2: Update `functions.php`**
Ensure the file is registered in your child theme's `functions.php`:

function avada_register_custom_accordion() {
    if ( class_exists( 'FusionBuilder' ) ) {
        require_once get_stylesheet_directory() . '/inc/class-custom-accordion.php';
        FusionBuilder::register_element( 'Custom_Accordion' );
    }
}
add_action( 'fusion_builder_before_init', 'avada_register_custom_accordion' );

—

## **Step 3: Update JavaScript**
Modify `custom-accordion.js` (inside `inc/` directory) to ensure smooth toggling:

jQuery(document).ready(function($) {
    $('.custom-accordion .accordion-header').on('click', function() {
        var $content = $(this).next('.accordion-content');
        $('.accordion-content').not($content).slideUp(); // Close other open items
        $content.slideToggle(); // Toggle the current item
    });
});

—

## **Step 4: Add CSS for Styling**
Update your child theme’s **style.css** file:

.custom-accordion .accordion-item {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.custom-accordion .accordion-header {
    background: #f8f8f8;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.custom-accordion .accordion-header i {
    margin-right: 8px;
    font-size: 18px;
}

.custom-accordion .accordion-text {
    margin-left: auto;
    font-style: italic;
    font-size: 14px;
    color: #777;
}

.custom-accordion .accordion-content {
    padding: 10px;
    background: #fff;
    display: none;
    border-top: 1px solid #ddd;
}

—

## **Step 5: Use in Fusion Builder**
1. Open a page in **Fusion Builder**.
2. Add the **Custom Accordion** element.
3. Upload an **icon**, enter a **title**, add **text**, and write the **description**.
4. Save and preview your accordion.

—

### **Result**
Your **custom accordion** now includes:
✅ **Icons**
✅ **Title**
✅ **Additional Text**
✅ **Description**
✅ **Smooth Toggle Animation**

Let me know if you need more enhancements! 🚀

User

Also add load more option in blog element

Assistant

User wants to add a "Load More" option in their custom blog post list element in Avada Fusion Builder.

Assistant

To add a **"Load More"** button to your **custom blog post list** element in Avada Fusion Builder, follow these steps:

—

## **Step 1: Update `class-custom-blog-list.php`**
Modify your existing blog list element to support AJAX-based pagination.

### **Updated Code**

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

class Custom_Blog_List extends Fusion_Element {
    public function __construct() {
        parent::__construct();

        // Set element parameters
        $this->set_params();

        // Register AJAX actions
        add_action( 'wp_ajax_load_more_posts', array( $this, 'load_more_posts' ) );
        add_action( 'wp_ajax_nopriv_load_more_posts', array( $this, 'load_more_posts' ) );
    }

    private function set_params() {
        $this->params = array(
            array(
                'type' => 'textfield',
                'label' => __( 'Number of Posts', 'Avada' ),
                'name' => 'posts_per_page',
                'default' => '5',
            ),
            array(
                'type' => 'select',
                'label' => __( 'Order By', 'Avada' ),
                'name' => 'order_by',
                'default' => 'date',
                'options' => array(
                    'date' => 'Date',
                    'title' => 'Title',
                    'rand' => 'Random',
                ),
            ),
        );
    }

    public function render( $atts, $content = null ) {
        $posts_per_page = isset( $atts['posts_per_page'] ) ? intval( $atts['posts_per_page'] ) : 5;
        $order_by = isset( $atts['order_by'] ) ? esc_attr( $atts['order_by'] ) : 'date';

        $args = array(
            'post_type' => 'post',
            'posts_per_page' => $posts_per_page,
            'orderby' => $order_by,
            'paged' => 1,
        );

        $query = new WP_Query( $args );

        ob_start();
        ?>

        <div class="custom-blog-list">
            <div class="post-container">
                <?php
                if ( $query->have_posts() ) :
                    while ( $query->have_posts() ) : $query->the_post();
                        ?>
                        <div class="blog-item">
                            <h3><?php the_title(); ?></h3>
                            <p><?php the_excerpt(); ?></p>
                            <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                        </div>
                        <?php
                    endwhile;
                endif;
                wp_reset_postdata();
                ?>
            </div>

            <?php if ( $query->max_num_pages > 1 ) : ?>
                <button id="load-more-btn" data-page="1" data-max="<?php echo $query->max_num_pages; ?>" data-order="<?php echo $order_by; ?>" data-perpage="<?php echo $posts_per_page; ?>">Load More</button>
            <?php endif; ?>
        </div>

        <?php
        return ob_get_clean();
    }

    public function load_more_posts() {
        $page = isset( $_POST['page'] ) ? intval( $_POST['page'] ) + 1 : 1;
        $order_by = isset( $_POST['order_by'] ) ? sanitize_text_field( $_POST['order_by'] ) : 'date';
        $posts_per_page = isset( $_POST['posts_per_page'] ) ? intval( $_POST['posts_per_page'] ) : 5;

        $args = array(
            'post_type' => 'post',
            'posts_per_page' => $posts_per_page,
            'orderby' => $order_by,
            'paged' => $page,
        );

        $query = new WP_Query( $args );

        if ( $query->have_posts() ) :
            while ( $query->have_posts() ) : $query->the_post();
                ?>
                <div class="blog-item">
                    <h3><?php the_title(); ?></h3>
                    <p><?php the_excerpt(); ?></p>
                    <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                </div>
                <?php
            endwhile;
        endif;
        wp_reset_postdata();
        wp_die();
    }
}

—

## **Step 2: Register the Element**
Make sure your element is registered in `functions.php`:

function avada_register_custom_blog_list() {
    if ( class_exists( 'FusionBuilder' ) ) {
        require_once get_stylesheet_directory() . '/inc/class-custom-blog-list.php';
        FusionBuilder::register_element( 'Custom_Blog_List' );
    }
}
add_action( 'fusion_builder_before_init', 'avada_register_custom_blog_list' );

—

## **Step 3: Add JavaScript for "Load More" Button**
Create a new file `custom-blog-load-more.js` inside the `inc` directory:

jQuery(document).ready(function($) {
    $('#load-more-btn').on('click', function() {
        var button = $(this);
        var page = button.data('page');
        var maxPages = button.data('max');
        var orderBy = button.data('order');
        var perPage = button.data('perpage');

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'load_more_posts',
                page: page,
                order_by: orderBy,
                posts_per_page: perPage,
            },
            beforeSend: function() {
                button.text('Loading...');
            },
            success: function(response) {
                if (response) {
                    $('.post-container').append(response);
                    button.data('page', page + 1);
                    button.text('Load More');

                    if (page + 1 > maxPages) {
                        button.remove();
                    }
                } else {
                    button.remove();
                }
            }
        });
    });
});

—

## **Step 4: Add CSS for Styling**
In your **style.css**, add styles for the blog list and "Load More" button:

.custom-blog-list {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.blog-item {
    background: #f9f9f9;
    padding: 20px;
    margin: 10px 0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.blog-item h3 {
    margin: 0;
    font-size: 22px;
}

.blog-item p {
    font-size: 16px;
    color: #666;
}

.blog-item .read-more {
    display: inline-block;
    margin-top: 10px;
    color: #0073aa;
    font-weight: bold;
}

#load-more-btn {
    background: #0073aa;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-top: 15px;
    border-radius: 5px;
}

#load-more-btn:hover {
    background: #005f8d;
}

—

## **Step 5: Add AJAX Support in `functions.php`**
Ensure `ajaxurl` is available to JavaScript by adding this to your **functions.php**:

function custom_ajax_url() {
    ?>
    <script type="text/javascript">
        var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
    </script>
    <?php
}
add_action('wp_head', 'custom_ajax_url');

—

## **Step 6: Test in Fusion Builder**
1. Open **Fusion Builder**.
2. Add the **Custom Blog List** element.
3. Set **Number of Posts** and **Order By**.
4. Save & Preview.
5. Click **"Load More"** to load additional posts.

—

## **Final Result**
✅ **Dynamically load more blog posts**
✅ **Smooth AJAX loading**
✅ **Custom styling**
✅ **Fusion Builder compatible**

Let me know if you need additional modifications! 🚀

User

Fatal error: Uncaught Error: Call to undefined method FusionBuilder::register_element()

Assistant

The error occurs because the `FusionBuilder::register_element()` method was deprecated in Avada version 7+. The correct way to register a custom element in Avada Fusion Builder is to use `FusionBuilderRegister::get_instance()->add_element()`.

### **Solution: Modify the Element Registration**
Replace this code in `functions.php`:

function avada_register_custom_blog_list() {
    if ( class_exists( 'FusionBuilder' ) ) {
        require_once get_stylesheet_directory() . '/inc/class-custom-blog-list.php';
        FusionBuilder::register_element( 'Custom_Blog_List' ); // ❌ Deprecated
    }
}
add_action( 'fusion_builder_before_init', 'avada_register_custom_blog_list' );

#### ✅ **Use this instead:**

function avada_register_custom_blog_list() {
    if ( class_exists( 'FusionBuilderRegister' ) ) {
        require_once get_stylesheet_directory() . '/inc/class-custom-blog-list.php';
        FusionBuilderRegister::get_instance()->add_element( 'Custom_Blog_List' );
    }
}
add_action( 'fusion_builder_before_init', 'avada_register_custom_blog_list' );

### **Why This Works?**
– `FusionBuilderRegister::get_instance()->add_element()` is the **correct method** for adding custom elements in Avada 7+.
– This ensures **backward compatibility** with newer versions.

Let me know if you run into any other issues! 🚀

User

How to search blog element in builder

Assistant

In Avada Fusion Builder, you can search for your **custom blog element** using the following steps:

### **1️⃣ Check if the Element is Registered Correctly**
Ensure that your custom blog element is properly registered in **Avada > Fusion Builder**. You can verify this by checking:
– **Avada → Fusion Builder → Elements** (Look for your custom blog element)
– If it's missing, there might be an issue with registration.

### **2️⃣ Search in the Builder UI**
Once your element is registered:
– **Edit a Page/Post** with **Fusion Builder**
– Click **+ Add Element**
– Use the **Search Bar** and type the name of your custom blog element
– If registered correctly, it should appear in the list.

### **3️⃣ Manually Check in the Database**
If it's not showing, check if it's stored in the database:
– Open **phpMyAdmin** and go to the `wp_options` table.
– Look for the option `fusion_elements` and check if your custom element is listed.

### **4️⃣ Debug with Code**
Add this debug line inside your custom element class (e.g., `class-custom-blog-list.php`) in the `__construct()` method:

error_log('Custom_Blog_List element loaded successfully.');

Then, check the error logs (`wp-content/debug.log`) to see if the element is loading.

### **5️⃣ Clear Cache & Regenerate CSS**
– **Go to** Avada → Performance
– Click **Clear Cache & Regenerate CSS**
– If using a caching plugin (e.g., WP Super Cache, W3 Total Cache), clear the cache.
– Refresh the Fusion Builder editor and try searching again.

Let me know if it's still not appearing! 🚀

User

element not showing

Assistant

If your **custom blog element** is not appearing in **Fusion Builder**, follow these steps to troubleshoot:

—

### **1️⃣ Verify Element Registration**
Check if the element is correctly registered in `functions.php` of your **child theme**:

#### ✅ **Correct Registration Code (for Avada 7+)**

function avada_register_custom_blog_list() {
    if ( class_exists( 'FusionBuilderRegister' ) ) {
        require_once get_stylesheet_directory() . '/inc/class-custom-blog-list.php';
        FusionBuilderRegister::get_instance()->add_element( 'Custom_Blog_List' );
    }
}
add_action( 'fusion_builder_before_init', 'avada_register_custom_blog_list' );

🔹 If you were using `FusionBuilder::register_element()`, **replace it** with `FusionBuilderRegister::get_instance()->add_element()`.

—

### **2️⃣ Check Class File Location**
Make sure the file `class-custom-blog-list.php` exists in:

your-child-theme/inc/class-custom-blog-list.php

✅ If not, move it inside the `/inc/` folder in the child theme.

—

### **3️⃣ Check Element Class Structure**
Inside `class-custom-blog-list.php`, your class should follow this structure:

if ( class_exists( 'Fusion_Element' ) ) {
    class Custom_Blog_List extends Fusion_Element {
        public function __construct() {
            parent::__construct();
            add_filter( 'fusion_builder_element_options', [ $this, 'add_custom_options' ] );
        }

        public function add_custom_options( $elements ) {
            $elements['custom_blog_list'] = [
                'name'  => esc_attr__( 'Custom Blog List', 'fusion-builder' ),
                'shortcode' => 'fusion_custom_blog_list',
                'icon'  => 'fusiona-blog',
            ];
            return $elements;
        }

        public function render( $atts, $content = '' ) {
            return '<div class="custom-blog-list">Your Blog List Here</div>';
        }
    }

    new Custom_Blog_List();
}

🔹 This ensures Fusion Builder recognizes the element.

—

### **4️⃣ Enable Fusion Builder Elements in Admin**
1. **Go to** WP Admin → **Avada → Fusion Builder → Elements**
2. **Look for** `Custom Blog List`
3. **Enable it**, if disabled.

—

### **5️⃣ Check Fusion Builder Debug Mode**
If still missing, enable **debug mode** to see errors:
– **Go to** `wp-config.php`
– Add this line if missing:

define('WP_DEBUG', true);
  define('WP_DEBUG_LOG', true);

– Reload Fusion Builder, then check `wp-content/debug.log` for errors.

—

### **6️⃣ Clear Cache & Regenerate CSS**
– **Go to** Avada → Performance
– Click **Clear Cache & Regenerate CSS**
– If using a cache plugin (WP Super Cache, W3 Total Cache), clear the cache.
– Hard refresh the page (`Ctrl + Shift + R`).

—

### **7️⃣ Try Registering with a Different Name**
If Fusion Builder still doesn’t detect it, rename your class and shortcode:

#### 🔹 Example Change:
Modify `class-custom-blog-list.php`:

class My_Custom_Blog_List extends Fusion_Element {
    public function __construct() {
        parent::__construct();
        add_filter( 'fusion_builder_element_options', [ $this, 'add_custom_options' ] );
    }

    public function add_custom_options( $elements ) {
        $elements['my_custom_blog_list'] = [
            'name'  => esc_attr__( 'My Custom Blog List', 'fusion-builder' ),
            'shortcode' => 'fusion_my_custom_blog_list',
            'icon'  => 'fusiona-blog',
        ];
        return $elements;
    }

    public function render( $atts, $content = '' ) {
        return '<div class="my-custom-blog-list">Your Blog List Here</div>';
    }
}

new My_Custom_Blog_List();

Then update `functions.php`:

function avada_register_custom_blog_list() {
    if ( class_exists( 'FusionBuilderRegister' ) ) {
        require_once get_stylesheet_directory() . '/inc/class-custom-blog-list.php';
        FusionBuilderRegister::get_instance()->add_element( 'My_Custom_Blog_List' );
    }
}
add_action( 'fusion_builder_before_init', 'avada_register_custom_blog_list' );

🔹 This forces Avada to **re-register** the element.

—

### **8️⃣ Reinstall Fusion Builder**
If everything is correct but the element is still missing:
1. **Deactivate & Delete Fusion Builder** from WP Admin → Plugins
2. **Reinstall** Fusion Builder from **Avada > Plugins**

—

### **Final Step: Search in Builder**
1. **Edit a Page/Post**
2. Click **+ Add Element**
3. Search **"Custom Blog List"** or **"My Custom Blog List"**

—

### **Let Me Know If It Still Doesn’t Show! 🚀**
I’ll help debug further.

User

we are using avada 6

Assistant

Since you're using **Avada 6**, the method to register custom elements is different. In **Avada 6**, you should use `FusionBuilder::register_element()`, which was removed in Avada 7+.

—

### ✅ **Correct Method for Avada 6**
Modify your `functions.php` to register the element correctly:

function avada_register_custom_blog_list() {
    if ( class_exists( 'FusionBuilder' ) ) {
        require_once get_stylesheet_directory() . '/inc/class-custom-blog-list.php';
        FusionBuilder::register_element( 'Custom_Blog_List' );
    }
}
add_action( 'fusion_builder_before_init', 'avada_register_custom_blog_list' );

🔹 **Important:** Ensure `FusionBuilder` class exists before calling `register_element()`.

—

### **Step 2: Create Custom Element Class**
Create the file:
📂 `your-child-theme/inc/class-custom-blog-list.php`

Inside that file, add the following:

if ( class_exists( 'Fusion_Element' ) ) {
    class Custom_Blog_List extends Fusion_Element {

        public function __construct() {
            parent::__construct();
            add_filter( 'fusion_builder_shortcodes', [ $this, 'add_shortcode' ] );
        }

        public function add_shortcode( $shortcodes ) {
            $shortcodes['fusion_custom_blog_list'] = [
                'name'        => esc_attr__( 'Custom Blog List', 'fusion-builder' ),
                'shortcode'   => 'fusion_custom_blog_list',
                'icon'        => 'fusiona-blog',
                'params'      => [
                    [
                        'type'    => 'text',
                        'heading' => esc_attr__( 'Number of Posts', 'fusion-builder' ),
                        'param_name' => 'posts_per_page',
                        'value' => '5',
                    ],
                    [
                        'type'    => 'select',
                        'heading' => esc_attr__( 'Order By', 'fusion-builder' ),
                        'param_name' => 'order_by',
                        'value' => [
                            'date'  => 'Date',
                            'title' => 'Title',
                        ],
                    ],
                ],
            ];
            return $shortcodes;
        }

        public function render( $atts, $content = '' ) {
            $args = [
                'post_type'      => 'post',
                'posts_per_page' => isset( $atts['posts_per_page'] ) ? intval( $atts['posts_per_page'] ) : 5,
                'orderby'        => isset( $atts['order_by'] ) ? sanitize_text_field( $atts['order_by'] ) : 'date',
            ];

            $query = new WP_Query( $args );
            $output = '<div class="custom-blog-list">';
            if ( $query->have_posts() ) {
                while ( $query->have_posts() ) {
                    $query->the_post();
                    $output .= '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
                }
                wp_reset_postdata();
            } else {
                $output .= '<p>No posts found.</p>';
            }
            $output .= '</div>';

            return $output;
        }
    }

    new Custom_Blog_List();
}

—

### **Step 3: Verify and Search in Fusion Builder**
After saving your files:
1. **Clear Cache:**
– Go to **Avada > Theme Options > Performance** → Click **Clear Cache & Regenerate CSS**.
– If using a caching plugin, clear its cache too.
2. **Go to a Page/Post Editor**
3. Click **+ Add Element**
4. Search for **"Custom Blog List"**

If you still don't see it, try these:
– Disable any **Fusion Builder caching**:
**Avada > Fusion Builder > Elements** → **Disable Cache**
– Check the **debug log** (`wp-content/debug.log`) for any errors.

—

Let me know if it's still not showing, and I'll help debug further! 🚀

User

localize scripts custom

Assistant

If you want to **localize scripts** in your **Avada child theme**, you can use `wp_localize_script()` to pass PHP data (like AJAX URLs, translations, or theme settings) to your JavaScript files.

—

### **✅ Basic Example: Passing Data to JavaScript**
Add the following in your **child theme’s `functions.php`**:

function custom_enqueue_scripts() {
    wp_enqueue_script(
        'custom-script', 
        get_stylesheet_directory_uri() . '/js/custom-script.js', 
        ['jquery'], 
        null, 
        true
    );

    // Pass PHP data to JavaScript
    wp_localize_script(
        'custom-script', 
        'customVars', 
        [
            'ajaxUrl'   => admin_url( 'admin-ajax.php' ),
            'siteName'  => get_bloginfo( 'name' ),
            'isUserLoggedIn' => is_user_logged_in() ? 'yes' : 'no',
        ]
    );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );

—

### **✅ Access Data in JavaScript**
In your **custom-script.js** file:

document.addEventListener("DOMContentLoaded", function () {
    console.log("AJAX URL:", customVars.ajaxUrl);
    console.log("Site Name:", customVars.siteName);
    console.log("Is User Logged In?", customVars.isUserLoggedIn);
});

—

### **✅ Example for AJAX in Avada**
If you need to use **AJAX in Fusion Builder**, do this:

#### **Modify `functions.php`:**

function custom_ajax_handler() {
    $response = [
        'message' => 'Hello from AJAX!',
        'status'  => 'success'
    ];
    wp_send_json( $response );
}
add_action( 'wp_ajax_custom_action', 'custom_ajax_handler' );
add_action( 'wp_ajax_nopriv_custom_action', 'custom_ajax_handler' );

#### **Modify `custom-script.js`:**

jQuery(document).ready(function($) {
    $.ajax({
        url: customVars.ajaxUrl,
        type: 'POST',
        data: {
            action: 'custom_action'
        },
        success: function(response) {
            console.log("AJAX Response:", response);
        }
    });
});

—

### **🎯 Notes**
✔ **`wp_localize_script()`** must be called **after** `wp_enqueue_script()`
✔ Works in **Fusion Builder custom elements** and **theme scripts**
✔ Supports **AJAX URLs, security nonces, translations, and theme settings**

—

Let me know if you need help integrating this into your **Fusion Builder custom element**! 🚀

User

give editor option for textarea

Assistant

To add a **textarea** with a **WordPress editor (TinyMCE)** in your **Avada Fusion Builder custom element**, you need to use `wp_editor()` in your element's settings.

—

## **✅ Add TinyMCE Editor to Your Custom Element**
Modify your **custom element class** (`class-custom-blog-list.php`):

if ( class_exists( 'Fusion_Element' ) ) {
    class Custom_Blog_List extends Fusion_Element {

        public function __construct() {
            parent::__construct();
            add_filter( 'fusion_builder_shortcodes', [ $this, 'add_shortcode' ] );
        }

        public function add_shortcode( $shortcodes ) {
            $shortcodes['fusion_custom_blog_list'] = [
                'name'        => esc_attr__( 'Custom Blog List', 'fusion-builder' ),
                'shortcode'   => 'fusion_custom_blog_list',
                'icon'        => 'fusiona-blog',
                'params'      => [
                    [
                        'type'        => 'tinymce',
                        'heading'     => esc_attr__( 'Content Editor', 'fusion-builder' ),
                        'param_name'  => 'editor_content',
                        'value'       => '',
                        'description' => esc_attr__( 'Enter content with formatting.', 'fusion-builder' ),
                    ],
                ],
            ];
            return $shortcodes;
        }

        public function render( $atts, $content = '' ) {
            $editor_content = isset( $atts['editor_content'] ) ? wpautop( $atts['editor_content'] ) : '';

            return '<div class="custom-blog-list">' . $editor_content . '</div>';
        }
    }

    new Custom_Blog_List();
}

—

## **✅ Explanation**
1. **Adds a TinyMCE editor (`tinymce`)** in the Fusion Builder settings panel.
2. **Saves the formatted content** to the `editor_content` parameter.
3. **Displays the formatted content** using `wpautop()` to preserve paragraphs and line breaks.

—

## **🎯 How to Use It?**
1. **Go to Fusion Builder** → Edit a Page
2. **Click "Add Element"** → Search for **Custom Blog List**
3. **Find the "Content Editor" field**
4. **Add rich text** (bold, italic, links, etc.)
5. Save & check the front-end output 🎉

—

### **🔹 Need a Simple Textarea Instead?**
If you just need a **plain textarea** (without TinyMCE), replace this:

[
    'type'        => 'tinymce',
    'heading'     => esc_attr__( 'Content Editor', 'fusion-builder' ),
    'param_name'  => 'editor_content',
    'value'       => '',
    'description' => esc_attr__( 'Enter content with formatting.', 'fusion-builder' ),
],

With this:

[
    'type'        => 'textarea',
    'heading'     => esc_attr__( 'Content', 'fusion-builder' ),
    'param_name'  => 'editor_content',
    'value'       => '',
    'description' => esc_attr__( 'Enter text content.', 'fusion-builder' ),
],

—

Let me know if you need further customization! 🚀🔥

Custom Blog Post Element

Leave a Comment Cancel