Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • WordPress Navigation Management

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 110
    Comment on it

    Welcome to FindNerd.

    Today we are going to discuss the navigation management in word-press. We all knows WordPress provides text as well as functionality management using admin end. If you talk about the navigation then we can use the function wp_nav_menu for the same. Before this I would like to mention the registation of different types of menus. Please have a look.

    function register_menu_modes()
    {
        register_nav_menu('custom_menu',__('Custom Menu'));
    }
    add_action('init','register_menu_modes');

    You can put the above code in theme's function.php. It will create a theme location in menu section to categories the menus. You can use the wp_nav_menu function to display the menu on frontend. You can create a new menu under custom menu category. We are going to explain the different arguments of the function wp_nav_menu. Please have a look.

    It takes only one argument that is an array. Array contains different elements. Keep in mind array agruments are optional.   We are going to explain these terms one by one.

     

     

    Elements Description
    menu You need to pass the menu name with this argument
    menu_class Default class will be menu but you can change that change for ul element if required
    menu_id Default id is the menu slug and you can change it for ul element if required.
    container Default is div over ul element. You can pass either true or false. you can also write the particular element for container instead of div.
    container_class Default class is menu-{menu-slug}-container. You can put the class of your choice.
    container_id You can put the id to container if required.
    feedback_cb You can set the desired function to call if menu does not exist.  you can also set the false for no feedback. Default, function wp_page_menu will be fired.
    before Useful to put the text before the achor tag text
    after Useful to put the text after the achor tag text.
    link_before Useful to put the text before the achor tag.
    link_after Useful to put the text after the achor tag.
    echo Useful to return or print the menu. Default is true to print.
    depth Useful to set to the level of hierarchy Default is zero, means all.
    walker Custom walker class object to make the changes in menu.
    theme_location Registered theme locations can be applied to the menu.
    items_wrap Default ul is used. we can use numbered placeholders with printf format

     

    Above mentioned arguments have its own importance in navigation management. Read out the above table and analize the importance. In theme development we can face the problem in menu management. If we use the wp_nav_menu function then it will add their own class and id in navigation then we can manage the navigation with above elements. Please have a look.

    function mypoint()
    {
        // write your feedback
    }
    wp_nav_menu(array('menu'=>'header_one','container'=>'section','container_class'=>'main_nav','container_id'=>'main_nav_bar','feedback_cb'=>'mypoint','before'=>'<span>bar</span>'));

    In above code we are using the function in two different ways. In first one we are using the element menu and passed the menu name in it and in second we are using theme_location not the menu element to display so we can use the either way to print the menu. We are also using container to false which will remove the container above ul tag. Lets see the another options as well.
     

    function mypoint()
    {
        // write your feedback
    }
    wp_nav_menu(array('menu'=>'header_one','container'=>'section','container_class'=>'main_nav','container_id'=>'main_nav_bar','feedback_cb'=>'mypoint','before'=>'<span>bar</span>'));

    In above code we are using container element and set the container section  as well as set the class/id for it. You can see the feedback function as well. We are  also using before element to put the span tag before link text. Lets see another one.

     

    wp_nav_menu( array(
        'theme_location' => 'custom_menu',
        'items_wrap'     => '<nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><button aria-expanded="false" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle collapsed" type="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div><div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li id="item-id"><?php __( "Menu:", "textdomain" ); ?></li>%3$s</ul><ul class="nav navbar-nav navbar-right"><li><a href="' . admin_url() . '"><i aria-hidden="true" class="fa fa-lock"></i> Admin</a></li></ul></div></div></nav>',
        'fallback_cb'    => false
    ) );

    In above function we are using items_wrap element to customize the html strcture if required. There is walker class as well to make the change in html structure.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: