Simple guide to creating your own custom wordpress Walker Menu, insert to functions.php

wordpress-custom-walker-menu.php

<?php
/*
=====================
custom menu
=====================
<ul>
    <1><3></4></2>
    <1>
        <3></4>
        <5>
            <1></2>
        </6>
    </2>
</ul>
ex :
<ul>
    <li><a></a></li>
    <li>
        <a>link apapun</a>
        <ul>
            <li><a></a></li>
        </ul>
    </li>
</ul>
*/
class CSS_Menu_Walker extends Walker_Nav_Menu {

    var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
    
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n"."[5]"."$indent\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "[6]$indent\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

        global $wp_query;
        $indent         = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names    = $value = '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        /* Add active class */
        if(in_array('current-menu-item', $classes)) {
            $classes[]= 'active';
            unset($classes['current-menu-item']);
        }

        /* Check for children */
        $children = get_posts(array(
            'post_type' => 'nav_menu_item',
            'nopaging' => true,
            'numberposts' => 1,
            'meta_key' => '_menu_item_menu_item_parent',
            'meta_value' => $item->ID
        ));
        if (!empty($children)) {
            $classes[] = 'has-sub';//beri class untuk setiap child element
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= "[1]".$indent . '';

        $attributes  = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '[3]';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '[4]';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= "[2]\n";
    }
}
?>