Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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;

?>
share|improve this answer
    
Thanks for your help with this, the problem now is that the menu items don't link anywhere, and it looks like the menu items have taken up far too many classes - the spacing is messed up. I appreciate your help! –  Josh Feb 3 at 13:44
    
@Josh Hey, I've updated my answer! The menu items have links now, so I hope this will fit :) –  Sven Feb 3 at 22:36
1  
Hero! Thanks so much for your help! –  Josh Feb 4 at 10:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.