Streaming live at 10am (PST)

Convert Webflow to Wordpress: Navbar trick


#1

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


How to convert navbar to wordpress menu
#2

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


#3

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


#4

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


#5

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 );

    ?>

#6

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


#7

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


#8

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.


Do you need a help?
#9

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


#12