-
chetanpatil
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
-
David
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 aclass="secondary-navigation"
LI
element has aclass="menu_item"
but you should look to use the
UL
for sub menus hasclass="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 intowp_nav_menu_items
or thewalker_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/
-
chetanpatil
Thank you. Let me give a try.
-
David
You’re welcome
- You must be logged in to reply to this topic.