If you have a look around our website, you made notice a few slight changes to our site this is because we have finally made the change from WordPress to Webflow.

Why we did this is for a few reasons one of the top reasons being speed. Webflow is proving to be a faster platform for the simple fact that you don’t have plugins bogging down your site.

There are a multitude of blogs and other resources out there for learning how to move a site from WordPress to Webflow they do help but they won’t be perfect for your exact needs.

The issue I found with all the info I found was it didn’t cater to my exact needs odd I know someone not doing exactly what you need on the internet. So, I thought I would share how I overcame some of the issues I had while doing the transfer in the hopes it may help you if you find yourself making the same move we did.

Making the pages of the site.

This is the easy bit first its just a matter of knowing how to use the editor for Webflow and then working away to make the site in Webflow that same or as close as you can get to the WordPress site. I did this by having two monitors one where I was working on the site and one where the WordPress site was sitting for reference. It takes a while but not as long as making a site from scratch because we didn’t want to make any big changes it made it a bit easier. A main point for making this faster is making sure you have some base styles so that you can use them across all your pages, this makes it easy to get your pages to be uniform and makes it easy to adjust things as you go without having to go to each page and make the changes all other the place.

Working on the complex parts of pages.

We have a search and filter system on our blogs and while we had it via a plugin on WordPress here on Webflow it’s all done via a very simple attributes system from finsweet this made it very easy to get what I needed for the filtering system without a lot of code, there is a bit of code but very little. I also used a bit of jQuery to load text into a dropdown for me this is a method I would recommend it’s a simple bit of code that means you can load info into drop downs from CMS without having to do it by hand.

$('.catagory-select-item').each(function(){
   var a = $(this).text();
$('.catagory-select-field').append(''+a+'');
})

I would definitely recommend using finsweet for any filter or search needs for Webflow sites it has made it very simple to get a filtering system without having to much complexity.

The big one moving our collection of blogs

Now this is the biggest issue I had while moving over. There is a plugin for Wordpress that exports content this may help you but atlas it did not do what I wanted. The plugin was giving me bits that I didn’t want and bits that I needed weren’t there so I had to do the hard yards myself thankfully I have the knowledge of python and web scraping to fall back on. I spent a lot of time writing a scraper to get the parts from the blogs I wanted while leaving behind the sections I didn’t need and then formatted them in an excel sheet for the import into Webflow. This took so long to get right making sure I got the parts that I needed while not taking the parts that I didn’t this was not ideal, but I knew the outcome I wanted and was not happy with the initial plugins output so in my opinion it was worth the time to get it perfect.

Blog code blocks

There is as of writhing this blog no native way of adding code blocks into blogs in Webflow. This is a major issue for us as it is with many other technical blogs. How I fixed these issues is by taking to google, there are so a fair number of different solutions to this problem. The issue I had with many of the solutions was the complexity of them. As we don’t have one or two people doing the blogs for our site I needed a solution that was simple and easy to use this led me to using highlight.js.

Highlight.js is the choses solution purely because it can be used in a very basic form and still do the job without much code needed from the person writing the blog and what code they do need is handily placed in a snippet on our internal documentation for people to refer to.
all it takes is adding the link to the highlight.js stylesheet and script tags into the blog page head and one line in the body then the person writing has to copy and paste the code into the blog and away they go.

Below is a screenshot of all the code needed to show code.. of course would have loved to show you in code but when trying to do that it hid all of the code witch is what I expected.

‍

Well that it from me for now plan on doing a few more blogs on Webflow so keep an eye out for them.