How to Convert a Webflow project into a WordPress Theme (1)

November 3, 2021

Starting with this video tutorial, I converted a Webflow project into a WordPress Theme having the following pages: Home, Blog Page & Post Page, Portfolio Page & Portfolio Post Page.

Here are the steps:

1. Install a WordPress instance in a working environment. For this project, I used a subdomain install

2. Download the Webflow files and make the basic changes to allow WordPress to use these files as a WordPress theme

3. Make a few basic changes to the root theme, so that WordPress can use the folder as a new theme.

  • Change index.html to index.php
  • Add a new file screenshot.png, size 1200x900px
  • Add a new file style.css with a short header

That’s what I added

/*
Theme Name: Lumi Ciobanu
Theme URI: https://lumiciobanu.com
Author: Lumi Ciobanu
Author URI: https://wordpress.org/
Description: Webflow to WordPress Theme
*/

4. Using these basic theme files – index.php, style.css, screenshot.png – we can archive this folder and upload it in WordPress Dashboard as a new theme. Voila!

But, wait! The website doesn not look good at all. That’s because the style is not linked to the WordPress files. We’ll cover this later.

5. For the next steps, we need  to install the WPide plugin te get easy access and to edit the WordPres files right from the WordPress Dashboard.

I know it’s easier to read and write the code in a professional code editor (like Visual Studio Code), but for the next steps I found it very useful to have everything easy accessible.

This is how the WPide code editor looks like.

 

5. To connect the style files with to the WordPress theme, we need another basic file – functions.php. So, with WPide code editor opened, add a new file in the main root functions.php

Functions.php is the theme engine file, the place where we can add unique features to our WordPress theme.

6. Connecting styles enqueue function

7. Split the main files into template files. For our project, we need header.php & footer.php

header.php

footer.php

For our index we use

<?php get_header(); ?> // for calling header

// div content between

<?php get_footer(); ?> // for calling the footer

 

8. Change all images Paths