Convert HTML menu to WordPress

Question

Convert HTML menu to WordPress

Navigation

#1 by (3 votes)

3

For the first time I'm working on converting an HTML template to WordPress. I have some difficulties and the one that is bothering me the most is the following: I have an HTML menu and would like to convert it to WordPress, keeping the dropdown, etc.

The code is in HTML, that is, the pages are not those, the pages should be drawn from the WordPress itself defined by the panel menu option:

<div class="row">

    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="pm-header-logo-container">
            <a href="index.html"><img src="img/energy-fitness.png" class="img-responsive pm-header-logo" alt="Energy Fitness Studio"></a> 
        </div>
        <div class="pm-header-mobile-btn-container"></div>
    </div>

    <nav class="navbar-collapse collapse" id="pm-main-navigation">
        <ul class="sf-menu pm-nav">
            <li><a href="about-us.html">About us</a></li>
            <li>
                <a href="programs.html">Programs</a>
                <ul>
                    <li><a href="programs.html">Sport Specific</a></li>
                    <li><a href="programs.html">Nutritional Guidance</a></li>
                    <li><a href="programs.html">Personal training</a></li>
                    <li><a href="programs.html">Cardio training</a></li>
                    <li><a href="programs.html">Endurance training</a></li>
                </ul>
            </li>
            <li>
                <a href="classes.html">Classes</a>
                <ul>
                    <li>
                        <a href="classes.html">Kick-boxing</a>
                    </li>
                    <li><a href="classes.html">Yoga</a></li>
                    <li><a href="classes.html">Pilates</a></li>
                    <li><a href="classes.html">Zumba</a></li>
                    <li><a href="classes.html">Spin Master</a></li>
                </ul>
            </li>
            <li><a href="schedules.html">Schedules</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="store.html">Store</a></li>
            <li>
                <a href="news.html">News</a>
                <ul>
                    <li><a href="news.html">Blog Page</a></li>
                    <li><a href="news-post.html">Single Post</a></li>
                    <li>
                        <a href="news-post.html">Categories</a>
                        <ul>
                            <li><a href="news-post.html">Fitness</a></li>
                            <li><a href="news-post.html">Health</a></li>
                            <li><a href="news-post.html">Cardio</a></li>
                            <li><a href="news-post.html">Routines</a></li>
                        </ul>
                    </li>

                </ul>
            </li>
            <li><a href="events.html">Events</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

I've tried a lot, but I can not do it at all! The menu is already registered in functions.php and is called menu-principal . How would this menu stay in WordPress?

php html wordpress

asked by anonymous 11.02.2015 / 04:21

1 answer

Handle data returned from ajax request with JQuery Close Previous activity makes application faster?

score 3 · Accepted Answer

This menu should already be appearing in the Appearance Control Panel - > Menus. You need to now create the menu items and add it where you want in the theme using the wp_nav_menu($args)

In the example you gave the function would look like:

<?php 
$args = array(
           'menu' => 'Menu Topo',
           'container' => 'nav',
           'container_class' => 'navbar-collapse collapse',
           'container_id'    => 'pm-main-navigation',
           'menu_class'      => 'sf-menu pm-nav'
         );
// para lista completa de $args http://codex.wordpress.org/Function_Reference/wp_nav_menu
?>
<div class="row">

<div class="col-lg-4 col-md-4 col-sm-12">
    <div class="pm-header-logo-container">
        <a href="<?php get_home_url(); ?>">//supondo que index.html é a home
         <img src="img/energy-fitness.png" class="img-responsive pm-header-logo" alt="Energy Fitness Studio">
        </a> 
    </div>
    <div class="pm-header-mobile-btn-container"></div>
</div>
<?php wp_nav_menu($args); ?>