The #WordPress menu system is great for most menus, but sometimes you need something that is just a little different. For example, this menu has checkboxes:
Using checkboxes in a menu presents two problems:
- How can we set up something that can be easily maintained?
- How can we get the checkboxes to display in the menu?
The answer to question 1 is relatively simple – just use the standard WordPress menu. Below you can see the menu set up with the Retail Page followed by the categories – the same as in the actual menu. This way, any new categories can be added to the menu ing the WordPress dashboard.
The answer to question 2 is to use a custom Walker class to change the li tags into checkboxes. Wptuts+ has a good tutorial on how to use the Walker class so I will just delve into the specifics of this particular implementation.
The basic idea is to replace the anchor tags with input tags. If you have been following the Wptuts+ tutorial, you know that the start_el function is where the anchor tags get generated so that is where we need to place the code. Since WordPress generates classes that lets us know we are on a category item, we can use that for the code:
//this gets the the value we use for the input tag so we can assign a value if( 'category' == $item->object ){ $category = get_category( $item->object_id ); $inputClass = 'category-' . $category->slug; } // if (in_array('menu-item-object-category', $classes)) { $item_output = $description . $args->before . '<input type="checkbox" value ="'.$inputClass.'"/>' . $args->link_before . $title . $args->link_after . $args->after; } else { $item_output = $args->before . "<a $attributes>" . $args->link_before . $title . '</a>' . $args->link_after . $args->after; } |
You can see the menu in action at http://wsjunction.org/eat-drink/. If any one is interested in the complete code and full functionality of how the menu works, please contact me.
-0 Comments