Accordion Image Menu V 3.1 – Less Code More Flexibility

This is a new release of the Accordion Image Menu Worpress plugin. The plugin allows to use the feature images or the images uploaded to the posts and pages galleries as background for the menu items.

On the previews versions the accordion was based on mootools but its causes a lot of interaction with others popular plugins which use jquery. So, I decided to implement a jQuery Plugin that allows the same functionality and avoid including another javascript framework.

Special Features

  • Allows to combine pages and categories and apply order to them
  • Can be integrated with the wordpress > 3.0 menus interface
  • The plugin uses the medium size image attached to post and pages
  • The menu uses the top image from the posts/pages gallery
  • You can use it to list recent posts
  • Multiple transition effects included (Elastic, Bounce, Sine, Pow, Quart, Back, Circ)
  • You can include ‘the title’ of the target pages
  • Allows to include multiple menus on your blog
  • The menu can be based on posts/pages ids
  • Compatible with: Chrome, Safari, Firefox and IE 7, 8, 9

The shortcode

As the plugin is based on WordPress Shortcodes you can include some attributes in order to customize the menu and overwrite the Default Settings saved in the Plugin Option Page.

Here you have the Shortcode attributes list:

    position = 'vertical'  Orientation of the menu (vertical/horizontal)
    type = post' Type of menu list (post, page, menu)
    cat = ' ' List post under this categories if type = post
    number = 5 Number of post
    name ='' Name of wordpress menu (under Appearance)
    effect = 'swing' Animation effect based on:jQuery UI Effects
    closed_d = 100 Items dimension when the menu is not activated
    opened_d = 200 Items dimension when mouseopen
    width = '' Width of the menu if it's vertical
    height = '' Height of the menu if it's horizontal
    duration = 300 Transition timing
    border = 1 Border between items 
    border_color = '#000000'  Border color
    open = '' Item opened by default  (0,1,2,3...randomly)
    id = '' Post or Pages Ids separated by comma


Using the shortcode with these attributes: position, height, open


[a_image_menu position="horizontal" height="200" open=0]

PHP Code
<?php echo do_shortcode('[a_image_menu position="horizontal" height="200" open=0]') ?>

Using the shortcode with these attributes: position, id, open, effect, closed_d, border


[a_image_menu position="vertical" id="479,333,303,135,118,428,328" open="randomly" effect="easeOutBack" closed_d=80 border=3]

PHP Code
<?php echo do_shortcode('[a_image_menu position="vertical" id="479,333,303,135,118,428,328" open="randomly" effect="easeOutBack" closed_d=80 border=3]') ?>

Frequently Asked Questions

1- Which images uses the menu?

– The menu use the last image uploaded to the post/page gallery but you can move to the top the image that you want to use.

2- How to insert the Accordion Image Menu?

– The plugin includes a Widget that can be added to your sidebars.
– The shortcode can be used into the content of your posts or pages using:


or in your theme files using php code:

<?php echo do_shortcode('[a_image_menu]'); ?>

3- How many accordion can be used in a single page?

There is not teorical limits

4- The menu allows extenal links and custom images?

No yet, the menu allows to includes pages and post from your blog. If you use WordPress Menus it has to be based on pages, post and categories.



Your are invited to include your comments and suggestions in the comment box and your support for future improvements by clicking on the donate button.

116 thoughts on “Accordion Image Menu V 3.1 – Less Code More Flexibility”

  1. Hey sorry for my bad englisch but i try my best.
    Accordion Image Menu are a very nice Plugin and i used it on my ne wordpress webiste. But i want to use the plug in more than one times.

    I want to make 3 ore 4 different Accordion Image Menu.
    Is these possible ?

    Thank you very much for your Answer and your nice Work.

  2. Ok I am BRAND new to WordPress. I’m an old HTML junkie trying to leap into the brave new world and I’m finding I hate it. That aside, all I wanted, ALL I WANTED was to use pictures as my menu instead of just text. Of course that appears to be impossible and I have yet to find a theme that does it. So this nifty plugin was going to be my godsend and I honestly was pretty happy about using it. Well… It appears to have loaded fine, and the menu texts pop up but it is just a black bar. The site says: “The menu uses the top image from the posts/pages gallery”
    But i don’t see this “gallery” anywhere. I’ve been through every section of the wordpress editor POS and I can’t find this anywhere. Where are these magical pictures supposed to go?

    i miss plain old html but I’m trying here and i just want to throw my computer.

    Please help.

  3. I will be using your plugin and it is almost exactly what I need. (I’ve placed it in the theme)
    I will be using it as a kind of navigation for an image archive website. And it works as I want. There is one detail that would be great if it could be achieved.
    Is it possible to have the image of the currently open post be expanded in the accordion?
    So when you are at the home page the image from the newest post is expanded in the accordion but if you click on some other image, and it opens a corresponding post, it would be great that that image in the accordion remains expanded while viewing that post. Something like this;
    Thank you in advance … the plugin is great anyhow … but this would make it more intuitive to navigate trough a large archive. And I am not that familiar with js, jquerry.

  4. this menu always breaks my other menus like the built in one in ‘mixture’ theme and the jquery slick menu for wordpress. Just an fyi.

  5. hi,
    i would like to achieve is menu with more columns and with more rows. so not only a vertical or a horizontal one but the combination of them. like a grid. for example: have a menu with 6 images in 2 rows and in 3 columns.

    other solution would be if i could use 2 pcs of Accordion Image Menu.


  6. Hello,
    I am having trouble adding a second menu using the short code attributes. The menu is not listing the menu items in the order hey are listed in the id property. How do ii set the order?

    Thanks in advance.

Leave a Reply

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