Create sidebar widget accordion in WordPress!
How to convert sidebar widgets in WordPress into a collapsible accordion?
If you were looking for a successful tutorial to convert all or some of your sidebar widgets into accordion – then, you have landed on the right place on the internet!
In this tutorial, I would like to show you all – how you can convert your sidebar widgets into a collapsible accordion.
Here, I will be using a WordPress plugin called Collapsible widget area, the name of the plugin itself tells you everything about what it can do for you and your websites.
I’d like to heart-fully give all the credits and gratitude to the plugin developer Curtiss Grymala – who has put his heart out to get this plugin done and put it up on WordPress.org for public use.
More than than that – the plugin is free for use which shows his greatness!
According to the Author of the plugin and as see on WordPress.org, the plugin requirement and compatible upto:
Requires: 3.4.2 or higher
Compatible up to: 3.5.2
Last Updated: 2012-10-20
Although, above it shows that it is compatible just upto 3.5.2 – It will work upto the latest version as of now 3.9.1.
I have personally tested the plugin on the latest versions of WordPress!!
Getting you started with creating sidebar widget accordion!
Hope you already have setup a WordPress site locally or up on the server. Please follow all the steps which are listed below:
Step1: Download the plugin Collapsible widget area from WordPress.org, login to your website and install it manually.
Search and install the plugin directly from your dashboard and after installation please, activate it by clicking the activate plugin.
Step2: Go to Settings -> Collapsible widget area
Step3: Once you click on the link – you will be taken to the configuration page of collapsible widget area.
Where you will have options to choose Themes for your accordion and the number of sidebar widget accordion holders that you might want for your website.
For today’s tutorial – I’ll choose the default theme and choose to go with 1 sidebar widget accordion holder. So that you are not confused with lots of them!
Step4: Go to Appearance -> Widgets
There you will see that in the left side of the widgets section there is 1 widget named Collapsible widget area.
Also you will see another Collapsible widget area as one amongst the Sidebar widget block towards the right side.
If you see both of them – then, you are doing good!
Step5: Now, Please drag the Collapsible widget area from the left section and put it into the sidebar widget block. See below to know how.
For this tutorial, I’ll put it in the primary widget block. Then click on the widget to open options inside it.
Inside you will see 2 options 1. Tab and 2. Accordion – please choose Accordion and choose other options as required. Please see the screen shot below for options to choose:
Step6: Once options are selected – click on save.
Step7: Now, click on the Collapsible widget area block which is in the right side and it will open up.
Then, drag the widgets into it that you want to be displayed as Accordion. Please see screenshots below.
After you drag all the widgets into the Collapsible widget area:
Please, make sure that you fill all the title sections with the names that you might want to give them like Categories, Archives, Tags, Search, Comments etc…
Because, those names are the titles that users get to click on to see what’s inside the widget.
Once done with that:
Please see your website front end and you should be able to see the Sidebar widgets which were dragged into the Collapsible widget area have been converted into a traditional Accordion menu which can be open upon user’s click!!
If you wish to – you can go back to the Collapsible widget area’s configuration page and brows through all the available themes that might suit your website needs. Or write your own styles which would match your website more closely than one of the available theme would.
That’s it guys, in this tutorial – you have learn’t to create a Sidebar widget accordion for your WordPress sidebar using Collapsible widget area plugin!!
In case of any questions on how to create a sidebar widget accordion on your self hosted WordPress website .
Do not worry post your questions below in the comment sections and choose ‘Notify me of follow-up comments by email‘ – so that you can get an email when I answer your questions!