How to Build an Accordion Plugin for WordPress

Posted on 16th June 2023

Introduction

If you’re a WordPress developer, chances are you’ve been asked to create a plugin at some point. Plugins are a great way to add features to a WordPress site without having to edit the core code. In this tutorial, we’re going to show you how to build an accordion plugin for WordPress.

Accordions are a common UI element that are used to hide and show content. They’re often used to hide lengthy sections of content so that they don’t take up too much space on the page.

Creating the Plugin

The first thing we need to do is create a new folder for our plugin. We’ll name this folder “accordion-plugin”.

Next, we need to create a file called “accordion-plugin.php” in our “accordion-plugin” folder. This will be the main plugin file.

In our “accordion-plugin.php” file, we need to add the following:

<?php
}

This function will output the HTML for our accordion. We've hard-coded the content in this example, but you could easily modify the function to pull in content from the WordPress database.

Next, we need to add a shortcode for our accordion. Shortcodes are a WordPress feature that allows you to output content in the post editor. They're usually used to output complex content, like plugins, in the post editor.

We'll add the following code to our "accordion-plugin.php" file:

function accordion_shortcode() {
ob_start();
output_accordion();
return ob_get_clean();
}
add_shortcode( 'accordion', 'accordion_shortcode' );

This code defines a new shortcode called "[accordion]". When this shortcode is used in the post editor, it will output the HTML from our "output_accordion" function.

Next, we need to register our plugin with WordPress. We'll do this by adding the following code to our "accordion-plugin.php" file:

function register_accordion_plugin() {
register_activation_hook( __FILE__, 'flush_rewrite_rules' );
register_deactivation_hook( __FILE__, 'flush_rewrite_rules' );
}
register_accordion_plugin();

This code tells WordPress to flush the rewrite rules when our plugin is activated or deactivated. This is necessary in order for the "[accordion]" shortcode to work.

Finally, we need to enqueue our plugin's stylesheet. We'll do this by adding the following code to our "accordion-plugin.php" file:

function enqueue_accordion_stylesheet() {
wp_enqueue_style( 'accordion-stylesheet', plugins_url( 'accordion-plugin/accordion-plugin.css' ) );
}
add_action( 'wp_enqueue_scripts', 'enqueue_accordion_stylesheet' );

This code tells WordPress to load our plugin's stylesheet. We need to do this so that our accordion looks good on the front-end of the site.

Creating the Stylesheet

Now that we have our plugin file created, we need to create our plugin’s stylesheet. We’ll name this file “accordion-plugin.css” and place it in our “accordion-plugin” folder.

In our “accordion-plugin.css” file, we’ll add the following code:

.accordion {
overflow: hidden;
}

.accordion-section {
border: 1px solid #cccccc;
margin: 0 0 20px 0;
}

.accordion-section-title {
display: block;
padding: 15px;
background: #eeeeee;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #cccccc;
cursor: pointer;
}

.accordion-section-title:hover {
background: #dddddd;
}

.accordion-section-content {
padding: 15px;
display: none;
}

This code styles our accordion. Feel free to modify this code to match your site’s style.

Using the Plugin

Now that we have our plugin created, we can use it on our WordPress site.

To do this, we’ll login to the WordPress admin area and navigate to the “Plugins” page. On this page, we should see our “Accordion Plugin” listed.

We need to activate our plugin before we can use it. To do this, we’ll click on the “Activate” link.

Once our plugin is activated, we can use the “[accordion]” shortcode in the post editor.

Let’s create a new post and add the following content:

[accordion]

This will output our accordion on the front-end of the site.

Conclusion

In this tutorial, we’ve shown you how to build an accordion plugin for WordPress. We’ve also shown you how to style the accordion using CSS.

If you have any questions, please leave a comment below.

In the previous article, we looked at how to create the basic structure for our accordion plugin. In this article, we’ll add the necessary code to make our accordion work.

First, we need to enqueue our scripts and styles. Add the following code to your plugin’s main file:

function my_plugin_scripts() {
wp_enqueue_script( ‘jquery’ );
wp_enqueue_script( ‘my-plugin’, plugin_dir_url( __FILE__ ) . ‘js/my-plugin.js’, array( ‘jquery’ ), ‘1.0’, true );
wp_enqueue_style( ‘my-plugin’, plugin_dir_url( __FILE__ ) . ‘css/my-plugin.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_scripts’ );

This code adds the jQuery library and our my-plugin.js file to the front-end of our site. We’re also adding our my-plugin.css file, which we’ll use to style our accordion.

Next, we need to add the HTML for our accordion. Add the following code to your plugin’s main file:

function my_plugin_accordion() {
?>

<?php
}
add_shortcode( 'my_plugin_accordion', 'my_plugin_accordion' );

This code adds a [my_plugin_accordion] shortcode, which we can use to output our accordion anywhere on our site.

Finally, we need to add the JavaScript code that will make our accordion work. Add the following code to your my-plugin.js file:

jQuery(document).ready(function($) {
$('.my-plugin-accordion').accordion();
});

This code uses the jQuery UI accordion widget to make our accordion work.

And that's it! You should now have a working accordion plugin.

Previous Post - Accessibility in WordPress Theme Development

Next Post - How to Create Validation Rules in Microsoft Access on Windows 11