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.

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/