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)
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 ♦ Commented Feb 15, 2019 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 Commented Feb 15, 2019 at 15:47
- please edit your question so we can see, what you have tried, not only what you want.. – honk31 Commented Feb 15, 2019 at 17:28
- Just updated my question. – Ariful Islam Commented Feb 15, 2019 at 17:32
3 Answers
Reset to default 1You 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();
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>';
}
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);