Custom wp_nav_menu in sidebar

1 Views

Hello I am using a wordpress theme that has a custom wp_nav_menu set up, however I would like to customise this further. But I am not sure how to go about it.

The theme has a function for the menu which is:

Read More
function litho_default_wp_menu()
{
    $args = array(
    'sort_column' => 'menu_order, post_title',
    'menu_class'  => 'menu',
    'include'     => '',
    'exclude'     => '',
    'echo'        => false,
    'show_home'   => false,
    'link_before' => '',
    'link_after'  => '' );

    $menu = wp_page_menu( $args );
    $menu = preg_replace('/^(<div class="menu"><ul>)/i','',$menu);
    $menu = preg_replace('/(</ul></div>)$/i','',$menu);

    echo '<ul class="simple-nav">'.$menu.'</ul>';
}

and this outputs a menu thats code looks like this: 

<div class="row" id="main_menu">
    <div class="columns six">
        <nav role="navigation">
            <ul class="simple-nav">
                <li class="page_item page-item-15 current_page_item"><a href="http://192.168.0.16:8888/">HOME</a></li>
                <li class="page_item page-item-38"><a href="http://192.168.0.16:8888/directing/">DIRECTING</a></li>
                <li class="page_item page-item-40"><a href="http://192.168.0.16:8888/compositing/">COMPOSITING</a></li>
            </ul>
        </nav>
    </div>
</div>

However, I am using Isotope for my theme which filters and sorts the page contents rather than going to another page. And would like to have my menu appear like this: 

<div class="row" id="main_menu">
    <div class="columns six">
        <nav role="navigation">
            <ul id="filters">
                <li><a href="#" class="all" data-filter="*">show all</a></li>
                <li><a href="#" class="directing" data-filter=".directing">directing</a></li>
                <li><a href="#" class="compositing" data-filter=".compositing">compositing</a></li>
            </ul>
        </nav>
    </div>
</div>

How would I go about this? I am reading up now about wp_nav_menu and how to customise it, but thought I would ask here too.

Thank you

Post Views: 1

Related posts

1 comment

  1. you can create a custom menu. Custom menus are editable using wordpress admin features so you can put them in whatever order you want, add external links or links to any posts/taxonomies you have in your wordpress. The documentation is here: https://codex.wordpress.org/Navigation_Menus

    However, it is as easy as adding the following code to a plugin or your functions.php file:

    function register_my_menus() {
 register_nav_menus(
   array(
    'custom-menu' => __('Custom Navigation Menu')
   )
 );
}
add_action( 'init', 'register_my_menus' );

    Next, you’ll have to create the menu in wordpress admin, navigation to: Appearance > Menus > create a new menu (at the top of page).

    Name the menu, and then below it, it will have checkboxes with the custom menu ids that are specified by your plugin/theme.. these are called theme locations. You can check the box next to your custom menu name — in this case, ‘custom-menu’.

    And then, you can do one of the following, either:

    1. Add a code to the template to print out the nav.

      wp_nav_menu( array( 'theme_location' => 'custom-menu' ) );

    2. Add a custom menu widget to the sidebar using the menu you created.

    Finally, you can style the widget using css.

    Hope that helps.

Comments are closed.