How To Create A Wordpress Menu From Existing HTML Template Code? - php

Question

So I have been using a HTML template for a website, and added Wordpress functionality. However, my navigation within Header.php just uses get_permalink for page links. I want to keep the same navigation menu with all it's functionality, but allow pages to be added within the dashboard.
The current code is as follows:
<!-- Overlay Navigation Menu -->
<div class="overlay-navigation-wrapper enter-bottom" data-no-scrollbar data-animation="slide-in">
<div class="overlay-navigation-scroll-pane">
<div class="overlay-navigation-inner">
<div class="v-align-middle">
<div class="overlay-navigation-header row collapse full-width">
<div class="column width-12">
<div class="navigation-hide overlay-nav-hide">
<span class="icon-cancel"></span>
</div>
</div>
</div>
<div class="row collapse full-width">
<div class="column width-12">
<nav class="overlay-navigation nav-block">
<h4 class="menu-title">Website Title</h4>
<ul>
<li> Home </li>
<li> About </li>
<li> Treatments & Offers </li>
<li> Store </li>
<li> Contact </li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Overlay Navigation Menu End -->
<div class="wrapper reveal-side-navigation">
<div class="wrapper-inner">
<!-- Header -->
<header class="header header-bottom header-fixed-on-mobile header-transparent" data-sticky-threshold="window-height" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div class="logo-inner"> <img src="" alt="Sartre Logo" /> <img src="" alt="Sartre Logo" /> </div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li>
<!-- Button -->
<div class="v-align-middle"> Book Now </span> </div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<span class="icon-menu"></span>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li> Home </li>
<li> About </li>
<li> Treatments & Offers </li>
<li> Store </li>
<li> Contact </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
<!-- MAIN CONTENT GOES HERE-->
</div>
</div>
The code is quite bloated, but allows for the mobile responsiveness and other Javascript effects that come with the theme.
What's the best way to approach this? Thanks

Answer 1

Step 1: Register a navigation menu in your functions.php
<?php
function my_wp_nav_menu(){
register_nav_menus( array(
'primary' => 'Main Navigation'
) );
}
add_action( 'after_setup_theme', 'my_wp_nav_menu' );
Step 2: Go into Appearance->Menus in your Dashboard, add your navigation items, and select Main Navigation as the menu.
Step 3: Replace the navigation's uls in your HTML with:
<?php
wp_nav_menu( array(
'container' => '',
'theme_location' => 'primary'
) );
This will replace your list with a WordPress menu that you can control in WordPress. By default, wp_nav_menu wraps the menu list with a div which is why we set 'container' => '' so all you get is the menu list markup.