How can I create custom opening/closing icons?

To be able to follow the steps of this tutorial,  you got to have coding knowledge! Regretfully we  can't provide support for custom coding. If you can't achieve what you are looking for or if you're not sure how to follow the instructions,  hire a developer.

There is a lot of useful theme settings on the backend, which could help you to reach your target design, but there are some limitations. For example adding custom opening and closing icons, custom CSS rules, extra CSS classes. The fastest way is to modify the core files, but if you upgrade your plugin, all of your file modifications will be lost in the plugin’s folder.

Custom images

  • Go to an edit Accordion Menu view
  • Add the following string after your current url: &nextendpath=1
  • Hit enter

Now if you open up the theme manager, you will see path hints, where you can add custom images. The paths will depend on your current WordPress theme and the current Accordion Menu theme. In my case I use Twentytwelve and default accordion menu theme. I got the following paths:

/home/roland/www/wordpress3.5/wp-content/themes/<strong>twentytwelve</strong>/accordionmenu/images/<strong>default</strong>/minus/
/home/roland/www/wordpress3.5/wp-content/themes/<strong>twentytwelve</strong>/accordionmenu/images/<strong>default</strong>/plus/

If you upload custom images into your folders, you will be able to choose them in the Accordion Menu configuration.

Custom CSS

We are using LESS in our plugin, so if you are not familiar with less, it could be unusual to edit the LESS file. It is just a “higher” level of the CSS technique.

We will need again a custom folder, where Accordion Menu will look for the custom file. In this case the path will be in your theme directory. Your path will contain the Accordion Menu theme name twice. For example: /default/default or /bold/bold or /elegant/elegant or /clean/clean.

/home/roland/www/wordpress3.5/wp-content/themes/<strong>twentytwelve</strong>/nextend-accordion-menu/themes/<strong>default</strong>/<strong>default</strong>/style.less

This file will not extend the current Accordion Menu’s theme LESS file, it will overwrite it, so I suggest you to copy the original style.less file from

/home/roland/www/wordpress3.5/wp-content/plugins/nextend-accordion-menu/themes/<strong>default</strong>/<strong>default</strong>/style.less


to your new location.

Now you can add your custom CSS selectors and codes into this file. You can read more on LESS