One of the features of Pinegrow Web Editor is that it has WordPress theme builder that lets users to visually build and edit WordPress themes. It also lets users to convert static HTML/CSS websites into WordPress themes.
This project is going to create Foundation/WordPress website in Pinegrow using WordPress theme builder.
Pinegrow documentation provides step by step (video) tutorial on how to create such a website, please check the link http://docs.pinegrow.com/wordpress-themes/creating-wordpress-themes-with-pinegrow-web-editor
Open or create the HTML version of the theme in Pinegrow.
Choose what framework is going to be used. This project is using Foundation 6. Then choose a template.
This is working dashboard.
Go to ‘File’ and ‘Save as’.
Create a folder on your desktop and save the file called ‘index.html’ in that folder.
Once ‘index.html’ is saved, this is what will appear in the folder. It is a basic HTML structure.
Then create another folder on desktop for a theme. This is where WordPress will export theme once it’s done.
Go back to working dashboard of Pinegrow and click on ‘index.html’ on the left side bar to make it blue. Then click on ‘Settings’ icon next to search bar. Click on ‘Activate’ next to WordPress to activate WordPress plugin/library to be able to create and work with WordPress features.
Go to ‘WP’ option in right sidebar and all WordPress features are there such as site, posts, authors etc. This is where all settings for WordPress will be made from. Click on ‘index.html’ in left sidebar and then ‘Site’ in right sidebar.
Notice that in left side bar, ‘WordPress site’ showed up next to ‘index.html’. This means that WordPress features were successfully activated. In the right sidebar, tick ‘This is the master page’ option and then add ‘Use masterpage’ (where theme files are stored) and ‘Preview page url’ (URL of website) and also add name of theme.
Content, images and text was added following video tutorial.
Once theme was done and exported, icon with the theme should appear in dashboard of WordPress.
This is file structure of exported theme –
However, my theme did not appear there. Therefore, next step was to add it there manually. Zip the full folder and upload it to the server by clicking on ‘Add New’ in ‘Themes’ in dashboard. After that, the theme appeared in dashboard and activation was done by clicking on ‘Activate’.
This is what the theme looks like (please keep in mind that this was only a test!)
Theme was activated and working therefore some more features was added to it such as footer. However, after adding footer and saving the theme, changes should automatically appear on the website while it was not working in this case. This led to conclusion that something went wrong with connection and files are not connected. Error should have been noticed a while ago when the theme had to be activated manually.
Next step is to find out why files are not connected. Could it be wrong file strucure?