Implementing a tricky wordpress menu (nested categories + thumbnails)

Question

I'm trying to make a layered wordpress menu, out of categories. Here's how it's going to look:

I have no clue how to develop this, can't do it with get_posts (not sortable by parent/children), or wp_list_categories (can't pull thumbnails). Also, I have to assign thumbnails to categories somehow.

Is there an easy way to implement something like this with wordpress?

Answer 1

although @roikles offers a way to do it, I don't think it is very flexible as you will have to go back in the code when you want to add a new category.

Another way of doing it can be to add the image of the subcategory as the description of the subcategory. To be able to do so, you will first need to allow XHTML in category descriptions. Add this line to your functions.php:

remove_filter( 'pre_term_description', 'wp_filter_kses' );

Then you can echo that description with wp_list_categories

Answer 2

You could create your menu in wp-admin>appearance>menus then make sure that custom CSS classes is checked in the Screen options drop down at the top of wp-admin.

All you would need to do then is give each menu item a css class and within your stylesheet define the menu image as a background image.

Answer 3

I'd look at using the custom Walker menu (outlined here). That way you can control what the output is and add dynamic CSS using the category slug. afterwards, you just output that specific menu in the location you want it.