3

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?

3

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;

?>
0

If you want your Wordpress menu with sub menus in Semantic UI structure, you can use the following code.

Put the code to your template file, where the menu should be displayed.

You just need to adjust your Menu ID (if you hover the "delete menu" link in wordpress, it will be displayed in the URL).

You can also adapt the code for other Semantic UI menus.

<?php
$menuID = 'your menu ID';
$primaryNav = wp_get_nav_menu_items($menuID);

<div class="ui secondary vertical menu">
            <?php
            $count = 0;
            $submenu = false;
            foreach( $primaryNav as $item ) {
                $link = $item->url;
                $title = $item->title;

                // item does not have a parent
                if ( !$item->menu_item_parent ) {
                    $parent_id = $item->ID; ?>
                <?php } ?>

                <?php // item is parent of next element ?>
                <?php if ( $parent_id == $item->menu_item_parent ) { ?>

                    <?php if ( !$submenu ) {
                            $submenu = true; ?>
                        <div class="ui dropdown item"><i class="dropdown icon"></i><?php echo get_the_title($parent_id); ?><div class="menu">
                    <?php } ?>

                    <a href="<?php echo $link; ?>" class="item"><?php echo $title; ?></a>

                    <?php if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) { ?>
                        </div> <!-- menu --> </div> <!-- item -->
                        <?php $submenu = false;
                    } ?>

                <?php }
                else { // item is not parent of next element ?>
                    <?php if ( !$primaryNav[ $count + 1 ]->menu_item_parent ) { ?>
                        <a href="<?php echo $link; ?>" class="item"><?php echo $title; ?></a> 
                    <?php } ?>

                <?php } ?>

                <?php $count++; 
            } ?>
        </div> <!-- menu -->
?>

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.