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 is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform. 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.
WpDotNet is a package made primarily to be used as a part of an ASP.NET Core application. Its possible uses are:
- Running WordPress on ASP.NET Core, without PHP, or any source files on the server.
- Adding WordPress as a frontend to an existing ASP.NET Core application.
- Combining WordPress and MVC or Razor views.
- Extending WordPress with plugins in C#.
Create and deploy an ASP.NET Core Web application with WordPress#
The following tutorial is shown in Visual Studio 2019.
In Visual Studio, create a new ASP.NET Core Web Application. Select File | New | Project and search for the ASP.NET Core Web Application template for C#.
Continue with Next and Create.
In the last step, make sure you are targeting ASP.NET Core, at least 3.0. Other options can be customized. For an empty web site, choose the Empty project template, as it does not have any unnecessary logic.
Continue with Create.
Add a package reference to PeachPied.WordPress.AspNetCore. Right click the project and select Manage NuGet Packages... Switch to the Browse tab, tick Include prerelease, and search for PeachPied.WordPress.AspNetCore.
Click Install and wait for the process to complete. Accept the license terms if prompted.
Next add WordPress to your request pipeline. Navigate to class Startup in file Startup.cs.
Add
UseWordPress()into your IAplicationBuilder, preferably right before UseRouting().The optional
services.AddWordPress( .. )can be used to alter the WordPress configuration, such as the Site URL, database connection credentials and others, as described in configuration.Prepare the MySQL server. Make sure you have MySQL server running:
- MySQL server is installed and running. It is up to you whether to install it locally, run it in a virtualized environment, such as Docker, or elsewhere.
Example command to run MySql using docker:
- A database is created. It can be an empty database or a duplicate of an existing database with WordPress.
- Ensure you have a valid username, password, and server address.
Enter the MySQL connection credentials in appsettings.json. Open the appsettings.json file and add the following section:
Run the application. Hit
F5or press the Start button in Visual Studio.Deploy the application using the Publish wizard. Right click the project, select Publish, and follow the instructions.
Grab the sample solution#
Wordpress Visual Studio Codes
A complete ASP.NET Core application with WordPress is available on GitHub:
The content of the repository is ready to be built, debugged, and published. It can be opened in a .NET IDE (Visual Studio, VS Code, Rider) for further customization.
Deploy Pre-Compiled to Azure#
In case you don't need any customizations and you just want to publish WordPress running on .NET to your Azure, follow the link below:
Please note that the deployment link above requires the target Azure cluster to have the .NET Core 3.1 SDK installed.
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).
Download game hermie hopperhead ps1. 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.
Visual Studio Code Wordpress Theme
Junctionless fet. 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:
Wordpress Plugin Visual Studio Code
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.
Comments are closed.