Tutorial - Webflow to Ultimatum (Wordpress)

I’ve been asked a lot on how to create a wordpress theme from a webflow export. I personally use the Ultimatum theme framework which is a premium theming tool for wordpress and thought I’d share my process if its ok with the devs and community.

Part 1

Part 2

Part 3

Part 4

18 Likes

Hey! I’m currently watching the third video of this tutorial and it comes to my mind… Why didn’t I use this before? Where did I put my $60 for that? ^^

Amazing tool. I’ll buy that soon. Few thing I have to ask. It’s a lifetime accessible plugin, right? Do I have to set it up somehow? Or simple Clean wordpress installation + Ultimatum Plugin installation will be enough?

Thanks for your time you put in this tutorial. I’m sure people will like it just as much as I do :slight_smile:


@edit

Just finished the tutorial. Amazing :))) I’d love to check it out! Too bad there is no trial… I’d love to try this tool before I buy it.
I’m still concerned about implementing blog, pages and widgets to make everything on the site easily editable for my client…

Not to hijack from webflow but the majority of the work I do is for SEO firms asking specifically for wordpress sites. I think this will compliment webflow however as there are a ton of WP themers that can speed up their work flow with both webflow and Ultimatum, they are a match made in heaven IMHO =)

There are a few other videos on youtube that show how to replicate sites and that is how I got a good feeling pre-purchase. I then justified that the pro version @ $125 lifetime and unlimited client installs was going to pay for itself really quick but I had concerns about longevity and support. I think the model is going annual support/upgrade plans soon.

Basically, if you saw my vids above then you saw how the grid system works. Its based on the 960gs but also supports a 1200px container now too.

So an install is basically like this:
1 - Upload Ultimatum theme via wordpress
2 - Activate and create a child theme (so you can override core w/ styles/js/php etc and export if needed)
3 - Activate the newly created child theme and create a template (choose grid system)
4 - Create partial and full layouts and then assign to pages/posts/taxonmies etc.
5 - Drop widgets into your layout grid

templates can be assigned to devices (i.e. iphone uses specific template vs ipad if desired while other devices use default template that can also be responsive or just build and store different versions of your site and activate when you like, i.e. a Winter Holiday version)

It eliminates the need for a bunch of php files for each page type and having to remember a ton of core wp php functions, i.e. the_loop, for_loop() etc. and simply gives you a grid system in which EVERYTHING is widgetized. They provide a bunch of core widgets such as the Default Loop widget being one of the strongest in which the loop is broken down into single page and multi-page options for placement, inclusion/exclusion, i.e. title, meta, except, content, comments, featured images, galleries, post count etc…

Heck, in simplest form, you could build header and footer sections for all pages and simply use a loop widget in the body. It ships with visual composer so you can use that grid and widget system per page/post all within the Ultimatum grid and widget system, they play very nicely together. Man I just realized I need to be on their payroll after this write up =)

Can’t wait for webflow to provide affiliate program, heh, on the Ultimatum forums I am getting a ton of questions about this product because many that buy Ult don’t realize you still need to know css so they struggle making the sites look nice. Like I said, a perfect little combo thats been working great for me.

If you pull the trigger hit me up on the forums. I have a few plugins and tutorials that make the learning curve much faster.

A few sites recently built using the above process:

http://www.epidemictattoo.com
http://www.emergencyrescuebailbonds.net

5 Likes

Just one more question. If I buy the Starter Licence for $64 and decide that I like the product and want to upgrade to PRO, can I upgrade for the difference between those two in pricing? Can upgrade for another $60 or do I have to pay $125 for that?

This is the only question that stops me from buying it.


@edit

one more thing… the “export” feature that is available in pro let’s me export my theme as a zip or other extension and use it in ANY wordpress site I create? Or can I use my template anywhere using my Starter plan?


@edit

Nevermind the first question. Found the answer in FAQ.

Can I upgrade my license?

Yes you can upgrade anytime with just paying the difference of the licenses regular prices.

Yep and the export feature I believe is for pro version but it’s a zip with a proprietary utx file which imports all the database wp stuff, you’ll still also need to zip up the child theme to capture any custom php, css, js and image files.

So it’s a 3 step process to move a child theme, 1) install ultimatum theme, 2) upload child theme folder and files to themes directory 3) activate child theme and import the template export.

1 Like

This is a pretty rad piece of software. I used to do a lot of Joomla Themeing and was curious about what new things were out there. Great link and thanks for the shares.

Easy to follow and great job -
Where are the download files for functions.php?

Oops didn’t think about the fact that the videos are embedded here. You can find the entire child theme zip in the description of each YouTube video when viewing via YouTube’s website.

1 Like

Could you please explain how to now use this to give a blog to it?

I find a much easier way to do the same thing and in 1/4 of the time. just make a tpl-template.php file paste in the HTML . replace all the image links with bloginfo and put the .css and images in the child directory and your done… that simple. Im not understanding why your really doing the same thing but taking the LONG way round… It dont make sense, Please tell me im wrong… Anyone that know something about wordpress and php can surly see what im talking about…

<?php /* Template Name: webflow */ ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>

Then just past all the html in a page.php or just make a page in the WP back-end and past the html there.
Somebody please tell me im wrong…

My way there is not need for ultimatum theme or any special theme for that matter, you can use any theme even twentyten will do , i use to do this all the time when porting html to wordpress. Problem is its mostly still static. The client cant edit pages or posts your way but my way at least they can edit the template file to make changes…

1 Like

The way you provide is good, but doesn’t give you an ability to move stuff around within Wordpress :slight_smile:

Right , thats what im saying, but neither is the option given in the youtube example, thats what im saying… tell me how its different. The difference is my way takes no time at all and dont require a special template.

@xboxsold, you are absolutely correct, that would definitely be much faster but it doesn’t really give you any advantage to using Wordpress and it’s many capabilities.

Heck, it would be even faster to simply upload the entire contents of the webflow folder to the web root directory and call it a day. Why would you need Wordpress? You can’t really use it in that example without adding more php code and adding more strictly named template files, i.e. header.php, single.php, comments.php, etc.

The advantage of using an Ultimatum child theme is that it is already hooked and no need to create those specially named files, i.e. wp_head, the_loop etc are all included in the child theme. This allows for the many other Wordpress functions to work, especially when it comes to SEO and other plugins.

Additionally, each section can be dragged and dropped into place without needing to modify the code again. One of the big advantages in using Ultimatum is that it comes with over $300 worth of premium plugins that can be used anywhere inside the theme and every section of the grid is widgetized, meaning instead of just text widgets (which I use in my video example for simplicity), you can literally drag and drop ANY Wordpress widget whether it be a premium slider, a recent posts widget, a blog loop with comments…the potential is literally unlimited.

We’ll get some more videos up soon showing the next stages of the process (where the dynamic part really comes into play) but I did mention in my 4-part video series that this was only the beginning stages that gets the static webflow export into a Wordpress theme and sets the foundation for further customization.

1 Like

Great, I look forward to that part… Ill be watching… Im subscribed to your youtube pages. Thanks for you tutorials so far.

I’ve come across the Ultimatum app quite a few times thru the mighty deals website. You have made it a lot more attractive to me. I really like using webflow and if using both webflow and ultimatum together creates a easier workflow to creating wp themes I just might have to look into it. I believe it’s on sale there 46% off both licenses.

I really enjoy using webflow and I hope that they keep improving. There’s a good thing going here. Thank you for sharing this combination, much appreciated. If I decide to try this, are the help forums actually helpful?

The forums got a bad rap in the beginning but now are very active. Feel free to Skype me if you ever need any help with either platform, same username. I think webflow has the potential to exceed what we can do with WordPress or still be a great companion tool for the design part.

1 Like

That sir is greatly appreciated. I shall add you and take you up on that offer when that time comes. I will definitely pay it forward.

I have looked at the videotutorials maybe 5 times by now…:slight_smile: I just discovered Webflow a month ago and i love it.

I have created a couple of pages in Webflow and it just works out of the box. But i have a problem when i need to translate the ccs to Ultimatun. Or to be more specific; understand the difference and/or the simularitys between Webflow:s naming and Ultimatums naming.

What i understand so far is that in Webflow you have: sections, containers, columns (=rows+col1,2 etc) and divblocks and in Ultimatum you have templates, layouts, rows (with wrapper, container) and widgets. But what is what in Webflow vs Ultimatum.

Ps. Is there an explaining tutorial somewhere or maybe a video which can explain this? It would be great. Ds

I´m totally lost :slight_smile:

//Björ

First, let’s talk about the differences.

Webflow is a tool that “builds” html and css using a graphical interface and rapidly improves workflow without having to manually code out all of the style sheet rules. It also improves the mundane task of building responsive websites by eliminating the need to manually edit and continually refresh the browser (at least that was how I was doing it). Also another great aspect I think often overlooked is it actually improves upon your knowledge of how css works and what each of the rules individually (and in combination) do to the presentation of the website. This a very helpful so when you do have to manually write some css, you’re much more proficient.

Ultimatum, however is a theme framework for wordpress which removes the traditional wordpress theming concept of creating separate page parts within a folder grouped by several php files, i.e. header.php, page.php, footer.php etc. Ultimatum provides an entire widgetized grid, much like webflow where you build rows, with columns, and the drag n drop widgets that can also be responsive but only the grid and prepackaged widget styling. Without webflow or custom css, an Ultimatum theme is very vanilla.

The generated webflow content and css is where the magic happens and that was the reason for the videos. To show you how to take the content, any grid differences and custom webflow styling and override the Ultimatum css.

Think of Ultimatum as the skeleton/engine of the site and webflow is the shiny new paint job =)

Lastly, the main difference between hosting a webflow site vs hosting a wordpress site is becoming less and less transparent as webflow adds to their “feature” repertoire but for now wordpress, albeit more complex, is a self-hosted, database driven platform with blogging and plugin functionality enabling you to use and/or create limitless applications. Keep in mind that the trade off also assumes more risk where webflow hosts on very fast and reliable servers and is also less likely to be the target of a hack attempt.

Hope this answers all your questions. Feel free to PM me any time.

2 Likes

Hi!

Thank you for the answer. But to be more specific. I already have a website built in WP with a old theme. Now i have built a lot of custom post types and meta fields with Types and Views and was planning to insert them and do an update at the same time of the theme with Ultimatum.

But then i discovered what you are mentioning in your reply … without the custom css its pretty vanilla. So i have built a startpage and a couple of post and page examples in Webflow (http://em2014.webflow.com/). But then i have to “translate” the css in to Ultimatum and thats where the problems starts :-).

As i understand it the Webflow “section” and “container” represent the “wrapper” and “container” in a “row” in Ultimatum?
The “column” in Weflow can be put in a container and you can give the included row and the included colums a classname and maybe also put a div block in one the columns and give that a classname. And then put the content in that col or div block.

The same procedure in Ultimatum should be to create a row (not the same as “row” in Webflow), give the wrapper a classname, give the container a classname and then give the induvidual column a classname. The next step is to insert one of the available widgets and insert the content in that specific widget.

But the column “row” is missing and the widget is not possible to give any name.

So how do you do this? Do you not “use” the row meaning do not give that any properties in Webflow and by that avoiding the missing of the row in Ultimatum?
What about the widgets in Ultimatum, how can i style these. I assume they are represented in Webflow by a div block or?

//Björ