#WORDPRESS OFFLINE EDITOR INSTALL#

You only need to install the PHP Debug extension and reload the editor.

#WORDPRESS OFFLINE EDITOR CODE#

Luckily, VS Code makes it easy to configure xDebug, and in my case it just works. XDebug is an invaluable tool to have for debugging PHP, but it can be tricky to set up. These tools make it much easier to work with WordPress plugins and themes, and PHP development in general. It even will add WordPress function argument type hints, which often helps save a trip to the docs. For that there is the WordPress Snippet extension, which will autocomplete WordPress core functions, classes, and constants. While that will add auto-completions for PHP core functions and anything that you have defined in your project, it wonвЂ™t pick up on much from WordPress core. Since WordPress is still mostly PHP, I use the PHP Intelephense extension, which adds PHP auto-completions, symbol navigation support, and a much better way to find references in your workspace. Luckily, thatвЂ™s easy to change by installing some extensions.

Out-of-the-box, VS Code doesnвЂ™t support WordPress and PHP as well as some other IDEs like PhpStorm (Find out how some of our team uses PhpStorm for WordPress Development). With that out of the way, letвЂ™s take a look at how we can make Visual Studio Code and WordPress play a bit nicer.

This creates a *.code-workspace file that you can use to open your Workspace again in the future, and also serves as a config file that will come in handy later. Next, click File -> Save Workspace As to save that Workspace. This is handy for quick edits to the wp-config.php file, and keeping an eye on the debug.log file while IвЂ™m developing. That sets up a new Workspace where I can edit the plugin and the WordPress installation at the same time. 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. IвЂ™ll then symlink the plugin IвЂ™m working on into a fresh WordPress website in the Sites folder. So IвЂ™ll have a Projects folder that has all of the plugins I work on, and a Sites folder that contains all of my sites. In my case, the vast majority of my time is spent on plugin development. For example, you may not want to use the WordPress Coding Standards on all of your projects, or maybe you work with a team of developers that canвЂ™t agree on tabs vs. I like Workspaces because you can create one of them for each project and change any setting or extension in VS Code at the Workspace level. You can think of a Workspace in VS Code as a container for your project вЂ“ it not only includes your project, but it can include files that your project relies on (your WordPress installation), and any extensions or settings specific to that project. There is a better way though, with the help of VS Code вЂњWorkspacesвЂќ. One way to do this might be to open that plugin or theme in your IDE and start coding away.

Most of the time when coding in WordPress, youвЂ™ll either be working on a plugin or a theme.

#WORDPRESS OFFLINE EDITOR HOW TO#

In this article IвЂ™ll review some features of VS Code that I love, and show you how to make the most out of it for WordPress dev. VS Code is a free, open source code editor that is lightweight like Sublime Text, but offers many of the same features as bigger IDEs like PhpStorm or WebStorm. If you keep up with the many text editors and developer tools available, you may have heard of MicrosoftвЂ™s Visual Studio Code.

Wordpress offline editor