Change HTML structure for custom menu in sidebar

by

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:

Custom menu

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?

2 Answers
2

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.

Leave a Comment