How to add Button in WordPress Navigation Menu

Sometimes we will need a button or a social icon on the navigation menu item. We can do it with CSS or use a plugin. But In this article, We will show you How to add buttons in WordPress Navigation Menu dynamically. It’s too easy to use.

We already show you How To Create A WordPress Navigation Menu With Bootstrap 5 and How to Add Image Icons With Navigation Menus in WordPress Without plugins. You can read it if you don’t know. You will get lots of articles online. But They have used CSS to add buttons in the navigation menu. We will show how to do it with PHP. 

Add Button in WordPress Navigation Menu:

Method 1: We are going to push a menu item in the navigation menu. We will use the wp_nav_menu() function. The function has arguments named items_wrap. We will use it to create buttons or social icons on the navigation menu.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
$button = '<li class="menu-item"><a class="btn btn-primary" href="#">Contact Us</a></li>';
        wp_nav_menu(array(
            'theme_location' => 'bootstrap-menu',
            'container' => false,
            'menu_class' => '',
            'fallback_cb' => '__return_false',
            'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s '.$button.'</ul>',
            'depth' => 2,
            'walker' => new bootstrap_5_wp_nav_menu_walker()
        ));
    ?>
 </div>

We place a variable on the items_wrap named button. This variable makes a menu item. If you make this kind of change, I am sure you already made the navigation menu button.

Method 2: If you think Method 1 is hard. Don’t worry about it. We will show you another method to add buttons and social icons to the navigation menu. We are going to use the wp_nav_menu_items filter. 

/**
* Add a custom link to the end of a specific menu that uses the wp_nav_menu() function
*/
function wpk_add_button_menu_link($items, $args){
if( $args->theme_location == 'primary' ){
    $items .= '<li class="menu-item"><a class="btn btn-primary" title="Contact Us" href="#">' . __( 'Contact Us' ) . '</a></li>';
}
return $items;
}
add_filter('wp_nav_menu_items', 'wpk_add_button_menu_link', 10, 2);

Don’t forget to replace it with your own menu location. I think you already understand how to add buttons or social icons. You can add anything using those methods like Search form, Social Icon, Button, etc. 

Conclusion: 

Those two methods are working. You can use one of them. If you are working as a WordPress theme developer or want to learn theme development this will help you. You can create options using theme options frameworks like redux.  Now I think you know How to Add a Button to WordPress Navigation Menu.

If you have a problem with this. We can help you. And If you like this article, please comment below.