Awesome Accordions website

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