WordPress Themes in VS Code

Posted December 3, 2018 in: Programming

I recently started to recreate this site from a bare bones WordPress install to show how you can build a Programmer Portfolio. Check out the main post for more details. This post is about setting up a development environment for rapid theme iteration with Visual Studio Code

Installing All the Things!

Web Server / WordPress

Your first step will be to download and install a web server. I used WAMPServer since I’m on Windows and the default installation is quick and clean. A virtual machine with Nginx or straight Apache could also work. You’ll have to adjust some steps and I won’t be covering that option.

Next download WordPress from this link and unzip into the web root of your server. For WAMP that’s C:\wamp64\www. Create a database and user for WordPress, which you should be able to figure out in PHPMyAdmin or using the command line. Then go to localhost in a web browser and follow the instructions for setting up WordPress.

Note: If you run into trouble at this step there are great docs on the WordPress Codex. Also remember that as a programmer, Google is your friend. 

Visual Studio Code / Extras

Visual Studio Code is a lightweight text editor in the vein of Atom or Sublime. I began using it for web development after starting at my current job and will never look back. As time passes it’s become my default editor for most things, even C/C++. You can grab it here.

Once installed you’ll want to grab a few extensions, which you can get inside VS Code itself or from the following links:

Important: Make sure to grab the Chrome extension that goes along with Live Server. Also install the Standalone version of SASS. These two things will make magic happen later.

Creating The Project

Make a folder to store your theme files in. Doesn’t matter where you put it or what you call it, cause we’re gonna do some command line action.

mklink /J C:\wamp64\www\wp-content\themes\<yourthemenamehere> <yourprojectfolder>

This will create a junction, or hard link, between the first path you gave and the project folder that you created. Meaning you can organize your code however you like instead of working straight out of the WordPress directories.

Open your project folder in VS Code and add a style.css file. This gives the theme selector its meta data in the form of a block comment. You could also steal an example from the top of one of the built in twentywhatever themes. Then create an index.php file, which at this point can just have some plain html in it and make sure the PHP function wp_header() is called in the head element.

VS Code should be giving you syntax highlighting, auto-completion on your WordPress functions and even a bit of IntelliSense for global PHP functions and variables. You can now go into the admin panel for WordPress and 
change to your new theme!

Now for the cool part

At this point you should be able to make changes to your theme files, reload the site at localhost and see it update… but reloading manually is for losers! We wanna be cool kids! Appreciate the excitement and exclamation points in the last few sentences!

The Live Server extensions we installed for VS Code and Chrome can now come into play. In VS Code’s status bar you should see a Go Live button. Once you’ve clicked that you’ll get a page listing your files, and any time you change a file in the directory that page will reload.

Open the chrome extension and enable it, setting the Live Server Address to the one you just launched and the Actual Server address to http://localhost/. Then go to your WordPress install at localhost and refresh the page. Now every time you change something and save, it will auto reload the browser. Magic!

I’d recommend, though not necessary, to use SASS in watch mode to manage your CSS development. SASS makes working with CSS 1000 times better and in watch mode every time you change an scss file it’ll transpile, then Live Server will reload the page. DOUBLE MAGIC!

Wrapping Up

So figured all of that out today and got an initial theme together. It has  minimal navigation, basic styling and bare bones blog functionality. Not bad for knowing nothing about WordPress at the start of the day.

There’s now a repo on GitHub for this project. It has my VS Code settings files and I’ll be updating it as we go. Hope this helps someone else that likes VS Code to build their WordPress themes.

Leave a Reply

Your email address will not be published. Required fields are marked *