Skip to: Getting started

Awesome Accordions website

Getting started

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:

add new plugin

Click on the ‘Add New’ button to begin uploading the plugin zip file. Click on the ‘Install Now ‘button to install the plugin:

install 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:

activate plugin

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:

accordions menu

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:

add new accordion

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:

new accordion page

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:

accordion title

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:

accordions blocks

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:

accordion item features

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:

saving accordion 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:

removing accordion

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.

publish accordion

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.

accordion shortcode

Copy the shortcode and paste it in a new page or post and publish the post or the page to display the shortcode:

display_accordion on page or post

After publishing the page you can check the frontend to see if the accordion is displayed as shown in the image below:

accordion frontend display

Ready to build better team pages?

Get it for $29.00

What's so awesome about us?

  • Open source

    Our plugins are 100% open source and developed transparently on Bitbucket. Anyone can join the development and contribute.

  • Works with your theme

    Our plugins are carefully crafted to keep your site fast, the html is easy to read and extend and we provide the option to disable js and css files from the settings page.

  • Well documented

    Our plugins are well documented with in our knowledge base. It’s a great way to find instant answers or read tutorials to almost every question!.

  • Excellent support

    All our plugins come with full support. We’re here to help and offer expert advice on how to get the most out of your plugin.

  • Money back garantee

    We have a very simple refund policy. We will try to fix issues first. If we can't, we will definitely give your money back.

  • Regular updates

    We are regularly working to improve the plugin by adding new features, fixing bugs and keeping updated with the latest WordPress version.

Back To Top