by

Wordpress Visual Studio Code



In Visual Studio Code, I’ll first open the plugin itself, and then I’ll add the WordPress site by selecting File - Add Folder to Workspace. That sets up a new Workspace where I can edit the plugin and the WordPress installation at the same time. Search results for 'wordpress', Visual Studio Code on marketplace.visualstudio.com. Yes, you can develop WordPress in Visual Studio. If by development of WordPress you mean advanced development scenarios like theme creation, plugin creation, WordPress as Web App then please continue reading. For all others, you don’t really, real. A collection of extensions for working with WordPress sites in VSCode. Extensions included. PHP Extension Pack - Includes the most important extensions to get you started with PHP development in Visual Studio Code; WordPress Toolbox - Snippets for every WordPress function, class and constant, complete with argument type hints and brief descriptions.

Visual Studio Code(VS Code) is a great text editor that can used to debug Node, C#.NET, TypeScript and thanks to its extensions and marketplace many more! I’ve been using VS Code since it came out for debugging JavaScript and later .NET Core but recently I as I was developing this website (in WordPress) I decided to try it out for debugging PHP. I was ready for pain after my experience setting up XDebug and php development with Apache with other IDEs but VS Code makes it a dream! Follow along to learn how to do this yourself.

Note: This tutorial is assuming that you already have a a WordPress install running on your and Visual Studio Code installed

Wordpress visual studio code generator

Since the WordPress application code is running in Apache and we’re not launching it using Visual Studio Code itself we need to ‘attach’ the debugger to the PHP process. This is done using Xdebug a “PHP extension for powerful debugging”.

Install XDebug

The best way to install XDebug is by following these steps to use their custom installation wizard:

Note: There are other ways of getting the phpinfo() output but the vary on different server configurations. If you know a way that is easier on your machine then you can skip to step 3.

  1. Create a file phpinfo.php in you htdocs or other apache accessible directory with the following content:
  2. Open the file in a browser (for example http://localhost/phpinfo.php) then copy and paste the text by pressing (Ctrl/Command + A) (Ctrl/Command + C).

  3. Open the custom installation wizard by clicking here

  4. In the text box paste in the phpinfo() output from the clipboard

  5. Click Analyse my phpinfo() output

  6. Follow the instructions that are output. They should look something like this:

Configuring VS Code

To debug PHP in VS Code you need to install the PHP Debug extention here. Once you’ve done this follow these steps:

Wordpress Visual Studio Code

  1. Open the root of your WordPress installation in VS Code

  2. Press F5

    Note: This will prompt you to select a language

  3. Select PHP

Debugging WordPress

Wordpress Visual Studio Code Free

Completing these steps will create a file in your workspace .vscode/launch.json here is mine as of posting this:

C# Visual Studio Tutorial

Now you create breakpoints in can press F5 and VS Code will attach to XDebug and will stop on breakpoints. For example in the following screenshot I have put a breakpoint in the functions.php in the twentyseventeen default WordPress theme. Cisco vpn for iphone.

Vs Code Blog

Wordpress Visual Studio Code

Giving you a fully featured debugging experience in PHP!