Skip to content
pinegrow.com
Docs menuWordPress
WordPress

Download and set up the demo project

Updated

Follow these steps to set up the project so that you can perform the steps described in the Create Your First Block guide.

On this page

Download the project

Download the ZIP with the static HTML project and unzip it on your computer.

Open the project in Pinegrow

Start Pinegrow Web Editor and select Open project. Select the folder with the CreateYourFirstBlockStarter project.

Pinegrow start screen with Open project highlighted, with a callout to open the CreateYourFirstBlockStarter folder as a project.

Open blocks.html

Click on blocks.html in the Project panel to open the page.

Pinegrow project panel listing blocks.html, index.html and style.css, with a callout to open blocks.html.

Theme settings

Open WordPress › Theme / Plugin settings dialog:

WordPress menu in Pinegrow with Theme / Plugin settings highlighted, above the CreateYourFirstBlockStarter project.

Give your theme a name and a slug:

WordPress Theme Settings dialog with the Theme folder field empty and marked as required, and a callout to open the folder picker.

Next, select the folder where the WordPress theme will be exported. Normally, this should be a newly created folder inside wp-content/themes in your local WordPress installation.

macOS New Folder dialog inside the themes folder, with the name test_theme entered.

In the Blocks section of the Theme settings dialog, select the site stylesheet to load it in the block editor.

Blocks settings with Blocks type set to Regular JavaScript blocks, and a callout to select the framework CSS file for Editor stylesheet 1.

In our case this is bootatrap_theme/bootstrap.css.

Pinegrow Blocks settings with Blocks type set to Regular JavaScript blocks and Editor stylesheet set to bootstrap_theme/bootstrap.css.

Click on Save settings.

Export the theme

Use WordPress › Export the theme (CMD + M) to export the theme.

Pinegrow WordPress menu open with Export the theme highlighted, above the CreateYourFirstBlockStarter project tree.

Set up the front page

In WordPress admin, use Settings › Reading to select a static front page for the website.

WordPress Reading Settings with A static page selected and Homepage set to Front Page, with a callout to choose a static front page.

Activate the theme

In WordPress admin, activate the theme in Appearances › Themes.

WordPress Themes screen showing My Test Theme with the Activate and Live Preview buttons.

Go back to the guide

The project and the theme are now ready. Go back to the guide and follow the steps of creating your first custom block with Pinegrow.