How to Setup an ideal WordPress Development Environment
Tags: wordpress, gutenberg, plugins
Published: 2020-07-02 03:48:12

WordPress is not my primary development environment. I only go in when I need certain functionality or design fixes for my own site, and by far the most painful part is getting set up. (Maybe I'm just a N00b). The biggest problem I had with my former development environments was not being able to access the source code and poke around.

[Learn to code with our beginner friendly tutorials on programming, Linux, Docker, and more](https://truthseekers.io/latest-tutorials-signup/)

<!-- wp:paragraph -->
<p>Sure, I can READ it on Github, but it's hard for me to figure out what's going on by just reading. <strong>I need to be able to interact with the WordPress source code.</strong> Also, being the large beast that WordPress has become, documentation can't keep up, so it's necessary to access the source code... So here's how I've been able to do that by setting up an <span style="text-decoration: underline;">"ideal WordPress Development Environment"</span>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Edit: I spent way too many hours debugging NPM errors on a new windows machine to get this setup working. </strong><a rel="noreferrer noopener" href="https://github.com/felixrieseberg/windows-build-tools/issues/56" target="_blank">The solution I found here</a> appears to be <code>npm install --global --production windows-build-tools</code> and if your install failed before doing this, you'll probably have to DELETE the $HOME/.node-gyp folder  (when you install something that needs it, it will automatically be re-installed.</p>
<!-- /wp:paragraph -->




<!-- wp:heading {"level":3} -->
<h3>What you need:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://github.com/WordPress/wordpress-develop" target="_blank" rel="noreferrer noopener">WordPress-Develop Github Repository</a></p>
<!-- /wp:paragraph -->


<!-- wp:paragraph -->
<p><a href="https://github.com/WordPress/gutenberg/blob/master/docs/contributors/getting-started.md" target="_blank" rel="noreferrer noopener">Gutenberg Github Repository</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Step 1. Setup the WordPress-Develop repository locally.</h3>
<!-- /wp:heading -->

 
<!-- wp:paragraph -->
<p>go through their instructions. Currently you just need Node.js and Docker installed <strong>and running</strong>. So do that and come back.</p>
<!-- /wp:paragraph -->
{% youtube SiaXzkZN_fM %}
<!-- wp:paragraph -->
<p>clone the wordpress-develop repository. I created a folder on my Desktop where the entire setup will go called "hello-wordpress" and then inside "hello-wordpress" is where I cloned the wordpress-develop repository. Then cd in and setup the environment as it explains in the readme:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>mkdir hello-wordpress
cd hello-wordpress
git clone https://github.com/WordPress/wordpress-develop.git
cd wordpress-develop
npm install
npm run watch</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Note that we skip a lot of instructions on the wordpress-develop docs page because we're going to be using Gutenberg for the Docker setup. If we were to run the other commands in the wordpress-develop then they would interfere with Gutenberg.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>npm run watch</strong> is important because it gives us the "build" folder inside wordpress-develop that the gutenberg code relies on.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> that's as far as we go in these instructions for now. <strong>Next step is to download and install Gutenberg Core.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now change OUT of the wordpress-develop folder and back INTO hello-wordpress... Then clone gutenberg:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>cd ../
git clone https://github.com/WordPress/gutenberg.git
cd gutenberg
npm install</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now we'll want to setup where our plugin code goes. Make another folder inside the "hello-wordpress" folder called "plugins", and create your plugins in there. Mine will be "my-cool-plugin"  So here's my  basic plugin code in this file:<strong> hello-wordpress/plugins/my-cool-plugin/my-cool-plugin.php</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;?php
/**
 * Plugin Name: My cool plugin
 * Plugin URI: https://truthseekers.io
 * Description: cool plugin stuff
 * Author: John
 * Author URI: https://truthseekers.io
 */</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>That should be enough to activate our plugin.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, we need to "connect" our plugins folder with Gutenberg. We do that in <code>.wp-env.override.json</code> inside our <strong>gutenberg folder</strong>. This file doesn't exist by default (as of writing this) so we'll need to create it. (in the same level as the package.json file)</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>{
    "core": "../wordpress-develop/build",
    "plugins": &#91;
        ".",
        "../plugins/my-cool-plugin"
    ]
}
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>The "core" line tells the Gutenberg plugin that the rest of the wordpress project is located in the wordpress-develop/build folder. That's where it will grab all the source... </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Each element in the "plugins" array is a directory for each plugin that you want activated. So.. "." for the gutenberg plugin, and then the location of the plugin you're developing.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Almost done. Now we just need to go back to the <strong>gutenberg folder</strong> and start things up.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npx wp-env start
npm run dev</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now you can access the WP dashboard area by visiting localhost:8888  and use "admin" and "password" as the credentials. Go visit the "plugins" section to see your plugin is activated.  To test, go to the "wordpress-develop" folder, and <strong>run a die statement in wp-includes/blocks.php</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4202,"sizeSlug":"full"} -->
<figure class="wp-block-image size-full"><img src="https://truthseekers.io/wp-content/uploads/2020/06/image-29.png" alt="" class="wp-image-4202"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>And refresh your admin area and hopefully you'll see it:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4204,"sizeSlug":"full"} -->
<figure class="wp-block-image size-full"><img src="https://truthseekers.io/wp-content/uploads/2020/06/image-30.png" alt="" class="wp-image-4204"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now test Gutenberg code. In the gutenberg folder, inside <strong>packages/blocks/src/index.js run a console.log...</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>and you should see the results of your console.log inside the dev tools when you're in the gutenberg editor area.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When you're done coding, <strong>kill everything with <code>CTRL+C</code> to kill npm run dev.. Then </strong><code>npx wp-env stop</code> to kill Gutenberg/Docker. Finally, </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>hit<code> CTRL+C</code> in wordpress-develop to kill wordpress-develop.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To start everything back up, <code>npm run watch</code>  in wordpress-develop,   then inside "gutenberg" run <code>npx wp-env start</code>   and then <code>npm run dev</code> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>You should have access to wp-cli utilities within the Gutenberg folder.</strong></p>
<!-- /wp:paragraph -->

[Don't miss our next tutorials!](https://truthseekers.io/latest-tutorials-signup/)