Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Hook Custom category Menu shortcode to secondary navigation

  • Hi,

    I have a dynamically generated menu which is a shortcode. the menu consist of all categories and sub categories (All levels) of woocommerce products.
    What i want is I want to make use of GP secondary navigation. I want to dynamically assign this as secondary navigation without creating any new menu. (probably a function can do)
    I want to make use of styling feature of GP secondary navigation to style it.

    Please let me know how we can do it.

    // Horozontal menu code starts here
    
    function custom_product_category_menu() {
        // Fetch product categories
        $args = array(
            'taxonomy'     => 'product_cat',
            'orderby'      => 'name',
            'show_count'   => 0,
            'pad_counts'   => 0,
            'hierarchical' => 1,
            'title_li'     => '',
            'hide_empty'   => 0
        );
    
        $all_categories = get_categories($args);
    
        $menu = '<nav class="menu"><ul class="menu__list">';
    
        foreach ($all_categories as $cat) {
            if ($cat->category_parent == 0) {
                $category_id = $cat->term_id;
                $menu .= '<li class="menu__group"><a href="' . get_term_link($cat->slug, 'product_cat') . '" class="menu__link">' . $cat->name . '</a>';
    
                $args2 = array(
                    'taxonomy'     => 'product_cat',
                    'child_of'     => 0,
                    'parent'       => $category_id,
                    'orderby'      => 'name',
                    'show_count'   => 0,
                    'pad_counts'   => 0,
                    'hierarchical' => 1,
                    'title_li'     => '',
                    'hide_empty'   => 0
                );
    
                $sub_cats = get_categories($args2);
                if ($sub_cats) {
                    $menu .= '<ul class="menu__sublist">';
                    foreach ($sub_cats as $sub_category) {
                        $menu .= '<li class="menu__group"><a href="' . get_term_link($sub_category->slug, 'product_cat') . '" class="menu__link">' . $sub_category->name . '</a>';
    
                        // Fetch third level categories
                        $args3 = array(
                            'taxonomy'     => 'product_cat',
                            'child_of'     => 0,
                            'parent'       => $sub_category->term_id,
                            'orderby'      => 'name',
                            'show_count'   => 0,
                            'pad_counts'   => 0,
                            'hierarchical' => 1,
                            'title_li'     => '',
                            'hide_empty'   => 0
                        );
    
                        $third_cats = get_categories($args3);
                        if ($third_cats) {
                            $menu .= '<ul class="menu__sublist">';
                            foreach ($third_cats as $third_category) {
                                $menu .= '<li class="menu__group"><a href="' . get_term_link($third_category->slug, 'product_cat') . '" class="menu__link">' . $third_category->name . '</a>';
    
                                // Fetch fourth level categories
                                $args4 = array(
                                    'taxonomy'     => 'product_cat',
                                    'child_of'     => 0,
                                    'parent'       => $third_category->term_id,
                                    'orderby'      => 'name',
                                    'show_count'   => 0,
                                    'pad_counts'   => 0,
                                    'hierarchical' => 1,
                                    'title_li'     => '',
                                    'hide_empty'   => 0
                                );
    
                                $fourth_cats = get_categories($args4);
                                if ($fourth_cats) {
                                    $menu .= '<ul class="menu__sublist">';
                                    foreach ($fourth_cats as $fourth_category) {
                                        $menu .= '<li class="menu__group"><a href="' . get_term_link($fourth_category->slug, 'product_cat') . '" class="menu__link">' . $fourth_category->name . '</a></li>';
                                    }
                                    $menu .= '</ul>';
                                }
                                $menu .= '</li>';
                            }
                            $menu .= '</ul>';
                        }
                        $menu .= '</li>';
                    }
                    $menu .= '</ul>';
                }
                $menu .= '</li>';
            }
        }
        $menu .= '</ul></nav>';
        
        // Enqueue the necessary styles and scripts
        wp_enqueue_style('custom-menu-style', get_template_directory_uri() . '/css/custom-menu-style.css');
        wp_enqueue_script('custom-menu-script', get_template_directory_uri() . '/js/custom-menu-script.js', array('jquery'), null, true);
        
        return $menu;
    }
    add_shortcode('custom_product_category_menu', 'custom_product_category_menu');
    
    // Horozontal menu code ends here

    I have given my code above. Regards

  • Hi there,

    the GP Secondary Nav uses a nav walker to generate the HTML, you can’t force it to use a shortcode.

    What you could do is:

    1. activate the Secondary Nav
    And add a menu to it, and inspect its HTML. Here you can see the Classnames that GP adds and what it uses for its styling eg.

    What you would have to do is:

    1. makes sure the HTML Classnames returned by your shortcode match those a GP Secondary Navigation would return. For example

    NAV element has a class="secondary-navigation"
    LI element has a class="menu_item" but you should look to use the
    UL for sub menus has class="sub-menu">

    2. then use a Layout Element to disable the Secondary Navigation. This way GP still loads its code to style the nav.

    3. Use a Hook Element to hook in your Shortcode eg. generate_before_header

    But its a very hacky way of doing this.
    You may want to look into wp_nav_menu_items or the walker_nav_menu_start_el filter hooks in WordPress.
    Examples of each being used here:

    https://gist.github.com/WestCoastDigital/e4ad774dbc65125444c272dcf68c4b2e

    https://www.paulchinmoy.com/adds-sub-categories-sub-menu-under-parent-category-menu-item/

  • Thank you. Let me give a try.

  • You’re welcome

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.