How to make sidebar widget accordion in wordpress

Create sidebar widget accordion in WordPress!

Sidebar widget accordion using collapsible widget area plugin wordpress - pepfry.com

Sidebar widget accordion using collapsible widget area plugin 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.

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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
Downloads: 7,427

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.

OR

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

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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.

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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.

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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.

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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:

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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.

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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…

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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!!

Sidebar widget accordion using Collapsible widget accordion plugin - WordPress

Sidebar widget accordion using Collapsible widget accordion plugin – WordPress

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!

9 thoughts on “How to make sidebar widget accordion in wordpress

  1. thanks for your introduction for this useful plugin which i ‘m searching for, but i found it’s all skins options was not accurate to my theme and there were long blank after expanded content, how can i copy its one style and adjust and tweak a new skin for it and save into drop down menu list as a option ?

    sincerely

    • Hi Joseph,

      If the styles in the dropdown doesn’t match your site’s color scheme – You can write your own custom styles inside the child theme by overriding existing styles using existing class or ID!!

      And sorry, I’m unsure how to add custom style set to show up in the dropdown. I’m sure it requires some work inside the plugin’s .php file, which is a mess.

  2. Hello

    now i have successfully created a custom css and link ok , but
    this plugin seems having a bug in selected accordion , there always is a long blank after content , it can’t be adjusted , even on developer’s demo site, but he didn’t answer question for a while

    how did you adjust this bug ?

Leave a Reply to joseph Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">