Wordpress and webflow interactions

Design help Custom code
1

I think webflow is excellent. I have been using it for a few years, and I teach it in my classes at Syracuse University. I teach how to make webflow into Wordpress themes. I have a problem, though, where I can’t seem to get interactions to work on my Wordpress site.

I have read every post about this problem on this forum and elsewhere.

I am not sure the connection between the wf-data and the webflow.js - interactions work when publishing the site out and exporting, but not on Wordpress. Has anyone figured this out yet? I don’t use Udesly for my themes; they seem to have figured this issue out.

I have seen Webflow’s response posted in the forum that they are not responsible for using code on platforms that are not Webflow. But Webflow still gives the ability for code export, and I am sure I am not the only one that uses it in this way. I’ve also see Webflow’s response asking why we are not just using Webflow for our CMS. I can’t do that in my classes and on our student-run news web site. I work at a University. There’s a lot of reasons for everything.

Any help would be appreciated.

The published site I am talking about is http://highstakes.webflow.io, and the final WordPress site is https://highstakes.thenewshouse.com

Thank you,

Seth

2

Hi @Seth_Gitner, have you tried re-initialising IX2?

Webflow.require('ix2').init()

3

Webflow.ready();
Also might be needed.

1 Like
4

many thx for the response. I hav ebeen pulling my hair out for a workaround as thati am a big webflow fan.

i have not tried this – where do i put this? at the top of webflow.js?

sg

5

Ok I see this Reinitialize Webflow IX2 - #33 by mastermindesign

Any chance you can give a more complete step by step tutorial on this. I fit truly works i think it would be a game changer for me and others.

6

Place it at the end of body, before </body>.

<script>
window.addEventListener('load', function() {
   Webflow.ready();
   Webflow.require('ix2').init()
});
</script>
1 Like
7

Many thanks to those who responded. I have been able to figure out my specific problem.

When moving a webflow designed site over to WordPress you must put this info in the header of your Wordpress design. I have specific partials that pull it in specific to what is on the page.

<html data-wf-page="5ea459beYOURUNIQUECODE" data-wf-site="5ea459beYOURUNIQUECODE">

The code above will call out specific interactions within your webflow.js.

I design my microsites in Webflow and then port them over as custom post types in Wordpress. I call out my CSS in the head of every custom post type template - so if my custom post type is ‘Stories’ - single-stories.php will have a CSS file specific to that new design and then your footer will have a specific webflow.js. I recommend renaming your webflow.js to something specific to your microsite/CPT.

Hope this makes sense.

My problem was that I did not realize that every webflow.js is unique and must have the data-wf to link to it.

Webflow is a great tool to design in - but when you have Wordpress install and that is what you have to use its a much better solution to designing than hard code and/or divi, elementor or something of the like.

sg

8

To make it dynamic and have everything in the header, I did the following:

Created a variable on each page/template and put it above the header in Wordpress.

<?php $wf_page = 'PAGEID'; ?>

<?php get_header(); ?>

On the first line, you would replace PAGEID for the specific page ID obtained from your Webflow code. Inside the WP Header, I replaced the data-wf-page information, for the following:

data-wf-page="<?php global $wf_page; echo $wf_page; ?>"

It works perfectly and it’s dynamic. Hope it helps.