Convert Webflow to Wordpress: Navbar trick

Hi, I’m a WordPress instructor in Thailand and I really love Webflow and I use it in my recent class.

Here is a trick when you want to convert Webflow navbar into WordPress theme.

What different between these 2 platforms is the HTML structure of the navbar.

In Webflow, we use the <nav> and <a> like this

<nav class="w-nav-menu main-nav"> 
    <a>link1></a>
    <a>link1></a>  
    <a>link1></a>  
</nav>

But in WordPress, the default navigation menu has a different structure

<ul class="w-nav-menu main-nav"> 
    <li>link1></li>
    <li>link1></li>  
    <li>link1></li>  
</ul>

It took me a while to find the different and solution for this issue, but the most simplest way is to use the code below, WordPress fan would understand it well.

<?php
$defaults = array(
    'theme_location'  => 'top_menu',
    'menu'            => '',
    'container'       => '',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'w-nav-menu main-nav',
    'menu_id'         => '',
    'echo'            => false,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<nav id="%1$s" class="%2$s">%3$s</nav>',
    'depth'           => 0,
    'walker'          => ''
);

$find = array('><a', '<li');
$replace = array('', '<a');

echo str_replace($find, $replace, wp_nav_menu( $defaults ));
?>

We use the string replace to replace LI with A tag, and wrap it under WordPress nav menu default function.

Hope this helps,

Koft

7 Likes

This is excellent for WP folks that create themes using Webflow. Thank you for sharing @koftkoft!

Thanks for sharing this! I was struggeling with this a week ago, and had trouble getting it to work with Webflow’s implementation.

Well, Webflow has no implementation yet with Wordpress, but creative community members come up with great solutions to different integrations all the time :slight_smile:

Hi, glad to hear you love it.

Somehow, recently Webflow has made some change to nav menu, so the below code may work for you.

<?php

    $defaults = array(
      'theme_location'  => 'top_nav_menu',
      'menu'            => '',
      'container'       => '',
      'container_class' => '',
      'container_id'    => '',
      'menu_class'      => 'menu w-col w-col-8 nav-column',
      'menu_id'         => '',
      'echo'            => false,
      'fallback_cb'     => 'wp_page_menu',
      'before'          => '',
      'after'           => '',
      'link_before'     => '',
      'link_after'      => '',
      'items_wrap'      => '<div id="%1$s" class="%2$s">%3$s</div>',
      'depth'           => 0,
      'walker'          => ''
    );

    $find = array('><a'   ,   '<li', 'menu-item ');
  $replace = array(''  ,  '<a', 'nav-link menu-item ');

  echo  str_replace( $find, $replace,   wp_nav_menu( $defaults )  );
  //wp_nav_menu( $defaults );

    ?>
1 Like

Yup, I know. I meant I didn’t know the WordPress/PHP trick. I thought you had to use the WP class names.

I see. I didn’t notice the changes yet. I hope they changed it to a ul > li > a :slight_smile: Thanks for sharing your code.

I’m not all in to WP but I’m in process to converting a WF site to WP. I got the navigation to work when I changed the a classes to li element but I didn’t get the mobile nav to work. Maybe this solution can help. I can not understand where I’m supposed to put this code though. I’m guessing i’m supposed to replace code some where and I found nav.menu.php and tried with unhappy result.

2 posts were split to a new topic: Hiring developer to convert to Wordpress