Display Icon in custom menu

  • Resolved dimitrisv

    (@dimitrisv)


    3 years, 6 months ago

    I am creating a bootstrap 5 compatible custom menu (see the vertical menu in the example).

    I would like to use your plugin to store icons for each menu option.

    I would like to help on how I am going to call the icon url for each option.

    For your reference see sample code in my function at my themes function.php (marking in bold the bit that will need to be replaced with the code to the url.

    function create_bootstrap_menu($theme_location)
    {
    if (($theme_location) && ($locations = get_nav_menu_locations()) && isset($locations[$theme_location])) {

    $menu = get_term($locations[$theme_location], ‘nav_menu’);
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    foreach ($menu_items as $menu_item) {
    if ($menu_item->menu_item_parent == 0) {

    $menu_list .= ‘<div class=”menu-item menu-accordion show” data-kt-menu-trigger=”click” >’ . “\n”;
    $menu_list .= ‘<span class=”menu-link”>’ . “\n”;
    $menu_list .= ‘<span class=”menu-icon”>’ . “\n”;
    $menu_list .= ‘<span class=”svg-icon svg-icon-2″>’ . “\n”;
    $menu_list .= ‘<svg xmlns=”https://www.w3.org/2000/svg&#8221; width=”24px” height=”24px” viewBox=”0 0 24 24″ version=”1.1″>’ . “\n”;
    $menu_list .= ‘<path d=”M2.56066017,10.6819805 L4.68198052,8.56066017 C5.26776695,7.97487373 6.21751442,7.97487373 6.80330086,8.56066017 L8.9246212,10.6819805 C9.51040764,11.267767 9.51040764,12.2175144 8.9246212,12.8033009 L6.80330086,14.9246212 C6.21751442,15.5104076 5.26776695,15.5104076 4.68198052,14.9246212 L2.56066017,12.8033009 C1.97487373,12.2175144 1.97487373,11.267767 2.56066017,10.6819805 Z M14.5606602,10.6819805 L16.6819805,8.56066017 C17.267767,7.97487373 18.2175144,7.97487373 18.8033009,8.56066017 L20.9246212,10.6819805 C21.5104076,11.267767 21.5104076,12.2175144 20.9246212,12.8033009 L18.8033009,14.9246212 C18.2175144,15.5104076 17.267767,15.5104076 16.6819805,14.9246212 L14.5606602,12.8033009 C13.9748737,12.2175144 13.9748737,11.267767 14.5606602,10.6819805 Z” fill=”#000000″ opacity=”0.3″ />’ . “\n”;
    $menu_list .= ‘<path d=”M8.56066017,16.6819805 L10.6819805,14.5606602 C11.267767,13.9748737 12.2175144,13.9748737 12.8033009,14.5606602 L14.9246212,16.6819805 C15.5104076,17.267767 15.5104076,18.2175144 14.9246212,18.8033009 L12.8033009,20.9246212 C12.2175144,21.5104076 11.267767,21.5104076 10.6819805,20.9246212 L8.56066017,18.8033009 C7.97487373,18.2175144 7.97487373,17.267767 8.56066017,16.6819805 Z M8.56066017,4.68198052 L10.6819805,2.56066017 C11.267767,1.97487373 12.2175144,1.97487373 12.8033009,2.56066017 L14.9246212,4.68198052 C15.5104076,5.26776695 15.5104076,6.21751442 14.9246212,6.80330086 L12.8033009,8.9246212 C12.2175144,9.51040764 11.267767,9.51040764 10.6819805,8.9246212 L8.56066017,6.80330086 C7.97487373,6.21751442 7.97487373,5.26776695 8.56066017,4.68198052 Z” fill=”#000000″ />’ . “\n”;
    $menu_list .= ‘</svg>    ‘ . “\n”;
    $menu_list .= ‘</span>’ . “\n”;
    $menu_list .= ‘</span>’ . “\n”;
    $menu_list .= ‘<span class=”menu-title”>’ . $menu_item->title . ‘</span>’ . “\n”;
    $menu_list .= ‘ <span class=”menu-arrow”></span>’ . “\n”;
    $menu_list .= ‘ </span>’ . “\n”;
    $menu_list .= ‘<!– Collect the nav links, forms, and other content for toggling –>’;

    $parent = $menu_item->ID; ….

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Support Vytis

    (@bvytis)

    Hi Dimitris,

    Thank you for your interest in the menu, based on what I understand in your approach doesn’t seem that you need Menu Icons plugin at all in your case if you’re planning to re-do the plugin and load your own icons, however, in case you find that plugin will be useful in your approach for such customizations we just recommend to check the plugin files manually to analyze the code and do the customizations on your end as we can’t provide too much support about such code changes.

Viewing 1 replies (of 1 total)
  • The topic ‘Display Icon in custom menu’ is closed to new replies.