0

I've got my HTML Custom Nav set up and it works fine for static template. I want to convert it into wordpress navigation menu. I am totally new to wordpress and i want help to convert html menu to wordpress.

Here is the HTML code :

<div id="cs-header-menu">
                <div class="cs-container">
                    <!-- Main navigation -->
                    <div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
                    <nav id="cs-main-navigation" class="cs-clearfix">
                        <ul class="cs-main-navigation cs-clearfix">
                            <li class="current-menu-item"><a href="#"><span>Homepages</span></a>
                                <ul class="sub-menu">
                                    <li><a href="index-1.html">Homepage 1</a></li>
                                    <li><a href="index-2.html">Homepage 2</a></li>
                                    <li><a href="index-3.html">Homepage 3</a></li>
                                    <li><a href="index-4.html">Homepage 4</a></li>
                                </ul>
                            </li>
                            <li><a href="blog_layout_1.html">Lifestyle</a></li>
                            <li><a href="blog_layout_1.html">Beauty</a></li>
                            <li><a href="blog_layout_1.html">Travel</a></li>
                        </ul>
                    </nav>
                    <!-- Search icon show -->
                    <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
                    <!-- Search icon -->
                    <div id="cs-header-menu-search-form">
                        <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                        <form>
                            <input type="text" placeholder="Type and press enter...">
                        </form>
                    </div>
                </div>
            </div>
        </div>

I don't know how to use class and ids for div, nav, ul and li, and also for sub-menu items. Would anyone please help me with this. Thanks in advance.

0

Use this code bellow to dynamic you nav:

                        <?php
                            $args = array(
                            'theme_location'    => '',
                            'menu'              => 'Main',
                            'container'         => 'false',
                            'container_class'   => '',
                            'container_id'      => '',
                            'menu_class'        => 'cs-main-navigation cs-clearfix',
                            'menu_id'           => '',
                            'echo'              => true,
                            'fallback_cb'       => 'wp_page_menu',
                            'before'            => '',
                            'after'             => '',
                            'link_before'       => '',
                            'link_after'        => '',
                            'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                            'depth'             => 0,
                            //'walker'            => new my_custom_walker_nav_menu()
                            );

                        wp_nav_menu ($args);
                                  ?>
                    </nav>
                    <!-- Search icon show -->
                    <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
                    <!-- Search icon -->
                    <div id="cs-header-menu-search-form">
                        <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                        <form>
                            <input type="text" placeholder="Type and press enter...">
                        </form>
                    </div>
                </div>
            </div>
        </div>

For more details please see This ..... Hope it will solve your problem

4
  • Thank you for the help, and would you please guide me, what to do with function.php file.
    – J.Lee
    Jun 4 '17 at 8:59
  • Just check if this code is exist or not into you functions.php if not then copy and paste the code bellow into your functions.php : // This theme uses wp_nav_menu() in two locations. register_nav_menus( array( 'primary' => __( 'Primary', 'twentysixteen' ), ) ); Jun 4 '17 at 9:05
  • yes register_nav_menus is there, the code works well but class for ul is not working. and i have already set css for those classes, but the css is not working for menu, will you please let me know the problem?
    – J.Lee
    Jun 4 '17 at 9:11
  • It's working for me fine. I think you missed something. Would you please create menu again from your admin panel ? I think it will solve this problem. Jun 5 '17 at 9:29
0
<div id="cs-header-menu">
    <div class="cs-container">
        <!-- Main navigation -->
        <div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
            <nav id="cs-main-navigation" class="cs-clearfix">
                    <?php
                        wp_nav_menu( array(
                            'theme_location' => 'primary',
                            'container'     => '',
                            'menu_class'     => 'cs-main-navigation cs-clearfix"',
                         ) );
                    ?>
            </nav>
            <!-- Search icon show -->
            <div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
            <!-- Search icon -->
            <div id="cs-header-menu-search-form">
                <div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
                <form>
                    <input type="text" placeholder="Type and press enter...">
                </form>
            </div>
        </div>
    </div>
</div>

in wordpress we have a wp_nav_menu function that can get the navigation menu. For this you have to do register the menu i.e. register_nav_menus. The above code fetch the primary navigation you have registered like below on the function.php file.

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'twentysixteen' ),
) );

You can add/remove/arrange/ the menu page on the Apperance->Menus and assign that to the Primary Menu. Hope that helps!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.