Customizing the a tag with Semantic UI

by

I’d like to use Semantic UI to aid development of a WordPress template for a project.

For a submenu I intend to use one of the Secondary sub menus found just at the bottom of the Pointing section.

The problem I’m facing is that WP doesn’t seem to allow customization of the tag.

In Semantic UIs example, this is the code they use to generate a secondary sub menu, how would I implement this with WP?

<div class="ui secondary vertical pointing menu">
  <a class="active item">
    <i class="home icon"></i> Home
  </a>
  <a class="item">
    <i class="mail icon"></i> Messages
  </a>
  <a class="item">
    <i class="user icon"></i> Friends
  </a>
</div>

So far I’ve implemented a menu by using the following code:

<div class="ui secondary vertical pointing menu">
    <a class="item">
      <?php wp_nav_menu( array( 'theme_location' => 'about-menu' ) ); ?>
    </a>                        
</div>

Though by doing this, WP displays the menu without any styling underneath the rest of the menu items. Almost as though they’re being pushed out.

Can anyone help me with this?

2 Answers
2

You are definitely on the right track, but wp_nav_menu will output a menu with a lot of containers and classnames; to keep it semantic in the terms of Semantic UI, you’ll be in good hands if you build the structure yourself.

Get the name of the registered menu in the menu manager. Check register_nav_menu in your functions.php if you’re unsure. This is for example what it looks like in the Twenty Thirteen-Theme:

register_nav_menu( 'primary', __( 'Navigation Menu', 'twentythirteen' ) );

(In your case it is probably about-menu.)

You can use the snippet below to generate your custom menu via the menu name (we’ll be able to get all the details (e.g. location, id,…) of the registered menu automatically)

<?php

    $menu_name="primary"; // this is the registered menu name

    if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
        $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
        $menu_items = wp_get_nav_menu_items($menu->term_id);
        echo '<div class="ui secondary vertical pointing menu">';
            foreach ( (array) $menu_items as $key => $menu_item ) :
                $title = $menu_item->title;
                $class = $menu_item->classes; // get array with class names
                if ( get_the_ID() == $menu_item->object_id ) { // check for current page
                    echo '<a class="item active">';
                } else {
                    echo '<a class="item">';
                }
                    echo '<i class="item ' . implode(' ', $class) . '"></i>' . $title;
                echo '</a>';
            endforeach;
        echo '</div>';
    else :
        echo '<div class="ui error message"><p>Menu "' . $menu_name . '" not defined.</p></div>';
    endif;

?>

Take a closer look at the code above. We’re looping through the menu items of the defined menu. Make sure to add classnames (for the icons) within the menu manager. Inserting class names (separate multiple class names with a space) is optional and hidden by default; you can activate the input field via the Screen Options at the top.

Update: You can also output the menu with links to the pages: 

<?php

  $menu_name="primary"; // this is the registered menu name

  if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    echo '<div class="ui vertical menu">';
      foreach ( (array) $menu_items as $key => $menu_item ) :
        $title = $menu_item->title;
        $url = $menu_item->url;
        $class = $menu_item->classes; // get array with class names
        if ( get_the_ID() == $menu_item->object_id ) { // check for current page
          echo '<a class="item active" href="' . $url . '">';
        } else {
          echo '<a class="item" href="' . $url . '">';
        }
          echo '<i class="item ' . implode(' ', $class) . '"></i>' . $title;
        echo '</a>';
      endforeach;
    echo '</div>';
  else :
    echo '<div class="ui error message"><p>Menu "' . $menu_name . '" not defined.</p></div>';
  endif;

?>

Leave a Comment