Is possible turn a tag to WordPress menu?

  • Hi

    First I try two of the tutorial below, it doesn’t work for me. I also check the WordPress documentation.

    I try to convert my HTML design to WordPress theme. find out WordPress use ul or li element for the menu, but in design, I use < a> element for the navbar, I have been trying this for 2 days. they do not convert correctly. Thinking about changing them to ul or li, but my CSS stylesheet will need big updated it. Does anyone have any solution? please?

    my navbar code:

    <div class="div-block-18">
<div data-collapse="medium" data-animation="default" data-duration="400" class="navbar w-nav">
  <div class="container w-container">
    <a href="index.html" class="w-nav-brand">
      <div>
	  <img src="<?php bloginfo(stylesheet_directory)?>/assets/images/your-logo300.png" class="image-5">
	  </div>
    </a>
    <nav role="navigation" class="nav-menu w-nav-menu">
     <a href="index.html" class="nav-link w-nav-link"><strong class="bold-text">HOME</strong></a>
      <a href="about.html" class="nav-link-2 w-nav-link"><strong class="bold-text-2">ABOUT</strong></a>
      <a href="blog.html" class="nav-link-3 w-nav-link"><strong class="bold-text-3">BLOG</strong></a>
      <a href="shop.html" class="nav-link-3 w-nav-link"><strong class="bold-text-4">SHOP</strong></a>
      <a href="resource.html" class="nav-link-3 w-nav-link"><strong class="bold-text-5">RESOURCE</strong></a>
      <a href="contact.html" class="nav-link-4 w-nav-link"><strong class="bold-text-6">CONTACT</strong></a>
     </nav>
     <div class="menu-button w-nav-button">
      <div class="w-icon-nav-menu"></div>
    </div>
  </div>
</div>

    Here’s the first one I try also:

    
<?php

	 wp_nav_menu( array(
		 'theme_location' => 'primary',
		 'container' => 'nav',
		 'container_class' => 'div-block-18',
		 'menu_class' => 'nav-link w-nav-link'
	   ));

	?>

    Here’s the second one I try:

    <?php
$defaults = array(
    'theme_location'  => 'top_menu',
    'menu'            => '',
    'container'       => '',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'w-nav-menu main-nav',
    'menu_id'         => '',
    'echo'            => false,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<nav id="%1$s" class="%2$s">%3$s</nav>',
    'depth'           => 0,
    'walker'          => ''
);

$find = array('><a', '<li');
$replace = array('', '<a');

echo str_replace($find, $replace, wp_nav_menu( $defaults ));
?>

    Thank you guys so much!

    • This topic was modified 6 years, 10 months ago by madebymt.
    • This topic was modified 6 years, 10 months ago by madebymt.
    • This topic was modified 6 years, 10 months ago by madebymt.
    • This topic was modified 6 years, 10 months ago by madebymt.
    • This topic was modified 6 years, 10 months ago by Jan Dembowski.
    • This topic was modified 6 years, 10 months ago by Jan Dembowski.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to use the list item (<li> and <ul>) elements. This is not a WordPress concept, but a good practice of HTML in the real world. If you don’t use list item elements then your website will be difficult to read by search engines and assistive technologies.

    What is the problem you really face? Is it that list tags have bullet styles and appear in a linear format? These are CSS problems that can be resolved without touching the HTML of the page nor negatively affecting your users.

    • This reply was modified 6 years, 10 months ago by Andrew Nevins.
    Moderator bcworkz

    (@bcworkz)

    It seems to me you would mainly need to add your classes to the anchor tags generated by wp_nav_menu(). The fact that ul and li elements are added will require some CSS adjustment, but it shouldn’t need “big updated”. Mainly removing any effect the added elements do to spacing. If your CSS selectors involve immediate child references or similar, the added hierarchies would need to be addressed as well.

    The wp_nav_menu() function offers several filters that allow you to add anchor tag classes. Look through the source code and decide which filters would best work for you. ‘wp_nav_menu_items’ filter might be a good choice. If you are not familiar with using filter hooks, it’s something you should learn about. A lot of customizing WP involves filter hooks and the similar action hooks. A good hooks overview is available in the Plugin Handbook.

    If you need more control over the generated HTML than what can be easily accomplished with filter hooks, you can utilize a custom walker class object. This would give you total control over the final HTML. However, custom walker classes are an advanced coding technique and are not usable by just anyone. But if you have any kind of coding aptitude, it’s something you can figure out eventually.

    With a custom walker, you could even generate HTML that does not include ul and li tags. But for the reasons Andrew has pointed out, doing so would not be recommended. You are better off adjusting your CSS.

    While we’re on the subject of good practice, it’s less than ideal to have strong tags in your menu HTML. That sort of styling should be part of your CSS. Your site will be easier to maintain if font weights are managed with CSS and not HTML. It’s not a big deal, but you shouldn’t spend time adding strong tags to the wp_nav_menu() content. Use CSS for that. If need be, you could add “bold-text” classes to the anchor tags, but it shouldn’t be necessary. Just style .w-nav-link as being font weight bold.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Is possible turn a tag to WordPress menu?’ is closed to new replies.