An overview of the Awesome accordion plugin, how to download and use, basic structure, examples, and more.
How to install the plugin
Installing Awesome Accordions is a simple and straightforward process. You should start by navigating to the plugins page on your WordPress dashboard.
Upload Plugin Zip File
You can access the plugins page menu from the left dashboard menu as shown below:
Click on the ‘Add New’ button to begin uploading the plugin zip file. Click on the ‘Install Now ‘button to install the plugin:
Alternatively, you can access the plugins folder via FTP in this path wp-content/plugins from your root WordPress installation where you can directly upload the plugin zip files.
Activate Awesome Accordions
After you have successfully uploaded the plugin you will be redirected to the plugin activation page. Click on ‘Activate Plugin’ button:
Creating your first accordion
After activating the plugin you can now create your first accordion. When the plugin is activated, you will see the new Accordions menu on the main dashboard menu as shown in the image below:
Under this Accordions menu, there is an ‘Add New’ sub-menu. Click on this sub-menu or on the ‘Add New’ button under the main Accordions page as shown in the image below:
When you click the button or the submenu, you will be redirected to a new accordion post type where you can now start creating your first accordion:
As you can see on the image above the new accordion page has different features that include the title (1) where you will add the title of the accordion, the accordion blocks (2), the add element button for adding new item (3) and the auto-generated shortcode that you will use to publish the accordion on a page or post (4)
Accordion Title
Add the Title on the main post title as shown in the image below:
Adding Accordions Blocks
You can add accordion items by clicking on the ‘Add Element’ button (1), and you can edit the title and content of the accordion item by clicking on the down arrow (2) as shown in the image below:
Editing Accordion Item
Each of the accordion items added in the step above can be edited by clicking the down arrow on the far right as shown in the image above (2). When you click on this icon the accordion item opens like how the default WordPress widgets work:
When the accordion item block is open you have a title field (1), the content field (2) and the delete and save buttons for the block as shown in the image above.
Saving Accordion Item
You should add the title and the content of each of the block that you add and save the settings using the Save button in each of the blocks. The save button will show you when the saving is complete and you can now move to the next block:
Removing Accordion Item
For some reason, if you wish to remove the accordion item you should click on the delete button after opening the specific accordion-item that you wish to remove.
A popup confirmation will be shown and you should click on the ‘Remove’ button to successfully remove the accordion item:
After removing the accordion item update the post using the main update button or publish button for the changes to be effective.
Publishing the Accordion
After adding all the block for a specific accordion it is easy you publish the accordion. Click on the publish button and the accordion will be published just like the default WordPress posts.
When the accordion is published it is now ready for display in the frontend of the site using the shortcode generated for each of the accordions you create.
Displaying Accordion on a Page or Post
You can show the accordion you create on a page or a post using the automatically generated shortcode.
The shortcode consists of the name and one parameter that represent the specific page id for the accordion custom post type.
Copy the shortcode and paste it in a new page or post and publish the post or the page to display the shortcode:
After publishing the page you can check the frontend to see if the accordion is displayed as shown in the image below:
