Visual Studio Code Wordpress

Posted on by



Visual Studio Code is a very rich, professional level environment which supports a wide range of activities. It is beyond the scope of a short article or video on how to exploit much of this power. However, we’ll note here that you may want to add Python environments, or remote developing capabilities. Search results for 'wordpress', Visual Studio Code on marketplace.visualstudio.com.

Visual Studio Code Visual Studio 2015; It is cross platform. Works on windows, linux and mac. This only works on windows. Visual studio code is based on files and folders. Visual Studio 2015 is based on project and solutions. It is fast as its lightweight. Compare to VS code, it’s not that fast. Let’s create a ASP.NET Core web application and see how we can build, run and debug this application using Visual Studio Code. Create a new folder for your application; In the folder, create a new ASP.NET Core web app using the dotnet CLI:dotnet new mvc -n daprweb; Open Visual Studio code in the current folder by running:code.

On February 23rd Eric and Alex gave a presentation at their local WordPress user group, MSPWP, on using Docker to mount local copies of WordPress sites for development. They demonstrated editing a site from Visual Studio Code. Finally, they covered getting started with debugging using XDebug in VS Code. Only a week and a half before they gave their presentation they first began experimenting with Docker, and quickly recognized it as the future for their local development sandboxes of client (and personal) websites. It was recognizing its potential so immediately that led them to want to share their finding with others.

The remainder of this post is a reproduction of the tutorial document that they made available after the presentation to the user group (and this post is, for all intents and purposes, their own place to archive it for anyone to find in the future, and they hope for those who find it that it is useful to you).

To install Docker go to the Docker download page.

The first part of our presentation showed how to create a WordPress install using the standard WordPress image. Here is the contents of the docker-compose.yml we used:

We created a new folder, mspwp, put this docker-compose.yml in that folder, and created a folder named html in that folder. For the purposes of trying this out yourself, do the same.

In a Terminal at the folder that contains your docker-compose.yml:

Start the Docker container:

Hint: You can omit the -d if you want to see the log stream for the Docker in your Terminal output (but not be returned to a command prompt).

The first time you run the container it will take longer to start as it downloads and sets up the images specified in your YAML.

At this point you should be able to point your browser at localhost:8999 and see the WordPress set up screen. You can run through the setup as usual, and now you have a WordPress site running on your Mac.

To see all the containers Docker is running type the following in Terminal:

After running the container once notice that the files for this WordPress installation are all in the html folder. You can edit any of them there and the changes will be reflected the next time you reload a page of the WordPress site.

To demonstrate this, add a new PHP file named info.php to your html folder that runs:

Save the file, then point your browser to localhost:8999/info.php. That file should load, and show you details on the PHP installation in your Docker.

Take down the container by running the following in a Terminal at the folder you created above:

Or simply quit the Docker app from the menubar; in this case when you relaunch Docker the containers (in this case, your WordPress site and its database) will automatically be ready to use. But to continue with this tutorial, for now leave it running.

To install Visual Studio Code go to the Visual Studio Code download page.

Visual Studio Code has a number of extensions. To access these go to the Extensions area by clicking the square item at the bottom of items in the lefthand sidebar of the window. You can install whatever extensions you’d like, but for the purposes of this tutorial make sure to install PHP Debug.

Going back to the top item in the lefthand sidebar (Explorer) a Welcome screen should still be shown. In it select the Open folder… option, and select your mspwp folder.

Open up info.php from the files list in the folder you opened in Visual Studio Code. Edit the echo line to say something else. Save the file and reload your browser window (or if it is pointed elsewhere, point it to localhost:8999/info.php).

Try your hand at navigating in Visual Studio Code and editing some more by making a change to the header.php file of the active theme (probably twentyseventeen) and loading localhost:8999.

To set up XDebug in your container we need to modify docker-compose.yml. First take down your container.

Change the image line for wordpress to use the eceleste/docker-wordpress-xdebug image. Also add XDEBUG-CONFIG: remote_host={your ip} to the environment section under wordpress. This new image includes XDebug, whereas the standard WordPress image is just the vanilla WordPress install with minimum other software.

Note, to find your Mac’s IP Address run the following in Terminal:

You can now restart your container.

Go to the Debug area by choosing the debug item from the lefthand sidebar (thrd item down). Click on the green Run button, the first time you do this it should give you a menu to choose what kind of debugging to do, select PHP. This will create and open your launch.json file, which defines how the debugger should work. It is stored in the .vscode folder in your workspace (the folder you opened). The contents of this file should be:

To test debugging, add a breakpoint in your header.php (click in the gutter by the line number to set a breakpoint at that line). Then run the debugger using the green Run button in the Debug area. With the debugger running you’ll have a debug control bar towards the top of the Visual Studio Code window.

Just reload the page in your browser and the debugger should come forward when your breakpoint gets hit. Look at the variables in the Variables section of this view. You can find and inspect all the usual WordPress variables, including WP_Post.

You can also manipulate the page as it loads using the Debug Console (should be towards the bottom of the Visual Studio Code window). For example, you can modify the post title by typing the following into the console and hitting return: php $post->post_title = 'Hello MSPWP'

The debugger can also be invoked for PHP notices, warnings, and exceptions. It will also let you follow all the way through your theme or plugin files, to parent theme and even core files, should you wish.

To copy a live WordPress website to your container you need to both copy the wp-content files, and copy the database. We do not copy core files, as those might as well be the cleaner versions from the Docker image that was used.

Copy the wp-content files with the following while in your mspwp folder:

If WordPress is installed in a subdirectory, be sure to include that in the path to copy from.

Assuming that you’re using something other than wp_ as the table prefix, remember to update wp-config.php with the proper prefix for your site.

To copy the database, in an SSH connection to the live server, first dump the database contents (check in the live wp-config.php for the proper username and password):

Copy backup.sql to your Mac. Then you may want to drop the current contents of the database in your container, so in a Terminal on your Mac:

Then import your backup file:

Yes, this will generate a warning about the idiocy of including the password on the command line, but in this case we don’t really care. To make a fresh backup of the database in your container, just grab it from MySQL:

Eric and Alex Celeste do WordPress site management and development as Tenseg LLC. We have clients both locally and across the nation who work in a number of fields. We can be reached at dev@tenseg.net.

There’s a new plugin available for DesktopServer users that makes WordPress code editing and development easier than ever. It allows you to use Microsoft’s evolutionary code editor Visual Studio Code. To get started, you’ll want to download it from https://code.visualstudio.com and be sure to follow our Installation instructions below.

Background

Microsoft has recently made leaps and bounds into open source code development and that’s been reflected in their latest acquisition of GitHub and their absolutely free and open source code editor known as Visual Studio Code. It has solid features that have been refined from their premium flagship product that debuted over two decades ago. Only now it is free and better than ever.

Visual Studio Code is based on Electron; the same foundation used in the popular GitHub Atom editor. Like the Atom editor, Microsoft’s editor has been quickly adopted by open source developers and features a wide set of plugins and community driven enhancements. We’ve found it more polished and speedy compared to Atom and feel that it’s one of the best cross platform editors that just happens to be free to use. To make things even easier, we’ve developed a plug-in for DesktopServer to automatically configure your WordPress website projects for use inside Microsoft Visual Studio Code.

How to Install

You will need to already have DesktopServer installed and will need to install both the Visual Studio Code Support plug-in and Microsoft Visual Studio Code itself to effectively work on your website projects.

Install Visual Studio Code Support Plug-in

Before being able to open your website projects, you will want to download and install the DesktopServer Visual Studio Code Support plugin. This design-time plugin will automatically create the project files for opening your new and existing WordPress websites in Visual Studio Code. You can download the plugin at:

Code

Unzip the file and move the “Visual Studio Code Support” folder to your “ds-plugins” folder; located at c:xamppliteds-plugins on Windows or /Applications/XAMPP/ds-plugins on Mac. Then fire up DesktopServer and use the first option to “Stop or restart… services”, followed by ensuring the checkbox for “Visual Studio Code Support” is checked.
Click next to start services. Now any websites you create, copy, or import will have automatically have Visual Studio Code project files created for them. Likewise, any existing sites that you have created prior can have their own preconfigured Visual Studio Code created when clicking the “VS Code” button on your localhost page.

Install & Configure Visual Studio Code

To install Microsoft Visual Studio Code, download and install it for your computer platform at:

Installation is easy; simply run the installer on Windows or drag the downloaded program icon to the /Applications folder on Macintosh.

There is one easy additional step to make editing your WordPress files more convenient in Visual Studio Code; simply install the “PHP Extension Pack”. You can install extensions by selecting the Extensions pull down menu; located under the Code -> Preferences -> Extensions menu on Macintosh and at File -> Preferences -> Extensions on Windows. Type “PHP Extensions Pack” in the search text field and locate the extension author by Felix Becker. Click the install button and you’re done.
Lastly, be sure to configure the Visual Studio Code Terminal feature to fully leverage using Visual Studio Code with WordPress. Instructions are in the next section.

Using Visual Studio Code with WordPress

Now that you have Visual Studio Code installed and the DesktopServer Visual Studio Code Support plug-in activated; it’s time to fire up your web browser and visit one of your websites in Visual Studio Code. If you haven’t created a WordPress website yet, just click through DesktopServer’s incredibly easy interface to create an example WordPress website. [link to Getting Started with DesktopServer steps 1 – 10] Next, click the “Sites” button in DesktopServer or open your favorite web browser and visit the http://localhost page. If everything is installed correctly you should now see the “VS Code” button next to your listed websites.

Launching Visual Studio Code

You can open up your WordPress project by simply clicking the “VS Code” button next to your listed website. Click the purple button and Visual Studio Code will automatically open up and pop you right into your website’s project folder. The editor should list all of your files that make up your WordPress project on the left hand side. Double click any PHP code file to have it open up inside Visual Studio Code’s text editing area.
The editor includes dozens of advanced features that make editing your code easy. “Intellisense” provides auto-completion suggestions and PHP syntax checking to reduce typos and accelerate code writing. “Code folding” helps simplify blocks of code and ease navigating large files (note lines 3-7 are temporarily hidden in the screenshot below). Formatting and keyword coloring enhances readability of comments and code.
If Visual Studio Code fails to start when you click the purple button; you will want to check out our Troubleshooting section at the end of this document.

Studio

C# Visual Studio Tutorial

Using Terminal Features

Visual Studio Code gives you integrated access to the DesktopServer Command Line Interface (DS-CLI) without having to leave the application or manually configure additional settings. You have full access to powerful command line tools such as WP-CLI, Composer for managing PHP packages, the NodeJS interpreter and a whole host of cross platform compatible scripting. To use the Terminal for the first time, simply click the pulldown menu for Terminal -> New Terminal followed by clicking the “Allow” button on the “workspace modification” dialog.
You will need to close and re-open the terminal window for changes to take effect; this is only important the first time you use the Terminal window in a given project. To close the window, use the “X” in the window’s upper right corner or simply type “exit” in the terminal window. Re-opening the terminal window will present to you a proper bash command line shell with the current working directory that is associated with your project. From here you can execute commands such as “wp” to view the WP-CLI help prompt.
The git command line is also included as apart of the pre-configured bash command line on Windows. On Macintosh, you will simply need to type “git” and press enter to automatically install the git command line interface. A prompt will guide you with the option to install the larger, Apple x-code development system. Xcode is not needed to develop effectively with WordPress and Macintosh users may simply “Install” to just obtain the git functionality.

There are lots of resources for working with the git command line tool; here are two that cover basics:

Debugging PHP Code

Debugging with Visual Studio Code and DesktopServer is incredibly straight forward. If you are new to the debugger, we can walk you through the basics of this incredibly handy programming tool. Normally the web server will “read” PHP files line by line and execute each instruction written by the author; the position (which line number) that is being read is referred to as the “instruction pointer”. The instruction pointer is not unlike a needle on a record, playing back musical notes one-by-one. With the debugger, we can “pause” playback and examine which notes have been played and their values.

Let us begin by opening up your WordPress project for a given website by clicking the “VS Code” button on your http://localhost page. With your files listed on the left-hand side, select a given file such as the file “wp-blog-header.php” from the site root folder.
Within any PHP file you can place a breakpoint on a given line number. In our example above, we place a breakpoint on line 16 of the file wp-blog-header.php. Place the breakpoint by clicking the empty area just left of the line number. A red dot will appear that represents a “stop sign”. This is where the instruction pointer, the execution of the PHP script, will halt and allow us to examine WordPress’ internal variable values and see program flow. Next, switch the editor to debug mode by clicking the “debug” icon on the far left hand side. This will replace the file view windows with four different windows with the following titles:

  • Variables – see all of your project’s global variables and their values
  • Watch – a list of explicitly defined variables that we can add or remove to see their values
  • Call Stack – a “breadcrumb” list of all the files and functions that have been executed
  • Breakpoints – a list of breakpoints that have been set


The contents of these windows will be empty until you start debugging. Start debugging by clicking the green “play” button at the top left by the “DEBUG” label. You may also initiate debugging by one of the following other methods:

Wordpress In Visual Studio

  • Selecting the pull down menu for Debug -> Start Debugging
  • Clicking the green debug arrow button
  • Pressing F5 on the keyboard

When debugging starts, your web browser will launch and attempt to take you to your WordPress website’s home page. However, execution will stop because we have set a breakpoint on line 16 inside the file wp-blog-header.php. This will result in your web browser “hanging” on a blank white page awaiting for the web server to deliver the page. Switching back to Visual Studio Code will reveal that execution has stopped on line 16 with a solid yellow bar highlighting the line number.

Visual Studio Code Vs Wordpress

In addition, the left sidebar windows will populate; namely “Variables” listing all the global variables that are being used. You may examine the contents by clicking the tree-control like structure to reveal variable values. Scrolling to $wp_query -> posts will reveal the value of “null” in the Variable window.
With line 16 highlighted, you should see a small floating window with following buttons:

  • Continue – to continue “reading” past the breakpoint and execute subsequent lines of code, stopping on any additional breakpoints (if present).
  • Step Over – to continue to the next line of code, processing any additional files or functions but not “stepping through them” line-by-line.
  • Step Into – to continue like step over but automatically open and/or reveal additional lines of code and functions line-by-line.
  • Step Out – to continue back up the list of files and/or functions in the “breadcrumb” like list of the Call Stack window.
  • Restart – stop execution and restart the debugger.
  • Stop – stop execution and stop debugging mode, clearing all debug windows.


Use the “Step Over” button or press F10 on your keyboard to step over line 16 which reads:

The wp function is the heart of the WordPress engine and is responsible for retrieving the post data from the database. After stepping over using F10, noticed that the Variable window will update and show that the formerly “null” value for $wp_query -> posts will now populate with the contents of the first post. In the default installation of WordPress, you should see the “Hello World” post, it’s date, title, etc.

You can continue debugging and finish delivering the web page to the web browser by using the Continue (pressing F5, the Continue button, or using the pull down menu for Debug -> Continue). Without any other breakpoints set, the web page should delivered to the web browser and you should see the homepage complete. Congratulations! You’ve just successfully used the debugger in Visual Studio Code. You can stop debug mode altogether by clicking the stop button.

Now you have a functional development editor that is above and beyond any plain text editor. You’ve also gotten a taste of several powerful features with many more to help you with your WordPress development and design needs. Enjoy!

Troubleshooting

Here is a list of known issues using Visual Studio Code with DesktopServer along with their common resolutions and/or work arounds. You can also check our GitHub issues list to review any new/breaking issues. Please do not use the issues section for general support questions; as it is intended for bug submission/tracking and/or feature requests. General questions should be referred to support at ServerPress.com.

Cannot validate because no PHP executable is set.
The DesktopServer server plugin sets the PHP executable on a per-project basis; but if you wish to use Visual Studio Code to edit arbitrary PHP files outside of your project, Visual Studio Code won’t be aware of which PHP interpreter to use. Macintosh systems come with PHP built in as default, but Windows does not have a native PHP interpreter. You can use the DesktopServer PHP executable for all your PHP editing needs by setting the path; here is how:

  • Click on the pull down menu for File -> Preferences -> Settings
  • Type “PHP Executable Path” in the Search Settings textbox
  • Click “edit in settings” and ensure the following JSON keys are set:

Be sure to save the settings.json file.

Exception has occurred. Notice: Constant WP_DEBUG already defined
This is a known compatibility issue that can occur if the Debug and Trace plugin is activated. To workaround this issue, simply deactivate the plugin using DesktopServer’s first option to “Stop or restart… services”; under the “Enable Developer Plugins” uncheck the “Debug and Trace” item in the listbox.

wp: The term ‘wp’ is not recognized
bash: wp: command not found
Powershell appears instead of bash
This issue can occur if you do not click the “Allow” button in the notification dialog followed by restarting the terminal instance. This is described in the Using Terminal Features section above. Use the notifications icon in the lower right hand corner of Visual Studio Code to review any notifications and scroll to the bottom to locate the “Allow” button.

Wordpress Vs Custom Code

Clicking the “VS Code” button opens a blank page
Visual Studio Code fails to appear when clicking “VS Code” from the localhost page
This issue occurs if Visual Studio Code is not assigned as the default editor for the ds.code-workspace file. This should have occurred during installation. You can create the association on Windows by locating the ds.code-workspace file and double clicking it from within Explorer. Locate your website files for a given project (aka the site root folder). By default this would the location at:

Visual Studio Code Wordpress

Where [ username ] is your Windows login name and example.dev.cc as your project’s domain name. After double-clicking the ds.code-workspace file, Windows will prompt you for the application to open the file up with; be sure to specify Visual Studio Code and select the checkbox for “Always use this app…”.

Vs Code Wordpress Development

As the Founder of ServerPress, LLC and creator of DesktopServer, Stephen J. Carnam continues to invent new ways to improve developer Workflow through technology. As a huge Advocate of Open Source Software, he promotes Creativity, Community and Collaboration.