This is part one of our Pinegrow WordPress video guide- a tutorial on creating a WordPress theme in Pinegrow. Over the coming days, we will take you through each step of creating a WordPress Theme in Pinegrow. We will start by creating the basic theme structure and adding the WordPress loop before moving on to more advanced ways for creating dynamic WordPress content in Pinegrow. It helps if you have a basic understanding of WordPress, however, you should be able to follow along even if you have no coding skills at all, and you will learn a lot about using Pinegrow in the process as well creating WordPress themes from scratch.
Download the Project Files
You can download the project files we will be working on throughout the series here. We used the pro version of Pinegrow Construction Template plugin to create the simple layout.
Install WordPress Locally
Before you begin you should install WordPress locally. You can check out this guide on environment set up but basically, there are 3 popular ways of installing WordPress locally on your machine – Wamp/ Mamp, Local Flywheel, and Bitnami Wordpress stack. Pick one, set up your local server and then watch the video below.
In it, we will generate the WordPress theme in Pinegrow by creating a master page from our index.html file
Pinegrow WordPress Part 1 – Generating the WordPress Theme
Time: Less than 5 mins
- Download the zip file which will contain the project we will be working on.
- Open the folder as a project.
- Open Index dot html.
- Click file in the Pinegrow Menu.
- Click Manage libraries and plugins from the drop down menu.
- Activate the WordPress Pinegrow Plugin.
- Once the Plugin is activated, click on the WordPress logo in the top right.
- All the WordPress options should now be available to use.
- Click on the page tag, the first field in the Pinegrow tree panel to select it.
- Click on the body element.
- Click the WordPress options icon.
- Click the WordPress site action. (note in the video we have already applied it)
- Select “this is the master page”. (note in the video we have already applied it)
- Name the theme.
- Set the theme slug.
- Click the Folder Icon from the theme folder field.
- A Window will open.
- You will need to locate the theme folder you set up earlier in your local WordPress install.
- It should be inside WordPress, WP Content, Themes.
- Select the folder.
- Click OK.
- Now Open your local install URL in your browser.
- Leave this Window open for the duration of this tutorial.
- Copy the URL.
- Paste the URL into the preview page URL field using control V.
- Click file.
- Click Save.
- You can also use the keyboard shortcut Control Save.
- Now export the theme. (if you get a warning message like in the video, ignore it)
- You can also use the keyboard shortcut shift W to export.
- Click WordPress from the Pinegrow Menu.
- Click Export theme.
- Log into your WordPress install. (eg localhostXX:82/wordpress/wp-admin)
- Go to dashboard – Appearance – Themes.
- The theme we generated from Pinegrow should be available.
- Click Activate.
- Open the Site.
- The theme is now activated!