Hi everyone, I’ve seen and received quite a few inquiries regarding the conversion process of a webflow to WordPress and while webflow continues to make strides towards enhancing their platform I thought I’d provide another tutorial on how to do this without the need for some fancy framework.
So here it is, a basic conversion where you’ll be able to use the dynamic menu system, a basic loop, a header/footer w/ some conditional statements, widgetized areas and also hooking in wp_head and wp_footer for plugin compatibility, all built from scratch.
I’ve added another tutorial since WordPress includes the latest version of jQuery. It’s best not to supply a fixed version in our footer.php so I deleted both the jquery and webflow scripts from footer.php just before the wp_footer function as well as enqueued our other scripts and styles in the head.
inside functions.php, add the following:
/**
* Proper way to include scripts in WordPress
*
* @since Metric 1.0
*/
function metric_dependencies() {
//wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css', array(), null, 'all' );
//wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/jquery.min.js', array(), null, true );
wp_enqueue_script( 'webflow', get_template_directory_uri() . '/js/webflow.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'metric_dependencies' );
The first 2 commented out lines just give you an example of how to add additional styles and scripts, the last one actually loads webflow.js with the built in jquery as a dependency and the “true” part tells WP to load them just before the closing body tag vs the head.
The only modification to webflow.js that is required due to WordPress’s noConflict mode of jQuery is to add:
var $ = jQuery;
to the line just before:
var Webflow = { w: Webflow };
That’s it. =)
Here’s the video which includes the updated files in the video description area.
Hmm, flawless on my mobile note ii and win8 tablet using ie, chrome, firefox and safari, also tested a galaxy s4 but we sold all our idevices so not able to test those =(
Sounds like a scripting issue, but you probably can’t see the console from your i6 can you?
I’m curious if it’s webflow.js after the WordPress included jquery removes global $ alias causes an error maybe?
That’s just wonderful work @pingram3541! Thank you for being so kind and thorough in your explanations. It’s the first of its kind to show the exact changes.
I’m sure this will be a great first step for many of us to get WF into a dynamic system. Thanks again.
Thanks. There’s obviously a lot more that can be done and if you use a utility plugin such as “theme check” you’ll see we’ve only scratched the surface at making what would be called a “fully compliant” WordPress theme suitable for the marketplace.
Personally, WP is evolving and with the hype of many new front end editors and tools such as css-hero, I personally don’t agree that a WP theme needs to have all that stuff to be considered a valid WP theme. Not everyone wants their site to have RSS feeds, comment systems, etc. At least with the above basics, one could simply make all areas of the site widgetized and then build custom widgets for moving the blocks of code around seamlessly while also giving clients control over what content is editable from the admin area.
Hey, maybe I’ll do that for the next tutorial…how to make your own widgets =)
I fully agree. Many people just need the blog-functionality and some sort of simple interaction such as a well designed form. Not all the “normal” extra’s such as comments, multiple portfolio’s and so on.
I checked the sites on an iPhone 4 (running the latest available iOS) in both safari and chrome. Same exact issue as iPhone 6. Sorry I haven’t had time to look at it closer. Great tutorial by the way!
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.
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…
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.
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?
