Streaming live at 10am (PST)

Adding WebFlow js to WordPress

I used the following script to enqueue the webflow.js file per the WordPress codex:

add_action( 'wp_enqueue_scripts', 'my_custom_script_load' );
function my_custom_script_load(){
  wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/custom-scripts.js', array( 'jquery' ) );
}

The javascript is not working. It’s loading the file but I get these errors in the console:

custom-scripts.js?ver=4.9.8:7 Uncaught TypeError: Cannot read property 'tram' of undefined
    at Object.<anonymous> (custom-scripts.js?ver=4.9.8:7)
    at n (custom-scripts.js?ver=4.9.8:7)
    at Object.<anonymous> (custom-scripts.js?ver=4.9.8:7)
    at n (custom-scripts.js?ver=4.9.8:7)
    at Object.<anonymous> (custom-scripts.js?ver=4.9.8:7)
    at n (custom-scripts.js?ver=4.9.8:7)
    at Object.<anonymous> (custom-scripts.js?ver=4.9.8:7)
    at n (custom-scripts.js?ver=4.9.8:7)
    at custom-scripts.js?ver=4.9.8:7
    at custom-scripts.js?ver=4.9.8:clock7:

Is there a trick to getting Webflow js to work in WP?

I added var $ = jQuery; to the beginning and those console errors went away.

but none of my javascript is working. So, I guess my question remains, is there some trick to getting webflow JS to work in a WP site?

so helpful…

anyways I figured it out. There’s a weird bit in the webflow html element that needs to be added to the html element of your wordpress site.

looks something like this:

data-wf-domain="americleaniowa.com" data-wf-page="5b1e87cb1a995e0caaff7ea7" data-wf-site="5b1e87cb1a995e5f91ff7ea6"

If you don’t include that part (don’t copy and paste MINE you need to grab whatever is in YOUR Webflow html) in your WordPress html tag none of your WebFlow javascript will work.

You’ll of course want to create a child theme and edit your header.php file as I don’t know of another way to add attributes to your html tag.

1 Like

Hey James.

Having the same problem. Not a developer.
Where exactly did you add the “data-wf-domain…etc” to get it in the html element?

thanks.
Steve

in the header.php file. You’ll want to create a child theme (I use the Orbisius child theme creator)

2 Likes

@James_Welbes Thanks a lot for pointing this out. Had the same issue and found this after many hours of troubleshooting in converting using the pinegrow theme convertor.

1 Like

In case anyone is interested I have created the following code for the wordpress header template file where the code dynamically injects the unique webflow page id number into the opening HTML tag based on the current page template.

You just add a list of all your data-wf-page(unique webflow page id) and assign them to their corresponding page template that you have created in your wordpress theme.

It will pull the page slug of the current template, check for its webflow page id and output it into the HTML opening tag attribute.

This way you can use the header as a reusable template and have the javascript work for all the pages as the HTML tag updates the unique page id according to the current page template in use.

Keep in mind that a better solution may exist but since I am just learning how to program this is the first ever piece of PHP code I have ever created after watching some great courses on Udemy :slight_smile:

  1. Just add your unique webflow page id(replace 11111111111111 and 2222222222) and its corresponding page template slugs in the array replace

FYI the first key in the array has been left blank for index.php as the wordpress function get_page_template_slug() returns a blank for the index.php(home page template)

I couldn’t find a solution online so thought others in my position could benefit and I had fun doing it . Cheers!

Hi there,

I am also having an issue with converting my Webflow site to wordpress using the Pinegrow theme converter.

Basically, some of my interactions (so javascript) are not working once I export the theme. However, this does not apply to all interactions. Some are actually working fine but others are not. I tried the solution @uamalik provided here but it doesn’t change anything for me.

Is anyone of you still using the PG theme converter and run into similar issues? I am really desperately looking for help…

1 Like

I’m having the same problem! Some, but not all the animations are working. Using Pinegrow, too, which has pretty spotty docs on the subject. Did you get anything to work? Crossing fingers!

Where exactly did you add it?