Wordpress Plugins Frequently Asked Questions - jQuery Vertical Accordion Menu

Creating a custom skin for the wordpress jQuery vertical accordion menu plugin

The CSS involved in creating the styles for the accordion menu is relatively easy. There are a few additional class names, which the jQuery plugin adds to the menu in order to help with styling. Make sure that any custom CSS is added to your theme’s style sheet – do not edit the plugin CSS files as these will be … more

Adding an accordion menu using shortcodes to your template files

To use WordPress shortcodes outside of the post/page content, directly in a template file you need to use additional code to call the shortcode function.

The example below would add an accordion menu using the WordPress custom menu “Test Menu” with the default settings (see WordPress Plugin – jQuery Vertical Accordion Menu plugin page for more information): … more

Adding jQuery to your theme files using wp_enqueue_script

If jQuery is hardcoded into your theme files this may cause plugins that rely on jQuery to break as reloading the jQuery library a second time overwrites previously loaded jQuery plugin files.

To avoid this you can add jQuery via your functions.php file using a built-in WordPress function. This will coordinate between all of the files that require the library … more

Widget does not appear on page when using twentyeleven theme

The twentyeleven theme has a setting, which allows you to turn off the sidebar for pages/posts.

If your widget is only appearing on the home page go to:

Admin-Appearance-Theme Options

Check the setting for “Default Layout” – make sure that the “One-column, no sidebar” option is NOT selected. … more

The accordion sub-menus briefly appear open whilst the page is loading

Since the accordion menu effect is created using jQuery the actual accordion features, such as the sub-menus being hidden can only be applied after the menu has loaded. Usually this shouldnt be a problem and will not be noticeable by visitors to your site.

However, if your page loading speed is a little slow or other items on the page … more

How to identfiy the current menu item in an accordion menu

The current active menu item in a WordPress menu can be identified in 2 ways, giving you different CSS rules that you can add to your theme’s style sheet depending on the “look” you want to achieve.

To highlight the “active” item i.e. a menu link that has been clicked, the the link tag and its parents are given the … more

I get the error message … Error: jQuery(“#dc_jqaccordion_widget-3-item .menu”).dcAccordion is not a function …

This error will occur if either the jQuery plugin file for the accordion menu has not loaded or if you have the jQuery javascript library loading again in the header after the plugin files have been listed.

Check your source code and see if there is more than one copy of jQuery. If there is, remove the additional jquery library … more

The menu appears on the page but does not work

There are several reasons why the menu may fail to load properly:

1. The necessary code is missing from the page footer. The plugin adds the required jQuery code to your template footer. Make sure that your template files contain the wp_footer() function – this is usually located just before the closing body tag in your theme’s footer file.

2. … more

Removing the default margin & bullets from WordPress twenty ten theme

To remove the margin and bullet points that appear on the accordion menu when using the WordPress default Twenty Ten theme add the following CSS rule to your theme’s style.css file:

This will change the accordion menu default styling from this:

To this:


Custom skin file gets overwritten every time the plugin updates

Whenever WordPress updates any plugin file ALL files in the plugin directory are first deleted and the updated files reinstalled.

This means that any modifications you may have done to the plugin files or if you have created your own custom skin in the plugin’s skin folder, will all be deleted.

Any changes you make to the plugins CSS should … more

How to disable the accordion effect for specific menu items

To turn off individual menu items and remove the accordion effect you can use the “Class Disable” field in the widget control panel.

Widget Control Panel

Enter a class name that you will use to identify the menu items – e.g. menu-disable – note class names must not contain spaces and only use special characters “-” or “_”.


WordPress Menu


  • Is this menu one you would recommend for use with mobile devices? I’m considering using it on a mobile dedicated website?

    • Hi,

      Unfortunately I dont have much experience on that one sorry