Streaming live at 10am (PST)

A new easy way to convert Webflow to Wordpress


#1

I stumbled across a new solution for using Webflow if you are a Wordpress user. Pinegrow now has a new editor that can use static HTML code (Webflow code included) that will allow you to very easily insert the required Wordpress tags in order to create a custom theme. I'm anxious to try it out, and it looks pretty killer. I've included the Product Hunt link to it which grants you a discount.

http://pinegrow.com/wordpress-theme-builder.html?ref=producthunt


Transferring Webflow template to Wordpress
Webflow to Wordpress
#2

@craigteel, have you already tried this product?

How do you see a new solution for using Webflow?
edit: i see there's an Open function. But it's UI is quite complicated.
edit 2: here's the tutorial. A bit clumsy, but it seems to work well.
http://pinegrow.com/docs/wordpress/convert-html-to-wordpress-theme.html
Edit 3: start here: http://pinegrow.com/docs/wordpress/index.html


#3

I see it as a new solution because right now the alternative is either to fiddle around with hand coding it all manually, hack a theme to be close to your Webflow design, or pay a developer to convert your Webflow design into a theme. Sure, the setup isn't as straightforward as working with Webflow, but that's what you get when working with Wordpress. It's not a simplified system.

From what I can tell, with a little time spent reviewing their support documentation, managing the theme conversion is pretty explanatory. I hate coding. I hate coding for Wordpress even more. Seems to me like this is the best thing for those designers like me who want the freedom to design in Webflow with the robustness of the backend of Wordpress. Because we all know that as great as Webflow is, it has a long way to go in order to compete with the CMS capabilities of Wordpress.


#4

THANK YOU @craigteel I just purchased the Pinegrow WP theme builder. I have to fiddle with it a bit more but it looks pretty legit. I've been paying someone to convert html files to wordpress. Hopefully this cuts my cost.


#5

@craigteel Hear hear. I'm totally with you on the coding part. It just means: another (steep?) learning curve for another program. Fortunately this one is a one time payment.

As I'm clicking through the demo, it has the potential to do the same things as in Webflow. However, the UI is a real pain.

@dreps have you already given it a try?


#6

@dreps any luck using the pinegrow theme to convert webflow to wordpress? Would love to hear how it went. Thx!


#7

Is there anyone out there that can or knows someone that can convert my webflow sites in to word press sites? This is a serious request because I need to use webflow to design the front end but most of my clients want a CMS especially Word Press so, I need to find someone that can do my webflow to word press conversions, we'll design the sites using webflow so, we are just looking for an experienced developer that can do the conversion. I look forward to your reply.


#8

I'm looking into this now with one of my developers as one of our clients is asking for the site we're making with webflow go into wordpress, so I may be able to help you with this Simon.


#9

Hi LvnLife. Let me know how you get on with the webflow to wordpress conversion. I look forward to hearing from you again soon.


#10

I'm in the middle of doing just that. If it's succesfull and I have time, I'll write about my experience.


#11

Keep me posted. Ideally looking for a quick, simple (ish) solution.


#12

@simonosb1 I've got the basics working. Will try to post later this week about experiences with general template. Do you have a preference from the webflow free templates which i will explain?


#13

following you Friend. anxiously waiting to read from you smile


#14

Okay, so an update on my experiences of successfully getting a Webflow export via Pinegrow converted into a Wordpress theme.

Summary:

It’s not an easy process to get your static template into a dynamic Wordpress template. Pinegrow is marketed to be an alternative to webbuilders such as Webflow. But that’s only true if you fully (want to) understand HTML, CSS and a bit PHP. Only if you really need a Wordpress template after you’ve completed your design with Webflow, go with Pinegrow. Everyone else I’d advice to go for Webflow CMS over a Pinegrow migration. Every. Single. Time.


Cons:

  • Pinegrow software has a steep learning curve, you really need to get familiar with it’s user interface to get anything done. This took me about a week.
  • At first it feels like, there’s 100 things you need to figure out to get your template into Wordpress. And it stays that way with every new project.
  • Pinegrow is a stand alone web development tool. And the static HTML to Wordpress conversion is a bonus feature they have integrated later. So, you need to enable this functionality. [See also the next bullet]
  • There are somewhat difficult “must-do’s” before you can get simple things working in Pinegrow, such as enabling Wordpress functionality and configuring your template.
  • Pinegrow is designed by and for programmers, that is something you definitely “feel” using the software.
  • You should only use Pinegrow if you want to get into code. They are improving rapidly to become an easier click-and-drop software, must be said. But for now, if you don’t like code: use Webflow.

Pros

  • You can actually get your static WF-template into a Wordpress template yourself;
  • Once you know how Pinegrow works, you can do things fast. Very fast. As you can make symbols (as with Webflow) that you can re-use;
  • You can use/import current Wordpress content into your design within the software, and thus see what changes to the design will do without working on a live website;
  • You’ve got a library full of components that come well documented (and based on bootstrap);
  • There’s a bunch of tutorials that you should view and try-out before you start, that are a great help.
  • There’s only a one time fee to use PG, no monthly recurring cost.
  • There’s the possibility to connect libraries, that allow you to do well… almost nearly everything. Although this can be confusing to the novice user.

Looking back, my migration was a slow, at times painful and finally a rewarding process, that I couldn’t have done without help. In fact, I needed to start designing in a complete different way to get templates working. That has to do with the famous Wordpress Loop, which is similar to the way the Webflow CMS works with a dynamic lists.

Advice 1: If you don’t understand code, or want to go deep into tutorials, stick with Webflow

Advice 2: Please, please, please convert a template for fun first, before you even think of doing something for a client. If you know what kind of fields are required for Wordpress, you’ll design completely different in Webflow to make conversion easier.

Advice 3: If you do want to convert a Webflow export to Wordpress, follow this Pinegrow tutorial.

Hopefully this gives you guys some clarity. Let me know if you have questions.


Exporting Webflow project to Wordpress theme
#15

Using webflow to create a design and then bring it into wordpress is something I do regularily :smile: The trick is using a template with little or no styling and then pulling across the webflow html and styling as necessary to make it all work.

Would be happy to work with you guys on future projects if that is something your interested in doing. I'm very reasonable on costs :smile:


#16

Hi.

This sounds very interesting. Would you mind "illustrating" your process/workflow a little bit more in detail? For example when you say: "using a template", do you refer to a WP theme or Webflow template?

Any detail is appreciated.


#17

Hi Diu,

From your experience regarding the workflow: Webflow > Pinegrow > Wordpress, what are the key principles which you need to change when designing/developing templates for Wordpress?


#22

Hi @olexalex, that's not so easy to say directly. It involved getting to know Pinegrow deeply.

Keep in mind:
1. Consider the Wordpress loop, don't try to get any data outside the loop
2. Give everything its own div
3. Don't use SPAN. Ever.
4. Think about what Webflow has as functionality (for users, for posts) and try to design items around that in your design.

Does that help?


#24

Hi Diu,

thank's a lot for your detailed answer! I will keep those things in mind.

Thanks!


#27

using a wordpress theme :smile: