Webflow Navbar to WordPress Menu

Wevflow Navbar to WordPress Menu

Problem

Recently we have started using Webflow in KOALA42 to create HTML + CSS prototypes, we can present to clients. This allow us to speed up the development process, because there is no need to Photoshop/Illustrator/Sketch Mocks. So we can directly create design and get really good HTML  + CSS. The only problem is the structure of the menu, that is generated with Webflow, wich is not compatible with WordPress.

Plugin

We have solved it for you. Here is plugin you can download, clone or even contribute to (Github). Or you can continue reading and do it yourself.

PLUGIN DOWNLOAD

DIY

There are few options you can try:

1. wp_nav_menu – supply parameters to replace the structure (works only for simple ones)
2. walker class – works fine but is hard to implement
3. wp_get_nav_menu_items – robust but not so “nice”
4. https://www.udesly.com/udesly-adapter/ – (PAID)

We went with third option and here is code snippet you can use in you function.php, to create WebFlow menu. You can use <?php create_webflow_menu(‘theme-location’); ?> directly in your theme then.

	<?php
	function create_webflow_menu( $theme_location ) {
	// tutorial: https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/
	// check if there are some menus and if the wanted menu exists
	if ( ($theme_location) && ( $locations = get_nav_menu_locations() ) && isset( $locations[$theme_location] ) ) {
	$menu_list = "";
	//get all term data from database by term ID, second parametr: taxonomy --> for menus taxonomy is: nav_menu
	$menu = wp_get_nav_menu_object($locations[$theme_location]);
	//get nav menu items from term_id which is a menu
	$menu_items = wp_get_nav_menu_items($menu->term_id);
	//start foreach
	foreach( $menu_items as $menu_item ) {
	//current item
	$current = ( $menu_item->object_id == get_queried_object_id() ) ? ' w--current' : '';
	//if menu item doesn't have a parent - if menu item is not a submenu
	//start if
	if( $menu_item->menu_item_parent == 0 ) {
	//add for each menu item it's id to variable parrent
	$parent = $menu_item->ID;
	$menu_array = array();
	foreach( $menu_items as $submenu ) {
	//current item for submenus
	$current_sub = ( $submenu->object_id == get_queried_object_id() ) ? ' w--current' : '';
	if( $submenu->menu_item_parent == $parent ) {
	$bool = true;
	$menu_array[] = '<a href="' . $submenu->url . '" class="dropdown-link w-dropdown-link'. $current_sub .'">' . $submenu->title . '</a>';
	}
	}//end foreach
	//submenu
	if( $bool == true && count( $menu_array ) > 0 ) {
	$menu_list .= '<div data-delay="0" data-hover="1" class="w-dropdown">';
	$menu_list .= '<div class="navigation-link w-dropdown-toggle">';
	$menu_list .= '<div class="icon w-icon-dropdown-toggle"></div>';
	$menu_list .= '<div>' . $menu_item->title . '</div>';
	$menu_list .= '</div>';
	$menu_list .= '<nav class="w-dropdown-list">';
	$menu_list .= implode( $menu_array );
	$menu_list .= '</nav>';
	$menu_list .= '</div>';
	} else {
	//normal menu
	//$menu_list .= '<li>' ."\n";
	$menu_list .= '<a href="' . $menu_item->url . '" class="navigation-link w-nav-link'. $current .'">' . $menu_item->title . '</a>';
	}//end if
	}//end if
	}//end foreach
	} else {
	$menu_list = '<!-- no menu defined in location "'.$theme_location.'" -->';
	}
	echo $menu_list;
	}

view raw functions.php hosted with by GitHub

References

1. https://forum.webflow.com/t/how-to-convert-navbar-to-wordpress-menu/52161/6
2. https://github.com/Koala42/webflow-to-wordpress-menu
3. https://codex.wordpress.org/Class_Reference/Walker
4. https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/
5. https://developer.wordpress.org/reference/functions/wp_nav_menu/