Customizing the markup of navigation?

  • Hi,

    I’m new to wordpress. I’m creating my own theme with underscores. I’m pretty much done with everything on the theme. But having problem with navigation. In my design I have several nav menus and each one needs different kind of markup. But basically I’m stuck with the main navigation menu. I need to edit the markup of the main navigation menu. Please let me know what is the correct way to do that.

    Please note that, I have to do it within my theme. I have searched for some information that says I have to edit some php from wp-include. But I need a way to do it within only my theme files.

    Thanks in advance!

Viewing 4 replies - 1 through 4 (of 4 total)

  • What kind of markup do you need on the main navigation menu? How are you calling the main navigation menu?

    Thread Starter Sohan Zaman

    (@sohan5005)

    Thanks for the reply this fast! ??

    I’m calling menu by:

    <nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle" aria-controls="menu" aria-expanded="false"><?php _e( 'Primary Menu', 'suparnova' ); ?></button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
		</nav>

    in header.php
    it’s the default generated from underscores. where my menu name is ‘suparnova’.

    It’s getting this kind of markup:

    <div class="menu">
      <ul class="...">
           <li><a href="">...........</a></li>
      </ul>
</div>

    But what I need is add an other div outside the menu wraper and use that as my container. I also need some other elements as site logo. And the main thing that I need is, i need to add font-awesome icons in the menu links. so the markup should like this:

    <div class="container">
     <div class="my-logo">
        ...
     </div>
     <div class="menu">
           <ul>
               <li><a href="#"><i class="..."></i> Menu text</a></li>
           </ul>
     </div>
</div>

    Is this kind of change possible inside the theme files?

    Thanks

    You could simply add the outer HTML before the call to wp_nav_menu():

    <div class="container">
  <div class="logo">...</div>
  <?php wp_nav_menu(); ?>
</div><!-- .container -->

    and use some CSS to position the logo and menu.

    As for your second question, check out the link_before and link_after properties of wp_nav_menu():

    wp_nav_menu( 'theme_location' => 'primary', 'link_before' => '<i class="foo">', 'link_after' => '</i>' );

    Thread Starter Sohan Zaman

    (@sohan5005)

    Thanks!! that’s really helpful. I had figured out the container. I already added html codes outside and it’s working well.

    The link_before and link_after will be really helpful i think. It’s night here. I will try that tomorrow.

    Thanks again for the help Stephen.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Customizing the markup of navigation?’ is closed to new replies.