Change class names dynamically added to html elements by wordpress

Question

I'm new to wordpress theming and I am working on a theme that uses the newest Twitter Bootstrap.

Here is my question: WordPress adds class names to html elements based on whats going on ie:

<ul class="sub-menu">
<li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-36"><a href="#">Category</a></li>
</ul>

It added the class submenu to the ul, the id menu-item-36 and classes menu-item, menuitem-type-custom, etc to the first list item.

Twitter bootstrap already has styles defined for most of this. How do I change the names of the classes generated by wordpress?

I feel like it would be more of a pain and not good for updates to change these styles names in the bootstrap css file

Answer 1

I would be careful removing WordPress classes. Some plugins may depend on those classes.

You should be able to pretty easily add your own classes though, as explained in the WordPress Codex. You'd use the nav_menu_css_class filter to alter or add those classes. See the Codex for an example of doing so. I don't know what classes twitter bootstrap wants or needs so I can't really write code for it, and I imagine it would be quite a bit of code anyway to include all the different classes conditionally.