Custom Accordian Shortcode Development

February 3, 2025 · AI Conversations

User

Assistant

You're close! However, your shortcode needs to properly extract and display the uploaded image (icon) for each accordion item. Here’s how you can modify your code:

### Fixes & Improvements:
1. **Fix the image field extraction** – You’re currently trying to print `$item['image']`, but in your `fusion_builder_map`, the field is named `'icon'`.
2. **Ensure proper output of the image** – Use `wp_get_attachment_url()` to fetch the image URL from the stored attachment ID.
3. **Escape output for security** – Wrap variables with `esc_html()`, `esc_url()`, etc.

—

### **Updated Shortcode Code**

function bubori_custom_accordian_shortcode( $atts, $content = null ) {
    // Define default attributes
    $defaults = array(
        'accordion_items' => '',
        'open_first' => 'no',
    );

    $atts = shortcode_atts( $defaults, $atts, 'custom_accordian' );

    // Decode JSON from base64 encoding
    $accordion_items = json_decode( base64_decode( $atts['accordion_items'] ), true );

    ob_start();
    ?>
    <div class="custom-accordian-container">
        <div class="custom-accordian">
            <?php if ( ! empty( $accordion_items ) ) : ?>
                <?php foreach ( $accordion_items as $item ) :
                    $icon_url = isset( $item['icon'] ) ? wp_get_attachment_url( $item['icon'] ) : ''; // Get image URL
                    $icon_text = isset( $item['icon_text'] ) ? esc_html( $item['icon_text'] ) : '';
                    $title = isset( $item['title'] ) ? esc_html( $item['title'] ) : '';
                    $content = isset( $item['content'] ) ? wp_kses_post( $item['content'] ) : ''; // Allow safe HTML
                ?>
                    <div class="accordion-item">
                        <div class="accordion-header">
                            <?php if ( $icon_url ) : ?>
                                <img src="<?php echo esc_url( $icon_url ); ?>" alt="<?php echo esc_attr( $title ); ?>" class="accordion-icon">
                            <?php endif; ?>
                            <?php echo $title; ?> 
                            <?php if ( $icon_text ) : ?>
                                <span class="icon-text"><?php echo $icon_text; ?></span>
                            <?php endif; ?>
                        </div>
                        <div class="accordion-content"><?php echo $content; ?></div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

add_shortcode( 'custom_accordian', 'bubori_custom_accordian_shortcode' );

—

### **Key Changes:**
✅ **Properly fetches the image** using `wp_get_attachment_url( $item['icon'] )`.
✅ **Ensures correct HTML escaping** for security:
– `esc_html()` for text
– `wp_kses_post()` for content (allows safe HTML)
– `esc_url()` for image URLs
✅ **Displays the image if available** right before the title.
✅ **Wraps icon text in a “** for styling.

—

### **Final Output Structure**

<div class="accordion-item">
    <div class="accordion-header">
        <img src="icon-url.jpg" alt="Accordion Title" class="accordion-icon">
        Accordion Title
        <span class="icon-text">Some Icon Text</span>
    </div>
    <div class="accordion-content">Accordion Content</div>
</div>

Now, your custom accordion in Avada Fusion Builder should correctly display uploaded images and text next to them! 🚀 Let me know if you need further refinements. 😊

Custom Accordian Shortcode Development

Leave a Comment Cancel