1

I am trying to convert my existing HTML Bootstrap menu into Wordpress theme menu. I already created menu called "Primary" in Wordpress, but can't get it in theme exactly the same as in HTML. My HTML Bootstrap code now is like this:

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="menu-1.html">Menu-1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="menu-2.html">Menu-2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="menu-3.html">Menu-3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="menu-4.html">Menu-4</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

Can someone please help with this?

  • Which theme are you using? – benny-ben Sep 6 '18 at 19:01
  • I made a website using HTML with Bootstrap, now I am turning it into Wordpress theme. But as a Wordpress template under it I used twentyseventeen. – istoby Sep 6 '18 at 19:03
  • Ok. Can you post how the menu looks now? – benny-ben Sep 6 '18 at 19:08
  • My posted HTML code gives this result: i.imgur.com/JRo1lBi.png – istoby Sep 6 '18 at 19:11
1

You have to edit the files in:

wordpress/wp-content/themes/twentyseventeen/template-parts/navigation/navigation-top.php

and then create a custom walker, try to take a look here.

Try in this way:

<?php
/**
 * Displays top navigation
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>
<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">

    <?php

  wp_nav_menu( array(
    'container'      => false,
    'menu_id'        => 'istoby-nav',
    'menu_class'     => 'navbar-nav ml-auto',
    'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'theme_location' => 'top',
    'depth'          => 5,
    'fallback_cb'    => false,
    'walker'         => new Bootstrap_Menu_Walker()
  ) );

  class Bootstrap_Menu_Walker extends Walker_Nav_Menu {

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

      if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
        $t = '';
        $n = '';
      } else {
        $t = "\t";
        $n = "\n";
      }
      $indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

      $classes = empty( $item->classes ) ? array() : (array) $item->classes;
      $classes[] = 'menu-item-' . $item->ID;

      // Filters the arguments for a single nav menu item
      $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

      // Filters the CSS class(es) applied to a menu item's list item element
      $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
      $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

      // Filters the ID applied to a menu item's list item element
      $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
      $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

      $output .= $indent . '<li' . $id . $class_names .'>';

      // it would be better to enter the class in Appearance -> Menus -> Screen Options -> CSS classes
      // $output .= $indent . '<li' . $id . $class_names .'>';
      $output .= $indent . '<li class="nav-item">';

      $atts = array();
      $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
      $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
      $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
      $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

      // Filters the HTML attributes applied to a menu item's anchor element
      $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

      $attributes = '';
      foreach ( $atts as $attr => $value ) {
        if ( ! empty( $value ) ) {
          $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
          $attributes .= ' ' . $attr . '="' . $value . '"';
        }
      }
      $title = apply_filters( 'the_title', $item->title, $item->ID );

      // Filters a menu item's title
      $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

      $item_output = $args->before;
      $item_output .= '<a class="nav-link js-scroll-trigger"'. $attributes .'>';
      $item_output .= $args->link_before . $title . $args->link_after;
      $item_output .= '</a>';
      $item_output .= $args->after;

      $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
  }

  ?>

    </div>
  </nav>
</div>

For more information look here on:

You can also edit the file in:

wordpress/wp-content/themes/twentyseventeen/header.php

Have you ever thought of starting from a blank theme like understrap?

  • How should I customize wp_nav_menu to get the menu I need? Regarding my posted HTML. – istoby Sep 6 '18 at 19:49
  • @istoby I have updated the answer tell me if it works. – benny-ben Sep 6 '18 at 21:06
  • It works! Thank you! The code is so long, but perhaps it should be like that :) – istoby Sep 7 '18 at 18:30
  • @istoby Perfect! Don't forget to accept the answer :) – benny-ben Sep 7 '18 at 18:36

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.