0

I want to convert my navigation menu into WordPress. tried with lots of snippets. But something I am missing.

Here is my menu example html:

<div class="menu"> <a class="some-class" href="#">menu1</a> <a class="some-class" href="#">menu2</a> <a class="some-class" href="#">menu3</a> <a class="some-class is-active" href="/sell">Menu4</a> </div> I have tried with this method:

$menuLocations = get_nav_menu_locations(); $menuID = $menuLocations['primary']; $primaryNav = wp_get_nav_menu_items($menuID); foreach ( $primaryNav as $navItem ) { echo '<a class="some-class" href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a>'; } I am getting good output. only problem with active menu item.

I am trying to add class is-active for the active navigation menu. Thanks. (updated question)

  • And what exactly have you tried? – fuxia Feb 15 at 15:32
  • If you're wanting to use WordPress Menus but output them with your own custom HTML structure and CSS classes, you most likely need to look into Custom Nav Walkers. – WebElaine Feb 15 at 15:47
  • please edit your question so we can see, what you have tried, not only what you want.. – honk31 Feb 15 at 17:28
  • Just updated my question. – Ariful Islam Feb 15 at 17:32
1

You don't need to write a custom walker to achieve this. You can modify the output of the wp_nav_menu() function and hook into the appropriate default nav menu filter to modify the output of the individual menu items. E.g. (assuming your theme menu location is called primary)

Put this in your functions.php file

/**
 * Output Custom Menu
 * 
 * Call this function within your template
 * files wherever you want to output your
 * custom menu.
 * 
 */
function custom_theme_menu() {
    $menu = wp_nav_menu( array(
    'theme_location'  => 'primary',
    'container_class' => 'menu',
    'items_wrap'      => '%3$s', // needed to remove the <ul> container tags
    'fallback_cb'     => false,
    'echo'            => false
    ) );

    // Strip out the <li> tags from the output.
    echo strip_tags( $menu,'<a>, <div>' );
}


/**
 * Add Nav Menu Item Link Classes
 * 
 * Detects if we are rendering the custom menu
 * and adds the appropriate classnames.
 * 
 */
function custom_theme_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
    // For all other menus return the defaults.
    if ( $args->theme_location !== 'primary' ) {
        return $atts;
    }

    // Add the link classes.
    $class_names = array( 'some-class' );

    if ( $item->current ) {
        $class_names[] = 'is-active';
    }

    $atts['class'] = join( ' ', $class_names );
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'custom_theme_nav_menu_link_attributes', 10, 4 );

Then in your template files just call the following function wherever you want to output the menu:

custom_theme_menu();
  • Works! That's the result I have expected. Thank a lot, @Sunny Johal. – Ariful Islam Feb 16 at 15:11
  • No problem, could you accept this answer as the chosen solution please. – Sunny Johal Feb 16 at 15:14
  • yes, I am using your solution for my project. – Ariful Islam Feb 16 at 15:24
  • Just marked as accepted. – Ariful Islam Feb 16 at 15:30
0

You need the current object id and compare it to the menu item id, I think. Maybe something like this,

$menuLocations = get_nav_menu_locations(); 
$menuID = $menuLocations['primary']; 
$primaryNav = wp_get_nav_menu_items($menuID);
$current_object_id = get_queried_object_id();
foreach ( $primaryNav as $navItem ) {
    // can't remember if this is the right way to get the page id or if there's a better way
    $menu_item_object_id = get_post_meta( $navItem, '_menu_item_object_id', true );
    $item_classes = ( $menu_item_object_id === $current_object_id ) ? 'some-class is-active': 'some-class';
    echo '<a class="' . $item_classes . '" href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a>';
}
0

Try with this one I think it's the simplest way to do what you want if you just want to add your desire classes. but if you want also markup as well better to follow @Sunny Johal answer.

/**
 * Filters the CSS class(es) applied to a menu item's list item element.
 *
 * @param array    $classes The CSS classes that are applied to the menu item's `<li>` element.
 * @param WP_Post  $item    The current menu item.
 * @param stdClass $args    An object of wp_nav_menu() arguments.
 * @param int      $depth   Depth of menu item. Used for padding.
 */
function wpse64458_nav_class ($classes, $item, $args) {
    // Only affect the menu placed in the 'primary' wp_nav_bar() theme location
    // So change with your nav menu id
    if ( 'primary' === $args->theme_location ) {
        $classes[] = 'some-class';
        if (in_array('current-menu-item', $classes) ){
            $classes[] = 'is-active';
        }
    }
    return $classes;
}
add_filter('nav_menu_css_class' , 'wpse64458_nav_class' , 10 , 3);

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.