Login

Login
  • Register
  • VectorDesign blog

    Testing Automation and general Tech Geek stuff

    WordPress Walker

    Posted in wordpress on 16 August 2014 by vectordesign

    Walker defines how the list of the menu will be rendered exmaple if you want to change an <li>  to what you want that element to be

    In order to change the wp default li you need to

    • create a custum file for the menu template
    • copy the content of Walker_Nav_Menu class fromnav_menu_template.php in wp-includes

     

    Create a walker class in your functions.php

    class Walker_header_Main_VD_Example_Menu extends Walker {
    
        // Tell Walker where to inherit it's parent and id values
        var $db_fields = array(
            'parent' => 'menu_item_parent',
            'id'     => 'db_id'
        );
    
        function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $output .= sprintf( "\n <div class=\"button small-12 columns\"><a href='%s'%s>%s</a> </div>\n",
                $item->url,
                ( $item->object_id === get_the_ID() ) ? ' class="current"' : '',
                $item->title
            );
        }
    
    }

    And add it where ever you need it in your template file

    <?php wp_nav_menu( array( 'theme_location' => 'template-menu-name' , 'walker'  => new Walker_header_Main_VD_Example_Menu() ) ); ?>

    Leave a Reply