Custom CSS for each menu item in WordPress

If you’ve been following WordPress development for any length of time, you’ll have seen some amazing WordPress themes which have a separate icon or color for each of the main menu buttons. Here’s one method for assigning custom classes to each button in a category based menu. This method can be adjusted to use pages instead, or even to create different kinds of styling for custom post type layouts in a category view.

<div id="fp-list">
  <ul><?php $categories = get_categories(array('hide_empty' => 0, 'orderby' => 'name', 'order' => 'desc' ));
	foreach ($categories as $category) {
            echo '<li class="' . $category->slug . '"><a href="' . home_url() . '/category/' . $category->slug . '"><span class="toptabs">' . $category->name . '</span></a></li>';
 	}?>
  </ul>
</div>

By assigning the category slug as a class (or ID, if you’re a CSS purist), we can easily add custom formatting to each of the menu items by writing the appropriate supporting CSS for each slug class.