Webflow export to Wordpress (from scratch)

Thanks so much for this @pingram3541!

I checked the site on my iPad iOS 8.1.3 and the scroll trigger items are a no show in portrait and landscape (with refresh). The standard metric template has them displayed, with no scroll IX of course, but the show up as static. I wonder if some portion of the detection for iOS that disables scroll IX is missing. I am guessing that webflow has them default to their final display state / position when iOS is detected.

Not sure what to look for exactly, but I can take a look in the safari web inspector and compare the two if you can offer some guidance as to what I need to look for.

Hmm, I wonder if some of the meta information accounts for this. I haven’t had time to thoroughly review webflow.js but I put the following back so the head content is as close to an exact copy as possible.

I added this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

before this:

<meta charset="<?php bloginfo( 'charset' ); ?>">

Then changed this:

<meta name="viewport" content="width=device-width, initial-scale=1">

to this:

<meta name="viewport generator" content="width=device-width, initial-scale=1, Webflow">

I’m curious if that makes a difference…and the one I’m thinking may do the trick is content=“Webflow”.

Unfortunately it still leaves the scroll IX elements as a no-show on iOS. I read that
<meta name="viewport" content="width=device-width, initial-scale=1">
is important to fixing other issues with display on mobile devices. It is in a post from @callmevlad about attempting to resolve issues with fixed background images iOS. I can hunt for the thread if it is helpful. It talks a bit about iOS issues and some of the reasoning.

apologies if any of this is noise - I don’t know much, but apparently like to talk about it… :wink:

Yes but I’m looking at the exported html and that’s not there but the metric.webflow.com version apparently does not produce these results and I would expect the export to be identical.

So, switching back to the included jquery and webflow.js, placing them back in the footer as fixed references, I’m curious if we STILL have an issue with iOS?

If this proves to be the problem we will need to find out why and how to adapt correctly to the noConflict mode of WP’s built in jQuery library w/ webflow.js. Maybe there is a specific API call to re-instantiate the $ object. Maybe I’m just over-thinking/over-complicating something very simple and a new set of eyes can help =)

Still not displaying on iOS (emptied cache & history). Also tried on a separate port of the safari browser to confirm.

I will do a quick export of the metric template and post on my server just to be sure that there is no difference between hosted and exported. Would hate to be chasing a ghost and Webflow is obviously rehashing and tweaking a ton of stuff.

Will post the results in a sec.

Might I also add a suggestion for a WF to WP video with: “create a custom post type”?
Such as beautifully explained on this page?

1 Like

Hi pingram3541 - thanks so much for the video tutorial. I was following along and unfortunately got stuck in the areas where you edited/added to the code. My screen was not clear enough to see what you entered so I could copy. Do you have a supplemental document that you can share with the edited code to help me complete your walkthrough?

Any help would be greatly appreciated.

Thanks

Sure, the code is linked as a zip file in the YouTube video description.

Great! Thanks so much. I really appreciate all that you have shared to help guide us through this process.

hey pingram3541!
thank you so so much for the second video! this finally helped me get my javascript interactions working on wordpress!

everything works now but on every page load i get an error message saying “Oops! This page has improperly configured forms. Please contact your website administrator to fix this issue.”… The message only appears when incuding jQuery above the webflow.js script. If I take that out, it disappears.

Can you explain to me where this error is coming from? I don’ find anything…

Thanks again! I really appreciate your time.
Jaro

You can private message me a link to your site so I can take a look. Sounds like another plugin conflict maybe? Did you try disabling all unnecessary plugins first to see if the problem goes away? Oh and where are you seeing this message, directly in the front end page content or in the js console?

The origination of the alert ts found in webflow.js on line 575. I don’t recall where exactly it’s located but when you have a webflow webform that is now exported on a different domain, there is some fine tuning I believe in the code that needs to include new form configuration. I found this that might help http://forum.webflow.com/t/oops-popup-after-site-export-form-slider-issues/3573

In the mean time, you could edit line 575 and simply disable the alert by putting two forward slashes at the beginning of the line (//alert…). Then re-enable without the slashes later when you’re ready to tackle the form config (alert…). Keep in mind, this also means as of current, when someone completes your webform, it will also most likely generate an arror/alert and very likely not work.

Getting ready to tackle this for the first time. After we move Webflow into Wordpress is it difficult to update background images or content?

As long as you know some basic html css it isn’t very difficult. There are a word full of wysiwyg plugins such as designmodo’s qards, visual composer, beaver builder among others. Best of luck!

Gotcha. Thanks for the info. Guess it makes sense that integration of plugins would be a way to go.

This is outdated. As of a few weeks ago Webflow updated to JQuery 2.2.0, whereas Wordpress remains with JQuery 1.11.3 with their current release of 4.4.2.

Obviously, with plugins and WP dependent on v1.11.3 and Webflow dependent on 2.2.0 there’s bound to be issues with replacing one version for the other, either way.

Also, Webflow changed the way it begins its variables, so adding var $ = window.jQuery doesn’t fix conflicts as stated.

I’m not sure what the solution is, but maybe someone else will have an answer.

1 Like

Hi,

I write here to thank you for this tutorial you have shared. I have watched about 1/3 of it, with a bit difficult to see the php source code on my 11" laptop, so will continue at home with bigger screen :smiley: however, can transfer some parts of my webflow site to wordpress website. Thx a lot!

Isy

As @Drunkard100 points out, the webflow jquery version is 2+ while the latest WordPress version (currently 4.5) is 1.12.2.

One approach may be to replace the core WP version by simply using the wp_dequeue_script( ‘jquery’ ) method via your theme or child-theme’s functions.php and then immediately add wp_enqueue_script( ‘jquery’, ‘path-to-your-webflow-version’ ).

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Cleanup of old abandoned threads.