Add/Edit/Delete Accordions in WordPress

An Accordion is collapsible a list that works great for Frequently Asked Question pages and more. While it is easy to add and remove Accordions with Widgetkit, setting up Accordions on the page requires a little more work. Follow these instructions closely. Don't forget, you can call Techno Goober for help at (302) 645-7177 or email us for help. 

Quick Access: 

 


 

Open Widgetkit

To begin, log into WordPress, your content management system.

Step 1: Click the Widgetkit link in the left sidebar within the content management system. Hint: It's at the very bottom. 

widgetkit

 


 

Edit Existing Accordion

Step 1: Navigate to Widgetkit and select Accordion. It should be open by default. 

Step 2: Click on the name of the accordion that you want to edit.

accordion name

Step 3: Edit the contents of the accordion by changing the title or content of each accordion item. Read more about editing text, headings, and links

accordion test

Step 4: You can remove items by clicking the minus symbol next to the item. 

accordion remove item

Step 5: You can add new accordions by clicking Add New Item at the bottom. If you are finished, click Save Changes

accordion add or save

Step 6: Go to the front-end of the website to check out your work. To do this, you can right-click on the name of your website in the top left corner and select Open in a new tab.

open in new tab

Help! I Don't See My Changes!

 


 

Add New Accordion

Step 1: Navigate to Widgetkit and select Accordion. It should be open by default. 

Step 2: Click Add New. 

accordion name

Step 3: Enter a title for your Gallery. Make it memorable or descriptive. It needs to be easy to understand what it is in the future.

accordion add name

Step 4: Enter a title and description for at least one Accordion Item. Read more about editing text, headings, and links

accordion test

Step 5: Adjust Settings. You can set the Accordion to be completely collapsed by selecting Auto Collapse and Start Index -1.

set auto collapse and start index at -1

Step 6: You can quickly re-order your Accordion Items by dragging and dropping too. 

accordion reorder

Step 7: Add additional Accordion Items if you want by click Add New Item. When you are finished, click Save Changes. 

accordion add or save

 


 

Display new Accordion on Page

Step 1: Navigate to Widgetkit, then select Accordion. It should be open by default. 

Step 2: Next to the name of the Accordion is the Shortcode. Highlight and copy the Shortcode. For example, widgetkit id=3856. Don't forget the brackets, you'll need those for the code to display properly. 

widgetkit shortcode

Step 3: Navigate to the page you would like to add the Accordion to from the Page Manager. Click the title of the page to open it. 

Step 4: Within the Editor, paste or type the shortcode that was associated with the Accordion. For example, widgetkit id=3856 *including brackets

accordion shortcode

Step 5: Save Changes to the edited page by clicking Update.

update page

Step 6: Confirm the Accordion is displaying correctly. Go to the front-end of the website to check out your work. To do this, you can right-click on the name of your website in the top left corner and select Open in a new tab.

open in new tab

Step 7: Confirm the Accordion is displaying correctly.

accordion on page

Help! I Don't See My Changes!

 


 

Delete Accordion

Step 1: Navigate to Widgetkit and select Accordion. It should be open by default. 

Step 2: Click the Delete button next to the Title of the Accordion you want to delete. 

widgetkit delete