Here’s a step by step guide about how to setup a WordPress install on your computer and setup Pinegrow WordPress builder so that you can start creating WordPress themes.
Setup a local webserver on your Computer
This is a needed for previewing your theme during the development.
There are a lot of good tutorials on the web and we have selected the following for you:
- How to install WordPress locally on your Mac using Mamp
- How to set up WordPress locally for PC/Windows with WAMPSERVER
Once WordPress is installed on your computer, you should be able to display the local website with the default WordPress theme (currently twentyfifteen) from your browser by loading a local url like this one: http://localhost/yoursitename
Configure your HTML template
We recommend the following process:
- Start Pinegrow
- Create a blank page (with Bootstrap / foundation / blocks …)
- Save it where you want, in a dedicated folder with the name you want
(Or use an existing HTML website that you want to convert into WP theme.)
This will be your work files, also called “Source HTML files” of your theme.
- From the Manage Frameworks menu in Pinegrow, Activate WordPress (its activated by default if you use WordPress Blocks)
- From the tree view add WordPress site on the top node of your page (here again, its already there by default if you use WordPress Blocks)
Setup the WordPress Master Page
When dealing with WordPress development with Pinegrow, the Master Page is the page where you control the header and the footer for your theme.
Index.html is generally used as the Master Page but this is not mandatory and you can use any other template as long as you are aware that the choosen template will “control” the content of your header and footer.
- This is the master page: Use this setting to define the current template as the master page.
If the current template is not your master page, you will have to uncheck this setting and enter the name of the master page (for example index.html) in the Use master page field.
WordPress site settings
- Theme name: is the name of your theme
- Theme slug: is the identifier of your theme. No spaces, no dash, no comma. Here you can use underscore (_) and less than 20 characters.
- Theme folder: is the location where your theme will be exported. This is the parameter causing the large majority of email we receive at Pinegrow support.
Click on the folder icon and navigate to the folder where you have installed your WordPress site.
Locate the folder named wp-content and get into it, then get into the folder named themes.
If you are at the right location, you SHOULD see a folder named twentyfifteen (and maybe twentythirteen and twentyfourteen which are the default themes when you setup a new WordPress).
If you don’t see these folders, you are probably NOT in the right folder!
Now, CREATE a new folder with the name you want for your theme.
This is the place where your theme will be AUTOMATICALLY exported during the EXPORT and this location will make it available in the WordPress Themes menu.
- Preview page url: is the url of your local wordpress website. For example http://localhost/yoursitename
Your Pinegrow template is now ready for your development session and you are now able to edit your template and export your theme automatically to your local WordPress site.
You will have to activate your theme in WordPress. You can do it from the Appearance > Themes menu
Last updated on June 27, 2017 at 7:39 am