How to create dynamic header menus with custom css class in wordpress ?

 

1. Register Menu Locations

First, you need to register the menu locations in your theme. This is typically done in the functions.php file of your theme.

Add the following code to functions.php:

function menu_register()
{
    register_nav_menus(
        array(
            'primary-menu' => __('Primary Menu'),
            'footer-site-map-menu'=> __('Footer site map menu'),
            'footer-service-areas-menu'=> __('Footer service areas menu'),
        )
    );
}

add_action('init', 'menu_register');


// Add additinal class to li tag class
function add_additional_class_on_li($classes,$item,$args,$depth){
    if($depth==0 && isset($args->add_li_class)){
        $classes[]=$args->add_li_class;
    }
    if(isset($args->add_li_dropdown_class) && in_array('menu-item-has-children',$classes)){
        $classes[]=$args->add_li_dropdown_class;
    }
    if($depth==0 && in_array('current_page_item',$classes)){
        $classes[]='active';
    }
    return $classes;
}
add_filter('nav_menu_css_class','add_additional_class_on_li',10,4);


// Function to add commercial-drop-down class based on submenu item count
function add_commercial_drop_down_class($items, $args) {
    // Iterate through menu items
    foreach ($items as $item) {
        // Check if the item has children
        if (in_array('menu-item-has-children', $item->classes)) {
            // Get the submenu items for this menu item
            $submenu_items = wp_get_nav_menu_items($args->menu);
            $submenu_count = 0;
            foreach ($submenu_items as $submenu_item) {
                if ($submenu_item->menu_item_parent == $item->ID) {
                    $submenu_count++;
                }
            }
            // Add commercial-drop-down class if submenu has more than 10 items
            if ($submenu_count > 12) {
                $item->classes[] = 'commercial-drop-down';
            }
        }
    }
    return $items;
}
add_filter('wp_nav_menu_objects', 'add_commercial_drop_down_class', 10, 2);


function theme_enqueue_scripts() {
    wp_enqueue_script('jquery');
    // Your custom script
    wp_enqueue_script('custom-menu-script', get_stylesheet_directory_uri() . '/js/custom-menu.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

// Add additinal class to anchor tag class
function add_additional_class_on_a($classes,$item,$args,$depth){
    if ($depth === 0 && isset($args->add_a_class)) {
        $classes['class']=$args->add_a_class;
    }
    // if (in_array('menu-item-has-children',$classes = $item->classes)){
    //     $classes['class']='dropdown-toggle';
    // }
    // if (in_array('menu-item-has-children', $classes = $item->classes) && isset($args->add_a_class)) {
    //     // Add the dropdown-toggle class and data-toggle attribute
    //     $classes['class'] = isset($classes['class']) ? $classes['class'] . ' dropdown-toggle' : 'dropdown-toggle';
    //     $classes['data-toggle'] = 'dropdown';
    // }
    return $classes;
}
add_filter('nav_menu_link_attributes','add_additional_class_on_a',10,4);

// Add additinal class to submenus li
function mytheme_add_dropdown_menu_class_to_submenus($classes, $args, $depth) {
    if (in_array('sub-menu', $classes) && !in_array('dropdown-menu', $classes)) {
        $classes[] = 'dropdown-menu';
    }
    return $classes;
}
add_filter('nav_menu_submenu_css_class', 'mytheme_add_dropdown_menu_class_to_submenus', 10, 3);

2. Create Menus in the WordPress Admin Dashboard

  1. Navigate to Menus: Go to Appearance > Menus in the WordPress admin area.
  2. Create New Menus: Click on "Create a New Menu". Give it a name (e.g., "Main Menu").
  3. Add Items: Add pages, categories, or custom links to your menu.
  4. Assign Menu to a Location: Under "Menu Settings", assign your menu to one of the locations you registered (e.g., "Primary Menu").
  5. Save Menu: Click "Save Menu".

3. Display Menus in Your Theme

To display the menu in your theme, use the wp_nav_menu() function. This function should be placed in the appropriate template files, usually header.php.

Add the following code to header.php where you want the menu to appear:

 <?php
wp_nav_menu(array(
 'theme_location' =>  'primary-menu',
 'container'      => false,
 'menu_class'     => 'nav navbar-nav mr-auto',
 'depth'          => 3,
 'add_li_class'   => 'nav-item',
 'add_a_class' => 'nav-link',
 'add_li_dropdown_class' => 'dropdown'
))
?>




Comments

Post a Comment

Popular posts from this blog

How to create sliders banners custom code in wordpress ?

 1) function.php /* * Add custom menu (Sliders) to admin  panel */ function slider_custom_post_type (){     register_post_type ( 'sliders' , array (         'labels' => array (             'name' => __ ( 'Sliders' ),             'singular_name' => __ ( 'sliders' )         ),         'public' => true ,         'has-archive' , true ,         'rewrite' => array ( 'slug' => 'sliders' ),         'show_in_rest' => true ,         'supports' => array ( 'title' , 'editor' , 'author' , 'thumbnail' , 'comments' , 'revisions' ),         'taxonomies' => array ( 'category' )     )); } add_action ( 'init' , 'slider_custom_post_type' ); This will create new menu in wp-admin with given fileds 2) Install advanced custom fileds plug...
Read more

How to create a child theme in wordpress ?

1)Under wp-contents ->themes -> create new folder sometheme  2)under sometheme folder create style.css  add below lines /*  Theme Name:   Nadi plumbing  Theme URI:    http://example.com/my-child-theme  Description:  A custom child theme for the Twenty Twenty-One theme  Author:       Invitra  Author URI:   http://example.com  Template:     twentytwenty  Version:      1.0.0 */ 3) define functions.php  to interact between wordpress and database , define functions here  4) header.php - the of html from starting html tag to header tag  5) footer.php   a html code from footer start tag to html end tag 6) front-page.php : the content that you want to add to home page  <?php get_header (); ? > <!--/main content  --> <?php get_footer (); ? > 7)page.php :  the pages design for other pages  <?php /* Template Name: Cu...
Read more