How to Create Accordion Shortcode in WordPress

To create an accordion shortcode in WordPress, you’ll need to add custom code to your theme’s functions.php file or create a custom plugin. Here’s a step-by-step guide on how to create a simple accordion shortcode:

Step 1: Access your WordPress site’s files

• If you are using a self-hosted WordPress installation, you can access the files through FTP or your hosting provider’s file manager.
• If you are using a WordPress.com site, you will need a Business plan or higher to access and add custom code.

Step 2:

Create a new file (if using FTP) or open your theme’s functions.php file (if using the file manager).

Step 3:

Add the following code to create the accordion shortcode:

// Add Accordion Shortcode
function custom_accordion_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(),
        $atts,
        'accordion'
    );

    return '<div class="accordion">' . do_shortcode($content) . '</div>';
}
add_shortcode('accordion', 'custom_accordion_shortcode');

// Add Accordion Item Shortcode
function custom_accordion_item_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array('title' => ''),
        $atts,
        'accordion_item'
    );

    return '<div class="accordion-item">
                <h3 class="accordion-title">' . esc_html($atts['title']) . '</h3>
                <div class="accordion-content">' . do_shortcode($content) . '</div>
            </div>';
}
add_shortcode('accordion_item', 'custom_accordion_item_shortcode');

Step 4:

Save the file and upload it back to your server if using FTP.

Now, you have created two custom shortcodes: [accordion] and [accordion_item]

To use the accordion shortcode, follow these steps:

1. Go to the page or post where you want to add the accordion in the WordPress admin dashboard.
2. Use the following shortcode structure:

[accordion]
  [accordion_item title="Section 1 Title"]Content for section 1[/accordion_item]
  [accordion_item title="Section 2 Title"]Content for section 2[/accordion_item]
  [accordion_item title="Section 3 Title"]Content for section 3[/accordion_item]
[/accordion]

Step 5:

Replace “Section X Title” with the titles you want for each section, and “Content for section X” with the actual content you want to display when each section is expanded.

Step 6: Save or update your page or post to apply the changes.

Now, when you view the page or post, you should see the accordion with collapsible sections. When users click on a section title, the corresponding content will expand or collapse.

Please note that the code provided above creates a basic accordion with minimal styling. You may want to customize the CSS to match your site’s design and layout.

Additionally, if you are not comfortable working with code or prefer a more user-friendly solution, you can explore various accordion plugins available in the WordPress plugin repository. These plugins often provide a visual interface to create and customize accordions without writing code.