Change HTML structure for custom menu in sidebar

Question

I've been digging for documentation on how to change HTML output for the "Custom menu" which you place in optional widget. So its clear what I meen I have attached an image of the widget block here:

The output from this element is looking like this:

<div class="nav_menu-8 widget_nav_menu col-sm-4">
    <div class="menu-expo-container">
        <ul id="menu-expo" class="menu">
            <li><a href="http://xxxxx.com/test1">Test 1</a></li>
            <li><a href="http://xxxxx.com/test2">Test 2</a></li>
        </ul>
    </div>
</div>

It is this code structure I want to change so it fits my needs. How and where do I change it? Is there some code source I can reuse and and to my functions.php?

Answer 1

Working with raw data is always a bit dirty. The clean approach to do that would probably be to implement an own widget, that does exactly what you want it to do.

You can learn more about using the Widget API here: http://codex.wordpress.org/Widgets_API There are also some great examples there. Not that hard to understand.

To start off, you can basically copypaste the code of the default WP_Nav_Menu_Widget from default-widgets.php (lines 1298 to 1363) into you theme (I would suggest an own file, which you require from the functions.php) and start customizing it.

But to come back to Christophs answer: The Walker API is very powerful and learning it is defiantly worth it, if you want to do fancy stuff with navigations, comments, etc. pp.

Answer 2

To modify the menu, you mainly will use the menu walker class. See here http://codex.wordpress.org/Class_Reference/Walker for a basic example.

Menu walker is not very self explaining, so you might consider simply writing your own PHP code, directly querying the database, if you feel comfortable with PHP.

Another and the most simple methode might be to use the text widget and simply enter raw HTML there. It might not be the most elegant, nor the most flexible way to do so, but it's definately the fastest.

This mainly depends on your needs.